@supports
The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.
In JavaScript, @supports can be accessed via the CSS object model interface CSSSupportsRule.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 28 | 12 | 22 | 9 | 28 | 9 | |
| DOM API | ||||||
| The read-only supportsText property of the CSSImportRule interface returns the supports condition specified by the @import at-rule. | 121 | 121 | 114 | 17.5 | 121 | 17.5 |
| The CSSSupportsRule interface represents a single CSS @supports at-rule. | 28 | 12 | 22 | 9 | 28 | 9 |
| CSS at-rule | ||||||
supports `supports()` as import condition | 122 | 122 | 115 | 17.5 | 122 | 17.5 |
font-format `font-format()` | 108 | 108 | 106 | 17 | 108 | 17 |
font-tech `font-tech()` | 108 | 108 | 106 | 17 | 108 | 17 |
selector `selector()` | 83 | 83 | 69 | 14.1 | 83 | 14.5 |
Syntax
/* Check if Grid is supported */
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
}
/* Check selector support */
@supports selector(:has(*)) {
.card:has(img) {
grid-row: span 2;
}
}
/* NOT condition */
@supports not (backdrop-filter: blur(10px)) {
.modal-backdrop {
background: rgba(0, 0, 0, 0.8);
}
}Live demo
Use cases
-
Using @supports
The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.