ویژگی media در css

Css راهی را در اختیار ما می گذارد که بتوانیم محتوا را بر اساس وسیله ای که سند را بر روی آن می بینیم به صورت متفاوت نمایش دهیم. این قوانین شرطی در بین یک قانون media قرار می گیرند، که این نوع دستور (قانون) باعبارت @media شروع می شود و پس از آن عبارتی است که دامنه را محدود می کند و یک آکولاد قرار دارد که قوانین شرطی در بین آن قرار می گیرند.
قانون @media در CSS2 معرفی شده است. :

@media screen{
     /* screen devices only */
}

انواع رسانه ها (Media types)

شرط نوع رسانه – همانطور که قبلا گفته شد - از نسخه css2 معرفی شده است؛ این شرط مقادیر معتبر زیر را در اختیار ما قرار می دهد، که مقدار پیش فرض آن all است و یعنی تمام ابزارها را شامل می شود:

all | aural | braille | handheld | print | projection | screen | tty | 	tv | embossed

متاسفانه انواع رسانه اطلاعات زیادی را در مورد وسیله ارائه نمی کنند، بنابراین به ندرت برای هدفی که برای آن طراحی شده است استفاده می شود. تلفن های هوشمند جدید، تبلت ها، لپ تاپ ها، و کامپیوترهای رومیزی همه خود را به عنوان screen معرفی می کنند. مهمترین استفاده شرط نوع رسانه در طراحی های امروز این است که بین اسناد روی نمایشگر و اسناد چاپی تفاوت قائل شود تا ما را قادر سازد که ساختار قابل چاپ مناسب تری ایجاد کنیم.

/* فقط برای چاپ */
@media print{
/* مخفی کردن منوی ناوبری */
#navigation { display: none; }
/* عناصر h1 در بالای یک صفحه جدید قرار بگیرند */
h1 { page-break-before: always;}
}

معمولا قوانین مربوط به media در پایین style sheet قرار می گیرد، که اجازه می دهد دستورات آبشاری، قوانینی که قبلا تعریف شده اند را باطل کند. اگر شیوه نامه دارای تعداد زیادی قوانین شرطی باشد، ممکن است ترجیح دهیم آنها را به یک شیوه نامه جداگانه که بعد از شیوه نامه اولیه قرارداده می شود منتقل کنیم. بعد از آن می توانیم شرط مربوط به media را با استفاده از عنصر <link> در داخل فایل قرار دهیم.

<link rel="stylesheet" media="print" href="myprint.css">

در شیوه نامه بالا شرایط مربوط به چاپ قرار دارد، بنابراین محتویات این شیوه نامه تنها زمانی اعمال می شود که سند برای چاپ ارسال شده باشد. این مساله را به یاد داشته باشید که حتی اگر شروط مربوط به رسانه غلط باشد، مرورگر بازهم شیوه نامه را دانلود می کند.

Media queries

در css3 امکان جدیدتری ارائه شده است و یک قدم به جلوتر می رویم؛ در این نسخه علاوه بر تعیین نوع رسانه، قابلیت های رسانه را مورد بررسی قرار می دهد. در این نسخه از css محدوده وسیعی از ویژگی های رسانه هدف قرار می گیرد که می توانید در فهرست زیر ببینید:

width | height | device-width | device-height | aspect-ratio | device-aspect-ratio |
resolution | orientation | color | color-index | monochrome 

مهمترین ویژگی های رسانه که min-width و max-width هستند به شما این اجازه را می دهند که صفحات را به صورت پاسخگو (responsive) طراحی کنید که در این نوع طراحی ساختار صفحات وب بر اساس viewport مشخص می شود.

به این نکته توجه داشته باشید که ویژگی @media در تمام نسخه های مرورگرهای وب پشتیبانی نمی شود. در زیر، نحوه پشتیبانی از این ویژگی در مرورگرهای وب مختلف را می بینید:

• در مرورگر chrome: 21.0
• در مرورگر IE: 9.0
• در مرورگر FireFox: 3.5
• در مرورگر Safari: 4.0
• در مرورگر Opera: 9.0

یک پرس و جوی رسانه (media query)، نوع رسانه و یک یا چند ویژگی رسانه را باهم ترکیب می کند. به عنوان مثال قوانین نوشته شده در پرس و جوی زیر فقط زمانی اعمال می شود که رسانه ای که کاربر صفحات را در آن می بیند دارای عرض حداقل 600پیکسل باشد.

@media screen and  (min-width: 600px) {}

پرس و جوهای رسانه نسبت به کوچکی و بزرگی حروف حساس هستند، و همچنین استفاده از پرانتز در اطراف شرایط، ضروری است. عملگر and که در مثال بالا می بینید برای ترکیب کردن نوع رسانه و ویژگی رسانه استفاده می شود، اما می توان با این عملگر چند ویژگی را نیز با هم ترکیب کرد:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

پرس و جوی رسانه که در مثال بالا می بینید، زمانی درست است که وسیله ای که محتوا در آن نمایش داده می شود دارای عرض 500 پیکسل باشد و نسبت ابعاد صفحه نمایش حداقل یک به یک باشد(نمای دید مربع یا افقی). توجه کنید که در این مثال نوع رسانه را ذکر نکرده ایم، بنابراین این قانون برای همه نوع رسانه ها استفاده می شود.

عملگرهای منطقی (logical operators)

علاوه بر عملگر منطقیand، می توانیم در پرس و جوهای رسانه از عملگر منطقی not و عملگر منطقی only و همچنین عملگر منطقی or استفاده کنیم. به جای عملگر or از علامت کاما (,) استفاده می کنیم تا گروه های پرس و جوها را از یکدیگر جدا کنیم. قانونی که در مثال پایین نوشته شده است زمانی درست است که صفحه نمایش حداقل 700پیکسل عرض داشته باشد یا اینکه وسیله نمایش در حالت landscape باشد:

@media (min-width: 700px), (orientation: landscape) {}

از عملگر not برای این استفاده می کنیم که تمام یک پرس و جوی رسانه را خنثی (منفی) کنیم. این عملگر نمی تواند یک ویژگی را به تنهایی خنثی کند. به عنوان مثال قانون زیر تنها زمانی اعمال می شود که صفحه نمایش دستگاه دارای عرض 800 پیکسل نباشد:

@media not screen and (device-width: 800px) {}

عملگر onlyبرای این اضافه شده است که پرس و جوهای رسانه را از مرورگرهای وب قدیمی مخفی کنیم. بر اساس خصوصیات مربوط به این ویژگی، مرورگرهای وبی که از پرس و جوهای رسانه پشتیبانی نمی کنند قطعه دستور زیر را به عنوان نوع رسانه only در نظر می گیرد که یک مقدار نامعتبر است و در نتیجه این مرورگر قوانین سبک شرطی را نادیده خواهد گرفت:

/* درمرورگرهای قدیمی اثر ندارد  */
@media only screen and (min-width: 600px) {}

متاسفانه نسخه های IE6-IE8 این ویژگی ها را به درستی اعمال نمی کنند. بنابراین در مورد این نسخه های مرورگر پرس و جوی رسانه نادیده گرفته می شود حتی اگر عملگر only استفاده نشده باشد و در این حالت قانون رسانه برای همه نوع ابزار اعمال می شود.

/* کدهای زیر در نسخه های 8 الی 6 IE اعمال نمی شود. */
@media screen and (min-width: 600px) {}

تست کردن پرس و جوهای رسانه

حتما باید قوانینی را که برای نوع رسانه می نویسیم امتحان کنیم تا مطمئن شویم صفحات ما تا آنجا که ممکن است در تمام ابزارها به خوبی نمایش داده می شوند. آخرین نسخه های مرورگرهای وب زمانی که محیط مرورگر تغییر می کند پرس و جوی رسانه را دوباره ارزیابی می کند (به عنوان مثال زمانی که پنجره تغییر اندازه پیدا می کند). بنابراین در یک مرورگر جدید می توانید تنها با تغییردادن اندازه پنجره مرورگر بررسی کنید که طراحی صفحات شما چگونه تغییر می کند. یک سایت مفید که شما را در طول این فرایند می تواند کمک کند سایت ProtoFluid است که به شما کمک می کند بررسی کنید وب سایت شما بر روی انواع تبلت ها و تلفن های هوشمند چگونه نمایش داده می شود.

راهنماهای مربوط به طراحی صفحات پاسخگو (Responsive)

هنگامی که یک صفحه بندی پاسخگو را طراحی می کنید، در اغلب اوقات راحت تر است که از صفحه بندی مربوط به موبایل شروع کنید و طراحی را طوری تعریف کنید که بدون نوشتن هیچ نوع قانون مربوط رسانه، کارمان انجام شود. هنگامی که محدوده دید کاربر (viewport)گسترش پیدا می کند توجه کنید که چه موقع نوع صفحه بندی شما دیگر خوب به نظر نمی رسد. اینجا نقطه ای است که باید شما مشخص کنید که طرح بندی صفحات خود را تغییر دهید. این تغییر می تواند شامل اضافه کردن یک ستون دیگر یا تغییر دادن طراحی به سمت یک نوار پیمایش پیشرفته تر باشد.
باید این نقطه ها را با استفاده از ویژگی های رسانه شامل min-widthو max-width مشخص کنید؛ با این روش، هنگامی که محدوده نمایش گسترش پیدا می کند، سبک قبلی لغو می شود؛

مثال زیر را ببینید؛ این روش را اینقدر ادامه دهید تا تمام نقاط انفصال را پیدا کنید تا زمانی که به یک رزولوشن با دقت بالا و کافی برسید. بر اساس نوع طرح بندی که شما از آن استفاده می کنید ممکن است لازم باشد فقط تعداد کمی نقطه انفصال ایجاد کنید:

@media (min-width: 800px){
body {background: red;}
}
@media (min-width: 410px) and (max-width: 799px) {
body { background: green; }
}
@media (max-width: 400px){
body { background: blue; }
}