@supports: улучшение оформления при поддержке свойства
Правило @supports применяет набор CSS-деклараций, когда браузер распознаёт указанное сочетание свойства и значения. Оно позволяет строить улучшение поверх рабочей базовой раскладки.
Назначение
Правило @supports применяет набор CSS-деклараций, когда браузер распознаёт указанное сочетание свойства и значения. Оно позволяет строить улучшение поверх рабочей базовой раскладки.
Как это работает
Сначала задайте простое представление, затем внутри условия включите дополнительную возможность. Проверка касается поддержки синтаксиса; она не доказывает отсутствие ошибок реализации и не проверяет доступность интерфейса.
Пример
<style>.support-layout>p{padding:12px;background:#edf4ef}@supports(display:grid){.support-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.support-layout>p{margin:0}}</style>
<div class="support-layout"><p>Описание</p><p>Пример</p></div>Что должно получиться
Без применения условного блока абзацы расположены обычным потоком. При поддержке Grid они становятся двумя колонками. Порядок чтения и текст сохраняются в обоих состояниях.
Граница применения и частая ошибка
Не используйте @supports как определитель марки браузера. Поддержка одного свойства не означает поддержку целого набора связанных возможностей. Для сложной комбинации можно объединять условия через and, or и not.
Самостоятельная проверка
В DevTools временно отключите условный блок и проверьте базовую версию. Затем добавьте длинное слово и узкий контейнер: поддержка Grid сама по себе не решает проблему переполнения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.