قرار دادن مدیا کوئری ها در کدها، برای هر برنامه نویس که تاکنون یک نوع مدیا را بر روی عنصر link یا دستور @import تنظیم کرده باشد، بسیار ساده است. در زیر دو روش معادل برای اعمال یک برگه ی استایل اکسترنال به هنگام رندر(rendering) کردن سند بر روی یک پرینتر رنگی، وجود دارد:

<link href="/print-color.css" type="text/css" media="print and (color)" rel="stylesheet">
@import url(print-color.css) print and (color);

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

<link href="/print-color.css" type="text/css" media="print and (color), screen and (color-depth: 8)" rel="stylesheet">
@import url(print-color.css) print and (color), screen and (color-depth: 8);

 در صورتی که حتی یکی از مدیا کوئری ها به صورت true ارزیابی شود، برگه ی استایل مورد نظر اعمال خواهد شد. از این رو، برای  دستور @import  در  خط دوم کدهای بالا، اگر از  یک پرینتر رنگی استفاده شود  یا در یک صفحه ی نمایش رنگارنگ رندر شود، فایل print-color.css  اعمال خواهد شد. اگر چاپ در یک پرینتر سیاه و سفید انجام شود، هردوی کوئری ها ارزشی برابر با false پیدا می کنند و فایل print-color.css به سند اعمال نخواهد شد.

هر توصیف گر مدیا، از یک نوع مدیا و یک یا چند ویژگی و مقدار  تشکیل می شود. هر ویژگی مدیا، در داخل یک جفت پرانتز قرار می گیرد. اگر هیچ نوع مدیایی ارائه نشده باشد، فرض می شود که نوع مدیا all است؛ این یعنی دو مثال زیر با یکدیگر یکسان هستند:

@media all and (min-resolution: 96dpi) {...}
@media (min-resolution: 96dpi) {...}

 به طور کلی، یک ویژگی مدیا، مانند ویژگی و مقدار در CSS می باشد. یک تفاوت بین ویژگی مدیا و ویژگی در CSS این است که در مدیا می توانیم یک ویژگی داشته باشیم که مقدار(value) نداشته باشد. بعنوان مثال، با استفاده از مدیای (color) تمام محیط های مبتنی بر رنگ مورد تطابق قرار می گیرند، در حالی که با استفاده از مدیای (color: 16) تمام محیط های رنگی که از یک عمق رنگ 16 بیت استفاده می کنند، مورد تطابق قرار خواهند گرفت. در واقع، استفاده از یک توصیف گر که هیچ مقداری(value) نداشته باشد، یک تست true یا false  برای آن توصیف گر است. مثلا عبارت (color) یعنی اینکه: آیا این محیط، یک محیط رنگی(color) است یا نه؟

توصیف گر هایی که دارای چند ویژگی هستند می توانند به وسیله ی کلمه ی کلیدی منطقی and به یکدیگر  پیوند بخورند. در حقیقت، در مدیا کوئری ها، دو کلمه ی کلیدی منطقی وجود دارد که عبارتند از:

1. کلمه ی منطقی and

این کلمه ی کلیدی، دو یا چند ویژگی مدیا را به این صورت به یکدیگر مرتبط می کنند که اگر ارزش تمام ویژگی ها true باشد، ازش این کوئری نیز true خواهد شد. بعنوان مثال عبارت زیر را در نظر بگیرید:

(color) and (orientation: landscape) and (min-device-width: 800px)

 عبارت بالا یعنی هر سه بخش باید تست شوند، اگر محیط مدیا رنگی(color) باشد،  و صفحه به صورت افقی(landscape) باشد،  واندازه ی صفحه ی نمایش حداقل 800 پیکسل باشد، آنگاه برگه ی استایل مورد نظر اعمال خواهد شد.

2. کلمه ی منطقی not

این کلمه ی منطقی، ارزش کل کوئری را نفی می کند، به طوری که اگر تمام شرط ها true باشند، آنگاه برگه ی استایل مورد نظر اعمال نخواهد شد. بعنوان مثال، عبارت زیر را در نظر بگیرید:

not (color) and (orientation: landscape) and (min-device-width: 800px)

 در عبارت بالا  اگر این سه شرط برقرار باشند، این عبارت نفی می شود. از این رو  اگر محیط مدیا رنگی(color) باشد، و صفحه افقی(landscape) باشد، و اندازه ی صفحه ی نمایش حداقل 800 پیکسل باشد، آنگاه برگه ی استایل اعمال نخواهد شد. و در دیگر موارد مورد استفاده قرار خواهد گرفت.

نکته: توجه کنید که از کلمه ی کلیدی not تنها می توانیم در ابتدای مدیا کوئری استفاده کنیم. بنابراین استفاده از عبارت زیر قانونی نیست:

(color) and not (min-device-width: 800px)

 در چنین مواردی، کوئری نادیده گرفته می شود.

 نکته: توجه کنید که مرورگرهای بسیار قدیمی، برای اینکه مدیا کوئری ها را درک کنند، همواره برگه ی استایلی که توصیف گر مدیای آن با not شروع می شود را از قلم می اندازند.

در مدیا کوئری ها، کلمه ی کلیدی OR برای استفاده وجود ندارد. به جای آن، می توانیم با تکرار screen یک از شبه-OR استفاده کنیم. مثلا عبارت زیر را در نظر بگیرید:

screen and (max-color: 2) or (monochrome)

 این عبارت نامعتبر است، و از این رو نادیده گرفته می شود، و به جای آن باید از عبارت زیر استفاده کنیم:

screen and (max-color: 2),screen and (monochrome)

3. کلمه ی only

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

@import url(new.css) only all

در مرورگرهایی که مدیا کوئری ها را درک می کنند، کلمه ی کلیدی only نادیده گرفته می شود و برگه ی استایل اعمال می شود. در مرورگرهایی که مدیا کوئری ها را درک نمی کنند،  عبارت only all غیر متعبر محسوب می شود. از این رو، این برگه ی استایل در چنین مرورگرهایی اعمال نمی شود. توجه کنید که از کلمه ی کلیدی only تنها می توان در ابتدای یک مدیا کوئری استفاده کرد.

• بعدی
• قبلی