Definition
CSS conditional blocks that apply rules only when the browser supports a given property-value pair—enabling progressive enhancement without JavaScript feature detection.
Why It Matters
Feature queries allow developers to use cutting-edge web technologies without abandoning users on older browsers. They facilitate a “future-proof” design strategy that embraces progressive enhancement as a first-class citizen.
Core Concepts
- Syntax:
@supports (display: grid) { ... }. - Negation:
@supports not (display: grid) { fallback }. - Combination:
and,orfor multiple conditions. - Complement: Modernizr adds support classes to
<html>for older workflows.
@supports (display: grid) {
.container {
display: grid;
}
}
@supports not (display: grid) {
.container {
display: flex; /* Fallback for browsers without Grid */
}
}