CSS @supports Rule
Example
If the browser supports display: grid, the CSS inside the @supports rule will be applied. If not, the .container class outside the @supports rule will be applied:
/* use this CSS if the browser does not support display: grid */
.container
{
display: table;
width: 90%;
background-color:
#2196F3;
padding: 10px;
}
/* use this CSS if the browser
supports display: grid */
@supports (display: grid) {
.container
{
display: grid;
grid: auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
Try it Yourself »
Definition and Usage
The @supports rule allows to test whether
a browser supports a CSS feature, and to define fallback styles if the feature
is not
supported.
Browser Support
The numbers in the table specify the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @supports | 28 | 12 | 22 | 9 | 12.1 |
| font-format() | 108 | 108 | 106 | 17 | 94 |
| font-tech() | 108 | 108 | 106 | 17 | 94 |
| selector() | 83 | 83 | 69 | 14.1 | 69 |
CSS Syntax
@supports (supports-condition) {
if condition is true use this CSS
}
Property Values
| Value | Description |
|---|---|
| supports-condition | Defines the condition in a name-value pair (property: value) or a function() syntax. The conditions can be combined by and, or, or not. |
| selector() | Is a function() syntax. Checks if a browser supports the specified selector syntax. E.g. @supports selector(h2 > p) returns true and applies the CSS style if the browser supports the child combinator |
| font-tech() | Is a function() syntax. Checks if a browser supports the specified font technology. E.g. @supports font-tech(color-svg) returns true and applies the CSS style if the browser supports SVG multi-colored tables |
| font-format() | Is a function() syntax. Checks if a browser supports the specified font format. E.g. @supports font-format (woff) returns true and applies the CSS style if the browser supports WOFF 1.0 |
