Запрос поддержки функции

Новые возможности CSS появляются в браузерах не одновременно. Запрос поддержки позволяет написать стили для тех, кто уже умеет, не ломая страницу остальным. Сначала задаётся рабочий базовый вариант, а внутри @supports — улучшение. Это прямое воплощение подхода «прогрессивное улучшение».

Синтаксис условий

.gallery { display: flex; flex-wrap: wrap; }   /* база для всех */

@supports (display: grid) {
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@supports not (aspect-ratio: 1) {
  .thumb { height: 200px; }
}
@supports selector(:has(img)) {
  .card:has(img) { padding-top: 0; }
}

В скобках пишут полную декларацию — свойство и значение. Условия комбинируют словами and, or и not; при смешении разных операторов нужны дополнительные скобки. Функция selector() проверяет поддержку селектора.

То же из JavaScript

Метод CSS.supports() отвечает на тот же вопрос из скрипта: CSS.supports('display', 'grid') или CSS.supports('(display: grid) and (gap: 1rem)'). Это удобно, когда от поддержки зависит не только оформление, но и логика — например, нужно ли подгружать полифил.

Подводные камни

• «Поддерживается» значит лишь то, что браузер распознал декларацию. Ошибки реализации и частичную поддержку запрос не ловит.
• Браузеры, которые не знают самого @supports, пропускают весь блок. Поэтому базовые стили пишут снаружи, а не в ветке not.
• Проверять нужно ту возможность, которая реально используется: проверка display: grid ничего не говорит о поддержке subgrid.
• Ширина экрана и предпочтения пользователя — задача не для @supports, а для медиазапроса.