جستجوهای رسانه‌ای CSS

CSS2 نوع‌های رسانه را معرفی کرد.

CSS2 به وجود آمد. @media قوانین که امکان تعریف قوانین استایل مختلف برای نوع‌های مختلف رسانه‌ها را فراهم می‌کند.

مثال: ممکن است شما یک مجموعه از قوانین استایل برای صفحه نمایش کامپیوتر داشته باشید، یک مجموعه از قوانین استایل برای چاپگر، یک مجموعه از قوانین استایل برای دستگاه‌های دستی و حتی یک مجموعه از قوانین استایل برای تلویزیون و غیره.

متاسفانه، به جز نوع رسانه‌ای چاپ، این نوع‌های رسانه‌ای هرگز توسط دستگاه‌ها به صورت گسترده‌ای پشتیبانی نشده‌اند.

CSS3 جستجوهای رسانه‌ای را معرفی کرده است

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

جستجوهای رسانه‌ای می‌توانند برای بررسی بسیاری از چیزها استفاده شوند، به عنوان مثال:

  • عرض و ارتفاع视‌وگاه
  • عرض و ارتفاع دستگاه
  • جهت (تابلت/تلفن هوشمند در حالت افقی یا عمودی است)
  • رزولوشن

استفاده از جستجوهای رسانه‌ای یک تکنیک محبوب است که به شما اجازه می‌دهد فایل‌های استایل سفارشی برای دسکتاپ، لپ‌تاپ، تبلت و تلفن‌های همراه (مثلاً iPhone و تلفن‌های اندرویدی) ارائه دهید.

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده‌ی پشتیبانی کامل @media نسخه‌ی اولین مرورگر که قوانین را پشتیبانی می‌کند.

ویژگی
@media 21.0 9.0 3.5 4.0 9.0

قوانین گرامری جستجوهای رسانه‌ای

جستجوهای رسانه‌ای از یک نوع رسانه‌ای تشکیل شده و می‌تواند یک یا چند عبارت را شامل شود که می‌توانند به درست یا نادرست تجزیه شوند.

@media نه|فقط mediatype و (expressions) {
  CSS-Code;
}

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

مگر اینکه از عملگر نه یا فقط استفاده کنید، نوع رسانه‌ای اجباری است و به صورت پیش‌فرض all نوع.

شما همچنین می‌توانید برای نوع‌های مختلف رسانه‌ها از فایل‌های استایل مختلف استفاده کنید:

<link rel="stylesheet" media="mediatype و|نه|فقط (expressions)" href="print.css">

نوع رسانه‌ای CSS3

مقدار توضیح
all برای همه‌ی نوع‌های دستگاه‌های رسانه‌ای.
print برای چاپگر.
screen برای استفاده در صفحه‌ی نمایش کامپیوتر، تبلت، تلفن هوشمند و غیره.
speech برای خواندن صفحه به صورت صدایی از صفحه‌ی نمایش خوانندگان صفحه‌ی نمایش استفاده می‌شود.

مثال ساده جستجوهای رسانه‌ای

یک روش استفاده از جستجوهای رسانه‌ای داشتن یک بخش CSS جایگزین در داخل فایل استایل است.

این مثال در عرض视‌وگاه 480 پیکسل یا بزرگتر رنگ پس‌زمینه را به سبز روشن تغییر می‌دهد (اگر عرض视‌وگاه کمتر از 480 پیکسل باشد، رنگ پس‌زمینه صورتی خواهد بود):

مثال

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

آزمایش کنید

این مثال یک منو را نشان می‌دهد که اگر عرض视‌وگاه 480 پیکسل یا بزرگتر باشد، آن منو به سمت چپ صفحه‌ی وب شناور می‌شود (اگر عرض视‌وگاه کمتر از 480 پیکسل باشد، منو در بالای محتوای صفحه قرار می‌گیرد):

مثال

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

آزمایش کنید

مثال‌های بیشتر جستجوهای رسانه‌ای

برای دسترسی به مثال‌های بیشتر جستجوهای رسانه‌ای، لطفاً بهمثال‌های MQ CSS.

مرجع دستور @media CSS

برای بررسی کامل همه نوع‌های رسانه‌ها و ویژگی‌ها/عبارات، لطفاً به قانون @media در مرجع CSS.