@supports
Checks for browser support of specific CSS features and applies styles only if those features are available.
It is documented as part of the CSS Conditional Rules specification.
Syntax
/* Usage Example */
@supports (display: grid) {
.container{
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@supports not (display: grid){
.container{
display: block; /* fallback for very old browsers */
}
}
@supports Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
28+
22+
9+
12+