Именованные медиазапросы @custom-media

Точки перелома — ширины, на которых меняется вёрстка, — повторяются по всему проекту. Именованный медиазапрос @custom-media позволяет записать условие один раз и дальше обращаться к нему по имени. Это черновик стандарта CSS, браузеры его пока не понимают, поэтому postcss-preset-env заменяет имена на сами условия.

Объявление и использование

Плагин уже подключён в postcss.config.js. Объявите имя в начале styles/main.css и используйте его в @media в скобках:

/* styles/main.css */
@custom-media --tablet (width >= 768px);
 
.post-list {
  display: grid;
  gap: 16px;
}
 
@media (--tablet) {
  .post-list {
    grid-template-columns: 1fr 1fr;
  }
}

Имя, как у переменных CSS, начинается с двух дефисов. После npx postcss styles/main.css -o css/main.css:

.post-list {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}
 
@media (min-width: 768px) {
  .post-list {
    grid-template-columns: 1fr 1fr;
  }
}

Объявление исчезло, а (--tablet) заменено условием. Заодно плагин перевёл запись диапазона width >= 768px в привычную min-width: 768px и добавил grid-gap — старое имя свойства gap для сеток.

<style>
  .post-list {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
  }
 
  @media (min-width: 768px) {
    .post-list {
      grid-template-columns: 1fr 1fr;
    }
  }
 
  .post-list article {
    padding: 16px;
    background: #f1f5f9;
  }
</style>
 
<div class="post-list">
  <article>Знакомство с PostCSS</article>
  <article>Настройка Autoprefixer</article>
  <article>Сжатие CSS</article>
</div>

В узком окне посты идут в одну колонку, а начиная с 768 пикселей — в две.

Несколько имён

Объявите все точки перелома вместе и комбинируйте имена через and:

/* styles/main.css */
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --wide (width >= 1024px);
 
@media (--dark) and (--wide) {
  .post-list {
    gap: 32px;
  }
}

@media (prefers-color-scheme: dark) and (min-width: 1024px) {
  .post-list {
    gap: 32px;
  }
}

Теперь, чтобы сдвинуть точку перелома, достаточно поменять одну строку с объявлением.

Чем это лучше переменной

Переменные CSS вида var(--tablet) внутри @media не работают: медиазапросы вычисляются раньше, чем значения переменных. Поэтому для условий нужен отдельный механизм, и @custom-media — его будущая стандартная запись.

Частая ошибка

Объявить имена в одном файле, а использовать в другом, который обрабатывается отдельно. Плагин видит только текущий файл: не найдя объявления, он молча оставит @media (--tablet) как есть, и браузер проигнорирует весь блок. Подключайте файл с объявлениями через @import и postcss-import (следующая глава) — тогда все файлы склеятся до обработки.