Современные веб-технологии развиваются быстро: каждая новая версия CSS приносит свежие возможности — гриды, переменные, фильтры, aspect-ratio и многое другое.
Но в реальности существует проблема - не все пользователи обновляют браузеры и не все браузеры быстро реализуют поддержку новых стандартов. В результате дизайнер видит одно, а пользователь — совсем другое.
Чтобы не ломать макеты и не писать бесконечные хаки, разработчикам нужна возможность проверять поддержку конкретных CSS-функций. И именно для этого в язык добавили директиву @supports. Она позволяет условно применять стили, если браузер действительно понимает нужное свойство.
Это не универсальное решение всех проблем кроссбраузерности, но частично снимает боль несовместимости, давая гибкий способ внедрять новые технологии безопасно.
Что такое @supports
@supports — это директива CSS уровня 3, также известная как Feature Queries. Она появилась как часть стандарта CSS Conditional Rules Module Level 3.
Идея проста: браузер проверяет, понимает ли он определённое свойство со значением, и если да — применяет стили внутри блока.
Директива применяется для постепенного внедрения новых CSS-фич, безопасного использования экспериментальных свойств и создания резервных (fallback) стилей для старых браузеров.
Как можно использовать
Давайте посмотрим, как @supports помогает в реальной верстке: где она спасает дизайн, где упрощает код и как с её помощью можно элегантно сочетать старые и новые технологии.
Базовая проверка свойства
Самый простой пример использования @supports. Браузер читает правило и проверяет, умеет ли он работать со значением grid для свойства display.
Если поддержка есть — применяются стили внутри блока: элемент .container превращается в CSS Grid-контейнер. Если поддержки нет — браузер просто пропускает этот участок кода и продолжает использовать уже объявленные базовые стили - в данном примере display: flex.
Такой подход делает верстку гибкой и устойчивой: современные браузеры получат продвинутую сетку, а старые — аккуратный fallback без поломки структуры страницы.
Проверка отсутствия поддержки
Иногда наоборот нужно применить стили, если функция не поддерживается:
Такой блок поможет задать резервное оформление для старых браузеров.
Комбинирование условий
Иногда нужно убедиться, что браузер поддерживает несколько CSS-возможностей одновременно. Например, если макет строится на grid и использует соотношение сторон через aspect-ratio:
В этом примере браузер проверяет сразу два условия: умеет ли он работать с display: grid и понимает ли свойство aspect-ratio. Если обе возможности есть, стили внутри блока применяются. Если хотя бы одно из условий не выполняется, весь блок игнорируется.
Такой подход полезен, когда вёрстка опирается на несколько новых технологий одновременно, и важно, чтобы они работали в связке. Например, карточка с квадратным соотношением сторон и сеточной структурой должна оставаться корректной только в тех браузерах, где обе функции действительно поддерживаются.
Проверка альтернативных вариантов
Некоторые CSS-свойства имеют разные синтаксисы или префиксы под движки браузеров — например, WebKit в Safari. Чтобы не дублировать стили, можно объединить проверки через or:
Здесь браузер проверяет поддержку сразу двух вариантов — стандартного и префиксного. Если хотя бы один из них доступен, стили внутри блока применяются, и элемент получает эффект размытого фона.
Это особенно удобно для визуальных эффектов, которые реализованы по-разному в разных браузерах. Например, полупрозрачная панель с размытием за ней будет выглядеть одинаково и в Chrome, и в Safari, если включить нужный вариант свойства.
Таким образом, логические операторы and и or делают @supports гибким инструментом: он позволяет проверять сложные комбинации возможностей и создавать устойчивые стили, которые корректно ведут себя в любой среде.
Комбинация с @media
Можно вкладывать @supports в медиа-запросы:
Таким образом стили применятся только на нужной ширине и если браузер поддерживает grid.
Проверка поддержки CSS через JavaScript
Иногда достаточно проверить свойства в CSS с помощью @supports, но в некоторых случаях нужно динамически принимать решения в коде: например, подгружать определённые скрипты, изменять поведение интерфейса или добавлять классы для современных фич. Для этого существует метод CSS.supports() в JavaScript.
Таким образом, можно динамически менять поведение страницы в зависимости от возможностей браузера.
Поддержка браузерами
Директива @supports поддерживается во всех современных браузерах. Она работает в Chrome начиная с версии 28, в Firefox — с версии 22, в Safari — с версии 9, а также во всех версиях Edge на Chromium и в Opera. На мобильных устройствах поддержка есть в iOS Safari и большинстве Android-браузеров. Исключением остаётся Internet Explorer, где @supports не поддерживается. Это означает, что использовать её можно безопасно для всех актуальных браузеров.
Заключение
@supports — простой, но мощный инструмент, который помогает решать проблему кроссбраузерной совместимости. Он не заменяет тестирование и не исправляет ошибки движков, но позволяет безопасно внедрять новые CSS-возможности, избегать хаоса из хаков и условных комментариев, а также создавать чистые fallback-решения для старых браузеров. Используйте @supports как страховку: современные фичи можно добавлять без страха, что верстка «поедет» у пользователей со старыми браузерами.