Что делает @supports

@supports в CSS — это директива «feature queries», которая позволяет применять стили только если браузер поддерживает указанное свойство или значение. Она используется для прогрессивного улучшения: современные фичи включаются там, где они доступны, а в остальных случаях работают базовые стили. По смыслу @supports похож на @media, но проверяет не размеры экрана, а поддержку конкретных CSS-возможностей.

@supports — это at-правило CSS для «feature queries», с помощью которого можно условно применять стили в зависимости от того, поддерживает ли браузер указанные CSS-свойства или значения. В круглых скобках пишется условие проверки (например, (display: grid)), а в фигурных — блок стилей, которые нужно применить, если условие истинно. Если браузер не знает такое свойство/значение, он просто игнорирует блок @supports, и остаются работать обычные, более простые стили.

Чаще всего @supports используют для прогрессивного улучшения: сначала задают простой, кросс-браузерный вариант верстки, а затем внутри @supports подключают более продвинутые фичи вроде display: grid, новых значений position, фильтров и т.п.

Пример: сначала пишем базовую раскладку на flex, а если поддерживается grid, улучшаем интерфейс.

В этом примере старые браузеры увидят только flex-раскладку, а современные — «поверх» неё применят сетку на grid, не ломая страницу ни в одном варианте. Такой подход позволяет безопасно использовать новые возможности без сложных полифилов.

@supports понимает логические операторы not, and, or и скобки для группировки, поэтому можно описывать довольно сложные условия. Например, применять одни стили, только если поддерживается сразу несколько свойств, и другие — если ключевая технология вообще недоступна.

По смыслу @supports очень похож на @media: в обоих случаях мы пишем условие и блок стилей, которые работают только при выполнении этого условия. Разница в том, что @media смотрит на характеристики устройства и окна (width, orientation, плотность пикселей и т.д.), а @supports — на поддержку конкретных CSS-возможностей.

Типичные случаи, когда @supports особенно полезен:

• Прогрессивное улучшение интерфейса: сначала простой и надежный CSS, затем поверх — современные фичи в @supports.
• Мягкая деградация: если нужные свойства не поддерживаются, страница остается работоспособной за счет базовых стилей.
• Точное управление фолбэками: с помощью @supports not (...) можно явно задать стили «на случай, если браузер чего-то не умеет».

Грамотное использование @supports позволяет уверенно внедрять новые CSS-возможности и при этом не ломать верстку в старых браузерах.