‏چندتا preset کاربردی برای @custom-media در CSS

فایرفاکس 148 تو فوریهٔ 2026 قاعدهٔ @custom-media رو منتشر کرد، البته فعلاً پشت فلگ layout.css.custom-media.enabled. ایده‌اش شبیه custom propertyهاست ولی برای مدیا کوئری: یه بار یه شرط رو با اسم تعریف می‌کنی و بعد هر جا خواستی با همون اسم صداش می‌زنی. کروم فقط یه Intent to Prototype داره و سافاری هنوز هیچی. برای همین نویسنده هر preset رو با syntax جایگزین یعنی container style query هم نوشته؛ یه PostCSS plugin هم هست که syntax اصلی رو تبدیل می‌کنه.

اولین دسته مربوط به نوع ورودی دستگاهه. نویسنده می‌گه اندازهٔ صفحه دیگه چیزی دربارهٔ توانایی دستگاه نمی‌گه، چون تبلت ممکنه موس داشته باشه و دسکتاپ صفحهٔ لمسی. پس به‌جای حدس زدن از روی عرض صفحه، باید ورودی اصلی رو با ترکیب hover و pointer تشخیص داد:

@custom-media --mouse (hover: hover) and (pointer: fine);
@custom-media --touch (hover: none) and (pointer: coarse);
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --dpad (hover: none) and (pointer: none);

به گفتهٔ نویسنده، ویژگی‌های any-hover و any-pointer نمی‌گن ورودی دوم دقیقاً چیه، فقط می‌گن یکی از ورودی‌ها این توانایی رو داره. پس پیشنهادش اینه که روی ورودی اصلی تمرکز کنی و any-ها رو فقط به‌عنوان شرط اضافه کنار presetها بذاری، مثلاً (--touch) and (any-hover: hover) برای آیپدی که موس بهش وصله.

تو نسخهٔ container style query، این مقادیر داخل :root و زیر مدیا کوئری به‌صورت custom property ست می‌شن و بعد با @container style(--touch) خونده می‌شن. دوتا محدودیت داره: خود :root رو نمی‌شه باهاش استایل داد چون container بالای سرش نیست، و container query رو نمی‌شه با media query تو یه شرط ترکیب کرد. راه‌حل نویسنده اینه که به‌جای ساختن custom property‌های بیشتر، این دو رو تو هم nest کنی.

برای breakpointها، استراتژی نویسنده «بزرگ‌تر یا مساوی» با فاصلهٔ 100px هست، از 360px تا 1560px (مثل --from-360). breakpointهای «کوچیک‌تر یا مساوی» مثل --to-659 رو هم می‌شه کنارش گذاشت و ترکیبشون کرد، که از تعریف بازه‌های ثابت انعطاف بیشتری داره. آخرین preset هم --true-hdr هست که dynamic-range: high و color-gamut: p3 رو با هم چک می‌کنه، چون بدون هر دو، تصویر و ویدیوی HDR یا کم‌رنگ دیده می‌شه یا تیره.

نکات کلیدی:

• @custom-media تو فایرفاکس 148 پشت فلگ layout.css.custom-media.enabled اومده.
• کروم فقط Intent to Prototype داره و سافاری هنوز پشتیبانی نمی‌کنه.
• presetهای ورودی: --mouse، --touch، --stylus، --air و --dpad بر اساس hover و pointer.
• breakpointها از 360px تا 1560px با گام 100px تعریف شدن.
• --true-hdr ترکیب dynamic-range: high و color-gamut: p3 هست.
• container style query الان همه‌جا کار می‌کنه ولی روی :root اثر نداره.