Справочник урока
| Инструмент | Зачем нужен | Мини-пример |
|---|---|---|
@supports | Проверка поддержки CSS-фичи (feature query) | @supports (display: grid) { ... } |
@supports not | Стиль для браузеров БЕЗ фичи | @supports not (gap: 1rem) { ... } |
@supports and / or | Комбинация нескольких условий | @supports (display: grid) and (gap: 1rem) |
| fallback | Базовая версия без новой фичи | .cards { display: block; } |
| progressive enhancement | Улучшение поверх рабочей основы | block → flex → grid |
| vendor prefixes | Префиксы движков браузеров | -webkit-line-clamp: 2; |
| Autoprefixer | Автоматически расставляет префиксы | часть сборки (PostCSS) |
| caniuse.com | Данные о поддержке возможностей | https://caniuse.com/css-grid |
Поддержка
@supports: сама по себе feature query поддерживается всеми
актуальными браузерами. Если стиль обязателен для совсем старых браузеров без поддержки @supports —
держите его как базу вне блока feature query.