@supports
The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
Overview
The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
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 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* 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 at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features