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

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

⚡ Кратко

Сделай карточную сетку с фолбэком: база block/flex, улучшение через @supports (display: grid), один вендорный префикс и ссылка на caniuse в комментарии.

Домашнее задание

Задача: Добавьте фолбэк для карточной сетки: базовый block/flex-вариант, улучшение через @supports (display: grid), одно свойство с вендорным префиксом и ссылку на caniuse.com в комментарии ревью.
1

Напишите базу

Сверстайте контейнер карточек на display: block (или flex) с вертикальными отступами — это рабочий фолбэк для любого браузера.

2

Добавьте улучшение

Внутри @supports (display: grid) переведите контейнер в grid с gap, обнулив фолбэк-margin. Добавьте одно свойство с префиксом (например, -webkit-line-clamp).

3

Проверьте поддержку

Найдите использованные фичи на caniuse.com, добавьте ссылку в комментарий и проверьте раскладку в DevTools, временно «сломав» условие @supports опечаткой.

Навигация