Custom Media Queries

В CSS постепенно появляются функции, которые позволяют отказаться от препроцессоров. В целом я уже давно пишу CSS и не помню, когда последний раз использовал SCSS. Но всё ещё есть несколько неудобных моментов.

Вот есть медиа-запросы, сейчас ещё появились контейнерные запросы. Также в CSS давно есть пользовательские свойства. Интуитивно хочется вынести значения медиа-запросов в пользовательские свойства и использовать удобные алиасы вместо значений.

:root {
  --media-desktop: (width >= 750px);
  --media-mobile: (width < 750px);
  --media-reduced-motion: (prefers-reduced-motion: reduce);
}

/* Код ниже не сработает */
@media var(--media-desktop) {
  /* Стили для десктопов */
}

@media var(--media-mobile) {
  /* Стили для мобильных */
}

@media var(--media-reduced-motion) {
  /* Стили для режима уменьшенного движения */
}

К сожалению, это не работает. В препроцессорах значение медиа-запроса можно поместить в переменную или сделать отдельный миксин для удобного использования. В спецификации Media Queries Level 5 подумали об этом и предложили директиву @custom-media.

С помощью этой директивы можно реализовать логику как в примере выше. Директива объявляет переменную, которая будет доступна в качестве значения медиа-запроса. Как это принято, имя переменной пишется в синтаксисе dashed-ident, с двумя дефисами вначале.

@custom-media --desktop (width >= 750px);
@custom-media --mobile (width < 750px);
@custom-media --reduced-motion: (prefers-reduced-motion: reduce);

@media (--desktop) {
  /* Стили для десктопов */
}

@media (--mobile) {
  /* Стили для мобильных */
}

@media (--reduced-motion) {
  /* Стили для режима уменьшенного движения */
}

В @custom-media можно объявлять одиночные значения, перечислять несколько значений через запятую, использовать операторы and, or и not. Также доступен синтаксис диапазонов и такие запросы, как prefers-*, script, hover и другие.

Проблема в том, что ни один браузер не поддерживает этот синтаксис. Использовать его можно только с постпроцессорами. Для PostCSS есть плагин, а Lightning CSS транспилирует из коробки, если включить параметр drafts.customMedia: true.

На днях вышел Firefox 146. В конце релиз-ноутов есть раздел Experimental web features, где я увидел следующее:

Custom media queries: layout.css.custom-media.enabled

The @custom-media CSS at-rule defines aliases for long or complex media queries. Instead of repeating the same hardcoded <media-query-list> in multiple @media at-rules, it can be defined once in a @custom-media at-rule and referenced throughout the stylesheet whenever needed. (Firefox bug 1744292).

Это хорошая новость, потому что я жду эту фичу и наконец-то она сдвинулась с места. Конечно, есть шанс, что её удалят после экспериментов. Но хочется верить, что внедрение наоборот подтолкнёт остальные браузеры и фича попадёт в Interop 2026.

Под релиз этой экспериментальной функции на MDN написали статью с подробным описанием синтаксиса @custom-media и примерами кода. Рекомендую ознакомиться для лучшего понимания всех возможностей.

#css