Проверяй возможности браузера прямо в 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 | #совет