Урок 47. Ошибки: Кроссбраузерность: @supports, фолбэки

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~80 мин 🎯 Сложность: Продвинутая
#supports #not

⚡ Кратко

Главные грабли: новая фича без фолбэка, sniffing браузера по user-agent, неверный синтаксис @supports и проверка только в одном браузере.

Частые ошибки

1. Новая фича без фолбэка

Самая частая. Пишут display: grid сразу, без базового стиля. В браузере без grid карточки слипаются.

❌ Как ломается (нет фолбэка)

A
B
/* ❌ нет базы */
.cards { display: grid; }

/* ✅ база + улучшение */
.cards { display: block; }
.card + .card { margin-top: 1rem; }
@supports (display: grid) {
  .cards { display: grid; gap: 1rem; }
}

2. Определение браузера по user-agent (sniffing)

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

3. Неверный синтаксис @supports

Внутри условия нужна полная пара «свойство: значение» в скобках. Без неё блок просто игнорируется.

/* ❌ не сработает */
@supports (grid) { ... }
@supports display: grid { ... }

/* ✅ правильно */
@supports (display: grid) { ... }

4. Проверка только в одном браузере

Минимум нужен browser matrix и тест на разных движках (Chromium, Firefox, WebKit/Safari) и ширинах.

5. Ручная расстановка префиксов «на всякий случай»

Устаревшие префиксы вроде -moz-border-radius сегодня лишний мусор. Префиксы должен ставить Autoprefixer по данным caniuse, а не разработчик вручную.

Навигация