Что такое @custom-media и зачем он нужен?
Назад
2 минуты чтения

Что такое @custom-media и зачем он нужен?

Правило @custom-media из CSS Media Queries Level 5 позволяет задавать именованные алиасы для сложных медиавыражений прямо в CSS.

Что такое @custom-media и зачем он нужен?

В современном CSS медиавыражения могут быть длинными и визуально сбивать с толку — особенно когда вы комбинируете проверки вроде (min-width: 1024px) and (hover: hover) and (pointer: fine).

Спецификация CSS Media Queries Level 5 вводит правило @custom-media. Оно позволяет объявлять глобальные именованные алиасы для сложных условий прямо в CSS — по аналогии с CSS-переменными (var()).

/* Объявляем именованное медиавыражение */
@custom-media --desktop (min-width: 1024px);
@custom-media --hoverable (hover: hover) and (pointer: fine);

/* Использование в коде */
@media (--desktop) and (--hoverable) {
  .card:hover {
    transform: translateY(-4px);
  }
}

Главные плюсы:

  1. DRY в CSS: Брейкпоинты и проверки не дублируются сотни раз по всем файлам.
  2. Единый источник истины: Если меняется значение брейкпоинта, вы меняете его в одном месте.
  3. Семантика: Вместо магических цифр 768px код читается как понятные условия: --desktop, --touch, --retina.

Ещё примеры:

/* Брейкпоинты */
@custom-media --from-360 (min-width: 360px);
@custom-media --from-760 (min-width: 760px);
@custom-media --from-1260 (min-width: 1260px);

/* Широкий цветовой охват */
@custom-media --true-hdr (color-gamut: p3) and (dynamic-range: high);

@media (--true-hdr) {
  .hero-banner {
    background-color: color(display-p3 1 0 0); /* Сочный ультра-красный */
  }
}

/* Темы и A11y */
@custom-media --dark-mode (prefers-color-scheme: dark);
@custom-media --reduce-motion (prefers-reduced-motion: reduce);

@media (--reduce-motion) {
  * {
    animation-duration: 0.001ms !important;
  }
}

🚦 Что по поддержке браузеров?

На данный момент @custom-media нативно реализован только в Firefox за экспериментальным флагом (layout.css.custom-media.enabled). Chromium и WebKit пока держат фичу в статусе обсуждения/разработки.

Как использовать в продакшене уже сегодня:

  1. PostCSS / LightningCSS: Плагины (например, postcss-custom-media) компилируют алиасы в обычные @media (...) на этапе сборки.
  2. Container Style Queries: Переход на @container style(), если хочется похожей логики в нативном CSS без сборщиков.
/* Definition */
:root {
  @media (hover: hover) and (pointer: fine) {
    --mouse: any-valid-ident;
  }

  @media (hover: none) and (pointer: coarse) {
    --touch: true;
  }
}

/* Usage */
@container style(--mouse) {
  /* ... */
}
@container style(--touch) {
  /* ... */
}

Читать оригинал

Подписывайтесь на мой Telegram-канал

Скопировано