‏Range Media Queries: خداحافظی با باگ‌های min-width و max-width

مدیا کوئری‌ها ستون فقرات طراحی ریسپانسیو هستن، ولی سینتکس min-width و max-width می‌تونه گاهی باگ‌های ظریفی ایجاد کنه که پیدا کردنشون واقعاً وقت‌گیره.

مشکل کجاست؟

فرض کن یه منوی ناوبری داری که روی موبایل مخفی‌ه و یه دکمه‌ی toggle داری که روی دسکتاپ مخفی می‌شه. CSS معمولاً اینجوری نوشته می‌شه:

/* مخفی کردن ناوبری روی صفحه‌های کوچک */
.nav {
  @media (max-width: 300px) {
    display: none;
  }
}

/* مخفی کردن دکمه روی صفحه‌های بزرگ */
.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

مشکل اینجاست که max-width: 300px یعنی «کوچک‌تر یا مساوی ۳۰۰ پیکسل» و min-width: 300px یعنی «بزرگ‌تر یا مساوی ۳۰۰ پیکسل». پس دقیقاً در عرض ۳۰۰ پیکسل، هر دو کوئری با هم فعال می‌شن و هم منو هم دکمه مخفی می‌شن!

راه‌حل کلاسیک اینه که یکی از مقادیر رو یه پیکسل جابه‌جا کنی:

.nav {
  @media (max-width: 299px) {
    display: none;
  }
}

.toggle {
  @media (min-width: 300px) {
    display: none;
  }
}

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

Range Media Queries به کمک می‌رسن

مدیا کوئری‌های رِنج بخشی از مشخصه‌ی Media Queries Level 4 هستن و با عملگرهای مقایسه‌ای مثل ``، = کار می‌کنن. همون کد بالا با این سینتکس اینطوری نوشته می‌شه:

/* کوچک‌تر یا مساوی ۳۰۰ پیکسل */
.nav {
  @media (width <= 300px) {
    display: none;
  }
}

/* بزرگ‌تر از ۳۰۰ پیکسل */
.toggle {
  @media (width > 300px) {
    display: none;
  }
}

خوندن این کد خیلی طبیعی‌تره — مستقیم می‌تونی بفهمی کِی چی می‌شه، بدون اینکه بین min و max سردرگم بشی.

مزیت بزرگ دیگه: تعریف بازه‌ها

یه جای دیگه‌ای که Range Queries واقعاً می‌درخشن اینه که می‌خوای استایل‌هایی رو فقط بین دو breakpoint اعمال کنی. مقایسه کن:

/* روش قدیمی */
.section {
  @media (min-width: 300px) and (max-width: 500px) {
    /* استایل‌ها */
  }
}

/* روش جدید */
.section {
  @media (300px <= width <= 500px) {
    /* استایل‌ها */
  }
}

نسخه‌ی جدید مثل یه عبارت ریاضی ساده خونده می‌شه و نیازی به کلمه‌ی and هم نداره.

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

خبر خوب اینه که این قابلیت از مارس ۲۰۲۳ در تمام مرورگرهای اصلی (کروم، فایرفاکس، سافاری، اج) پشتیبانی می‌شه و جزو ویژگی‌های Baseline Widely Available به حساب میاد. اگه الان از Container Queries توی پروژه‌ات استفاده می‌کنی، Range Queries هم همون سطح از پشتیبانی رو داره و می‌تونی بدون نگرانی ازش استفاده کنی. جالب‌تر اینکه همین سینتکس رو می‌شه برای Container Queries هم به کار برد.

نکات کلیدی:

• max-width: 300px و min-width: 300px با هم در عرض ۳۰۰ پیکسل فعال می‌شن و می‌تونن باگ ایجاد کنن
• Range Queries با عملگرهایی مثل width > 300px یا `width