Code Ready | Frontend
Фотография
нажмите — покажем
нажмите — покажем
Проверяй возможности браузера прямо в CSS!
Многие делают такие проверки через JavaScript:
if ("container" in document.documentElement.style) {
// включаем новую логику
}
Но CSS уже давно умеет сам проверять поддержку возможностей.
@supports (display: grid) {
.layout {
display: grid;
}
}
Это особенно полезно при постепенном внедрении новых CSS API.
Например, можно безопасно добавить современные возможности:
@supports (interpolate-size: allow-keywords) {
.accordion {
interpolate-size: allow-keywords;
}
}
Старые браузеры просто проигнорируют этот блок.
Для больших проектов это позволяет мигрировать постепенно.
@supports not (selector(:has(*))) {
/* fallback */
}
🔥 @supports позволяет внедрять новые CSS-возможности без JS-проверок и не ломать поддержку старых браузеров.
📣 Code Ready | #совет
34 · 1.9K ·