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

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

⚡ Кратко

Сделай grid-сетку карточек с рабочим фолбэком через @supports, добавь свойство с вендорным префиксом и проверь поддержку на caniuse.

Задания

  1. База + улучшение. Сверстай блок из 3 карточек. Базовый стиль — display: block с вертикальными отступами. Внутри @supports (display: grid) переведи контейнер в grid c gap.
  2. Фолбэк через not. Добавь @supports not (gap: 1rem) и задай запасной margin между карточками — на случай браузера без поддержки gap.
  3. Вендорный префикс. Обрежь заголовок карточки до 2 строк через -webkit-line-clamp.
  4. Проверка. Найди фичу из задания на caniuse.com и составь короткий чеклист кроссбраузерности перед сдачей проекта (browser matrix, фолбэк есть, валидатор чист).

Ожидаемый результат

В современном браузере — сетка карточек в ряд с равными промежутками. В браузере без grid — те же карточки колонкой с отступами (всё читаемо, ничего не слиплось).

современный → grid старый → колонка
Один и тот же HTML, две корректные раскладки в зависимости от поддержки.

Навигация