Проверка возможностей: @supports и CSS.supports

Назначение

Проверка возможностей позволяет включать улучшение только тогда, когда среда распознаёт нужную возможность.

Как это работает

@supports условно применяет CSS, а CSS.supports возвращает логический результат в JavaScript. Это проверка поддержки синтаксиса или возможности по правилам API, а не гарантия отсутствия всех ошибок реализации.

Пример

.cards { display: block; }
.cards > article { margin-bottom: 1rem; }
@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

Что должно получиться

Без улучшения карточки идут последовательно, с поддержкой Grid — в двух колонках. Проверка способности браузера отделена от общей доступности содержания.

Граница применения и частая ошибка

Не подменяйте проверку пользовательского сценария одним true. Даже поддерживаемый синтаксис может вести себя иначе в сложной раскладке или иметь ограничения на целевых устройствах.

Самостоятельная проверка

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

Связанные материалы

• Структура проекта
• Отладка CSS
• Консоль браузера