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

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

⚡ Кратко

Кроссбраузерность — это прогрессивное улучшение: сначала пишем простую рабочую базу (которая откроется в любом браузере), затем добавляем улучшения сверху.

  • @supports (display: grid) { ... } — применить стиль, только если браузер поддерживает фичу.
  • @supports not (...) — стиль-фолбэк для браузеров без поддержки.
  • Вендорные префиксы (-webkit-, -moz-) нужны отдельным свойствам; расставлять руками не надо — это делает Autoprefixer.
  • caniuse.com — главный источник данных «кто что поддерживает».

Главная идея

Fallback (фолбэк) — базовая версия вёрстки, которая работает даже без новой CSS-возможности. Новые возможности добавляются сверху, и только если браузер их понимает. Такой подход называется прогрессивным улучшением (progressive enhancement): начинаем с простого работающего фундамента и наращиваем «вкусности» для тех, кто их потянет. Старый браузер увидит чуть проще — но рабочую страницу, а не сломанную.

Представь, что собираешься чинить кран. @supports — это проверка ящика с инструментами, прежде чем браться за работу: «есть ли у меня разводной ключ?». Если есть — берёшь его и делаешь красиво и быстро. Если нет — обходишься плоскогубцами (запасной вариант), но кран всё равно починишь. А fallback — это запасной выход в здании: основной лифт может не работать, но лестница есть всегда, и человек выйдет наружу в любом случае.

Как работает @supports (feature query)

Feature query — это условие «если браузер умеет применять вот это свойство со вот таким значением». Внутри блока пишем «улучшенные» стили. Браузер сам проверяет себя — не нужно угадывать его по названию или версии (это называется «sniffing» и считается плохой практикой, потому что строк user-agent тысячи и они врут).

Прогрессивное улучшение База (fallback) display: block работает ВЕЗДЕ → @supports Улучшение display: grid
База работает у всех; @supports включает grid-сетку только там, где её понимают.

Правила

  • Сначала пишите простой рабочий layout, затем улучшайте через @supports.
  • Не удаляйте fallback, если feature query закрывает только часть аудитории.
  • Фиксируйте browser matrix (список поддерживаемых браузеров) в документации проекта.
  • Решение «нужен ли фолбэк» принимайте по данным caniuse.com, а не на глаз.

Вендорные префиксы

Когда-то новые свойства выходили с префиксом движка: -webkit- (Chrome, Safari), -moz- (Firefox). Сегодня большинство свойств работают без префикса, но отдельные — вроде -webkit-line-clamp — всё ещё его требуют. Расставлять префиксы руками не нужно: это автоматически делает инструмент Autoprefixer на основе данных caniuse.

Базовый CSS

Ниже — каноничный шаблон: рабочая база, поверх неё @supports с grid-сеткой, и одно свойство с вендорным префиксом.

📄 lesson-47/styles.css
/* 1. База — работает в любом браузере */
.cards {
  display: block;
}

.card + .card {
  margin-top: 1rem;
}

/* 2. Улучшение — включится только при поддержке grid */
@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
  }

  .card + .card {
    margin-top: 0; /* в grid отступы делает gap */
  }
}

/* 3. Свойство с вендорным префиксом (обрезка текста до 2 строк) */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Когда применять

Используйте @supports, когда хотите взять свежую возможность (grid, gap во flex, aspect-ratio, :has()), но в вашей browser matrix есть браузеры, которые её не тянут. Если фича поддерживается уже всеми целевыми браузерами — feature query лишний, просто пишите свойство напрямую.

Частая ошибка: писать улучшение без базы — например, сразу display: grid без блочного фолбэка. В браузере без grid сетка не сработает, и карточки слипнутся в одну колонну без отступов. Сначала база, потом @supports поверх неё.

Навигация