Проверка поддержки: @supports

Новые свойства CSS появляются в браузерах не одновременно. Правило @supports задаёт вопрос браузеру: «Ты понимаешь это свойство?» — и применяет стили только при ответе «да». Такая проверка называется запросом возможностей (feature query).

Правило @supports

В скобках пишут пару «свойство: значение». Стили внутри блока сработают, только если браузер её понимает:

<style>
  .box { padding: 12px; background: gainsboro; }
  @supports (display: grid) {
    .box { background: palegreen; }
  }
</style>
 
<div class="box">Зелёный — значит, браузер знает display: grid</div>

Устроено как медиазапрос, только условие — не размер окна, а возможности браузера.

not, and, or

Условия можно переворачивать и сочетать. Свойства fly-mode не существует, поэтому сработает только второй блок:

<style>
  .msg { display: none; padding: 12px; }
  @supports (fly-mode: on) {
    .yes { display: block; background: palegreen; }
  }
  @supports not (fly-mode: on) {
    .no { display: block; background: mistyrose; }
  }
</style>
 
<p class="msg yes">Браузер умеет летать</p>
<p class="msg no">Свойства fly-mode браузер не знает</p>

Запись	Когда срабатывает
`@supports (a: 1)`	браузер понимает `a: 1`
`@supports not (a: 1)`	не понимает
`@supports (a: 1) and (b: 2)`	понимает оба
`@supports (a: 1) or (b: 2)`	понимает хотя бы одно

Проверка селектора: selector()

Функция selector() проверяет не свойство, а селектор. Так узнают, поддерживается ли, например, :has():

<style>
  .note { padding: 12px; background: gainsboro; }
  @supports selector(:has(a)) {
    .note { background: lightskyblue; }
  }
</style>
 
<p class="note">Голубой — браузер понимает :has()</p>

Прогрессивное улучшение

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

<style>
  .panel { padding: 12px; background: steelblue; color: white; }
  @supports (backdrop-filter: blur(4px)) {
    .panel { background: rgb(70 130 180 / 60%); backdrop-filter: blur(4px); }
  }
  .scene { padding: 16px; background: linear-gradient(45deg, gold, tomato); }
</style>
 
<div class="scene">
  <div class="panel">Панель с размытием фона или просто синяя</div>
</div>

Старый браузер покажет сплошную синюю панель, новый — полупрозрачную с размытием. Обе версии выглядят прилично.

Когда @supports не нужен

Браузер пропускает объявления, которых не понимает. Поэтому для одного свойства хватит двух строк подряд: сначала запасное значение, потом новое:

<style>
  .title { color: steelblue; color: oklch(55% 0.15 260); }
</style>
 
<p class="title">Старый браузер возьмёт steelblue, новый — oklch()</p>

@supports нужен, когда вместе с новым свойством меняются и другие, как фон панели в прошлом примере.

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

Условие без скобок или без значения. @supports display: grid и @supports (display) — ошибки, и браузер пропускает весь блок:

<style>
  .a, .b { padding: 8px; margin-bottom: 4px; background: gainsboro; }
  @supports (display) { .a { background: palegreen; } }
  @supports (display: block) { .b { background: palegreen; } }
</style>
 
<p class="a">(display) — без значения, не сработало</p>
<p class="b">(display: block) — сработало</p>

Пишите полную пару «свойство: значение» в круглых скобках.

Спасибо, что читаете!