@supports checks whether a browser recognizes a CSS declaration. Use it to layer an enhancement over a layout that remains usable without the newer feature.
.card {
display: block;
}
@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
}Feature detection, not browser names
- Test the exact property and value the enhancement needs.
- Keep the fallback meaningful rather than hiding important content.
- Use and / or / not to combine checks when a feature depends on more than one declaration.
Remember that syntax support is not the whole story
A successful supports check tells you the browser parses a declaration; it does not prove every detail works perfectly or that the feature is suitable for the page. Test the actual interaction and keep a sensible fallback.
Use feature queries for enhancements, not as a substitute for checking browser support or for testing a real layout.
