سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.
برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :
media="all" />
همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید
برای اعمال توسط کلیه مرورگرها :
styles1.css" rel="stylesheet" type="text/css" media="screen" />
برای اعمال فقط توسط مرورگر کروم :
styles1chrome.css" rel="stylesheet" type="text/chrome" />
برای اعمال فقط توسط مرورگر سافاری:
styles1safari.css" rel="stylesheet" type="text/safari" />
برای اعمال هنگام پرینت کردن صفحه :
styles2.css" rel="stylesheet" type="text/css" media="print" />
برای اعمال هنگام باز شدن صفحه در انواع PDA :
styles3.css" rel="stylesheet" type="text/css" media="handheld" />
برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.
کاربرد کوچکی از این موضوع : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.
با تشکر
با تشکر
If u put more Css Learning Series and samples I would Really Appreciate it!
Regards