به‌طور معمول نوشتن کدی مانند min-width: 300pxممکن است خیلی شهودی نباشد و همین موضوع باعث ایجاد سردرگمی مخصوصا برای افراد تازه‌کار شود. از این رو CSS مدرن با معرفی محدوده برای media query نیاز به تعریف دوباره آن‌ها به صورت قبلی را از بین می برد. این سنتکس علاوه بر این که خواندن و نوشتن media queryهای CSS را آسان‌تر می‌کند، مشکلاتی که در مقادیر min یا max ایجاد می‌شود را هم برطرف می‌کند.

روش قدیمی نوشتن media query

همانطور که از قبل می‌دانیم اگر بخواهیم یک media query برای اندازه صفحه‌های نمایش بالاتر از یک عرض معین تعریف کنیم، چیزی شبیه به کد زیر خواهیم نوشت:

@media (min-width: 1000px) {}

استایل‌های این media query فقط بر روی صفحه‌نمایش با عرض ۱۰۰۰ پیکسل و بالاتر اعمال می‌شوند. اگر بخواهیم همین کار را برای صفحه نمایش با اندازه‌های کوچک‌تر انجام دهیم شبیه به کد زیر عمل خواهیم کرد:

@media (max-width: 700px) {}

استایل‌های این media query فقط بر روی صفحه‌نمایش با عرض ۷۰۰ پیکسل و یا کم‌تر اعمال می‌شوند. اگر بخواهیم یک مقداری بین این دو مقادیر داشته باشیم به صورت زیر پیش می‌رویم:

اکنون استایل‌های این media query فقط بر روی صفحه‌نمایش با عرض بین ۷۰۰ تا ۱۰۰۰ پیکسل اعمال می‌شود. کدی که داریم به درستی کار می‌کند، اما در کل خواندن آن کمی دشوار است و برای مثال، اگر بخواهیم چند کد تلفن همراه خاص را به media query خاص دسکتاپ اضافه کنیم، می‌تواند منجر به اشتباهات و اشکالات ساده شود. به همین دلیل است که انتخابگرهای محدوده جدید برای media query بسیار عالی هستند.

روش جدید نوشتن media query

در ادامه media queryهای بالا را به سینتکس جدید در محدوده‌ای که داریم تبدیل می‌کنیم. به این صورت که:

/* Greater than or equal to 1000px */
@media (width >= 1000px) {}

/* Less than or equal to 700px */
@media (width <= 700px) {}

/* Between 700px and 1000px */
@media (700px <= width <= 1000px) {}

این سینتکس جدید دستور کوچک‌ترو بزرگ‌تررا به کد اضافه می‌کند که نوشتن media query را آسان‌تر می‌کند و مهم‌تر از آن باعث می‌شود تا خواندن آن‌ها بسیار ساده‌تر باشد. در ادامه لیستی از اپراتورهای جدیدی که به این به‌روزرسانی اضافه شده‌اند را داریم:

• <
• <=
• >
• >=
• =

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

این موارد چگونه مشکلات موجود در مقادیر min یا max رو برطرف می‌کند؟

برای مثال کد زیر را در نظر بگیرید:

@media (min-width: 500px) {}
@media (max-width: 500px) {}

media query اول با تمام دستگاه در محدوده ۵۰۰ پیکسل و بزرگ‌تر از آن مطابقت دارد، media query دوم با همه دستگاه در محدوده ۵۰۰ پیکسل و کم‌تر از مطابقت دارد. اما سوالی که مطرح می‌شود این است که دقیقاً در ۵۰۰ پیکسل چه اتفاقی می‌افتد؟ هر دو media query در ۵۰۰ پیکسل اعمال می‌شوند که این موضوع می‌تواند باعث ایجاد مشکلات عجیبی در کد ما شود. به همین دلیل است که انتخابگرهای محدوده جدید بسیار مفید هستند زیرا می‌توانیم آن را به صورت زیر بازنویسی کنیم:

@media (width >= 500px) {}
@media (width < 500px) {}

اکنون در ۵۰۰ پیکسل فقط media query اول استفاده می‌شود در حالی که دومی فقط بر روی صفحه‌های کم‌تر از ۵۰۰ پیکسل اعمال می‌شود.

احتمالاً یافتن مشکلاتی که به این دلیل ایجاد شوند بسیار دشوار و زمان‌بر خواهد بود. از این رو استفاده از محدوده جدید که در media query تعریف شده‌اند می‌تواند بسیار مفید باشد.

میزان پشتیبانی مرورگرها از محدوده جدید media query

متأسفانه، پشتیبانی از این ویژگی به اندازه کافی برای استفاده در کد خوب نیست، زیرا تنها ۷۱٪ از مرورگرها از آن پشتیبانی می‌کند. تنها مرورگر اصلی که مانع از این موضوع می‌شود، سافاری است زیرا سافاری نه در دسکتاپ و نه موبایل از این ویژگی پشتیبانی نمی‌کنند. اما خوشبختانه ابزارهایی مانند PostCSS وجود دارد تا بتوانیم CSS مدرن را به این صورت که داریم بنویسیم و آن را به CSS انتقال دهیم که هر مرورگری بتواند آن را درک کند. بنابراین اگر از ابزاری مانند PostCSS استفاده می‌کنیم خیلی راحت و بدون هیچ مشکلی می‌توانیم از این ویژگی استفاده کنیم.

جمع‌بندی

به‌طور کلی استفاده از روش جدید برای تعریف محدوده media query در CSS باعث می‌شود کدی که داریم ساده بوده و خوانایی بسیار بالایی داشته باشد.