Суть изменения
Раньше разработчики либо писали новую фичу «как есть» (и она ломалась в старых браузерах),
либо угадывали браузер по user-agent. Сегодня правильный путь — @supports:
браузер сам сообщает, понимает ли он свойство, а мы держим рабочую базу на случай «нет».
❌ Старый подход: фича без проверки
Сразу display: grid без фолбэка. В браузере без grid сетка не сработает, карточки слипнутся.
📄 lesson-47/problem.css
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* fallback отсутствует, browser matrix неизвестна */✅ Современный подход: база + @supports
Сначала простая рабочая база, затем grid поверх неё — только при поддержке.
📄 lesson-47/fixed.css
.cards { display: block; } /* работает везде */
@supports (display: grid) { /* улучшение при поддержке */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}Что увидит пользователь
❌ Старый браузер на «фиче без фолбэка» — слиплось
A
B
C
✅ Тот же браузер с фолбэком — читаемо
A
B
C
/* фолбэк даёт хотя бы отступы между карточками */
.card + .card { margin-top: .5rem; }