Правило CSS `@custom-media`

Правило CSS @custom-media определяет псевдонимы для длинных или сложных медиазапросов. Вместо того чтобы повторять одно и то же жестко заданное <media-query-list> в нескольких правилах @media, его можно один раз определить в правиле @custom-media и использовать по всему файлу стилей по мере необходимости.

Синтаксис

@custom-media <extension-name> [<media-query-list> | true | false ];

@custom-media --media-query-name (width < 1200px);
@custom-media --media-query-name (width < 1200px), (orientation: portrait);

Значения

<extension-name>

<dashed-ident>; имя, идентифицирующее пользовательский медиазапрос.

Представляемое значение

Значение, псевдонимом которого является пользовательский медиазапрос. Возможные значения:

<media-query-list>

Разделённый запятыми список значений <media-query>.

true

Значение @custom-media всегда вычисляется как true.

false

Значение @custom-media всегда вычисляется как false.

Описание

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

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

Пользовательские медиазапросы можно составлять из других запросов, указывая их псевдонимы внутри медиавыражений. Это позволяет создавать более выразительные многоуровневые условия. Однако пользовательский медиазапрос не может ссылаться на себя или входить в циклическую цепочку ссылок. Любая циклическая зависимость — прямая или косвенная — делает недействительными все пользовательские медиазапросы, участвующие в цикле.

Если несколько правил @custom-media задают одно и то же имя <dashed-ident>, используется правило, находящееся в области видимости в момент вычисления правила @media. Более ранние ссылки не обновляются задним числом при объявлении последующего правила @custom-media.

Вычисление медиазапросов с помощью логических операторов

Пользовательские медиазапросы поддерживают весь набор логических операторов CSS — not, and и or (разделённые запятыми или с использованием ключевого слова or).

Поскольку значение @custom-media — это обычный <media-query-list>, условия можно объединять, инвертировать или группировать точно так же, как в обычном правиле @media.

Использование оператора not

Оператор not инвертирует целое медиаусловие. Это полезно, когда нужно, чтобы правило применялось только в том случае, если определённое условие false.

@custom-media --no-script not (scripting);

@media (--no-script) {
}

Использование оператора and

Оператор and позволяет объединить несколько условий, которые должны быть true.

@custom-media --medium-screen (min-width: 40em) and (max-width: 60em);

@media (--medium-screen) {
}

Этот псевдоним совпадает только тогда, когда ширина области просмотра находится в указанном диапазоне.

Использование оператора or

Логический оператор or (или его вариант с запятой при объединении типов медиа) создаёт медиазапрос, который совпадает, если выполняется любое из перечисленных условий — true.

@custom-media --screen-or-print screen, print;
@custom-media --narrow-or-tall (width < 600px) or (height > 800px);

@media (--screen-or-print) {
}

@media (--narrow-or-tall) {
}

Псевдоним --screen-or-print использует запятую, чтобы соответствовать типу медиа screen или print. Псевдоним --narrow-or-tall использует ключевое слово or для объединения двух медиавыражений и соответствует запросу, если область просмотра уже 600px, выше 800px или удовлетворяет обоим условиям.

Формальный синтаксис

Примеры

Обновление нескольких медиазапросов

В этом примере правило @custom-media используется на адаптивном веб-сайте, где определённая контрольная точка применяется в нескольких местах:

@custom-media --narrow-window (width < 32em);

@media (--narrow-window) {
}

@media (--narrow-window) and (hover) {
}

@media (--narrow-window) and (orientation: portrait) {
}

Если контрольную точку потребуется изменить, достаточно обновить её в одном месте, чтобы скорректировать все зависимые медиазапросы на всём сайте.

Группировка нескольких контрольных точек адаптивного дизайна

Здесь правило @custom-media используется для задания нескольких контрольных точек в одном месте, что упрощает поддержку и управление адаптивным дизайном в нескольких файлах стилей:

/* general.css */

@custom-media --mobile-screen (width < 480px);
@custom-media --tablet-screen (width < 768px);
@custom-media --laptop-screen (width < 1024px);
@custom-media --desktop-screen (width < 1440px);
@custom-media --widescreen (width > 1441px);

/* layout.css */

.container {
  padding: 1rem;
}

@media (--mobile-screen) {
  .container {
    padding: 0.5rem;
  }
}

@media (--laptop-screen) {
  .container {
    max-width: 1200px;
  }
}

@media (--widescreen) {
  .container {
    max-width: 1400px;
    padding: 2rem;
  }
}

/* typography.css */

@media (--tablet-screen) {
  .container {
    font-size: 0.9rem;
  }
}

@media (--laptop-screen) {
  .container {
    font-size: 1rem;
  }
}

@media (--widescreen) {
  .container {
    font-size: 1.1rem;
  }
}

Группировка всех контрольных точек в одном месте упрощает поддержку адаптивного дизайна. Чтобы изменить контрольную точку, достаточно обновить соответствующее определение @custom-media один раз, обеспечив согласованность во всех файлах стилей.

Использование ключевых слов true и false

В следующем примере показано, как ключевые слова true и false можно использовать с @custom-media для создания медиазапросов, которые всегда или никогда не совпадают соответственно.

@custom-media --enabled true;
@custom-media --disabled false;

@media (--enabled) {
  /* These styles always apply */
  body {
    background-color: blue;
  }
}

@media (--disabled) {
  /* These styles never apply */
  body {
    background-color: red;
  }
}

Это может быть полезно для переключателей функций или условной логики в файлах стилей.

Переопределение существующих правил @custom-media

В этом примере одно правило @custom-media переопределяется другим правилом @custom-media с тем же именем <dashed-ident>.

@custom-media --mobile-breakpoint (width < 320px);

@media (--mobile-breakpoint) {
  .container {
    grid-template-columns: 2fr 1fr;
  }
}

@custom-media --mobile-breakpoint (width < 480px);

Если несколько правил @custom-media используют одно и то же имя, применяется правило, находящееся в области видимости в момент вычисления правила @media. Более ранние ссылки не обновляются задним числом при объявлении последующего правила @custom-media.

Например, в приведённом выше коде ссылка --mobile-breakpoint внутри правила @media вычисляется как (width < 320px), поэтому правило .container применяется только при ширине области просмотра менее 320px, несмотря на то что позднее в файле стилей --mobile-breakpoint переопределяется как (width < 480px).

Спецификации

Совместимость с браузерами

См. также

• Правило CSS @media
• Правило CSS @import
• Адаптивный дизайн
• Модуль медиазапросов CSS