With many new CSS features being introduced regularly it has become important to check for the support of these newer CSS properties before we use them. While there are feature detection tools like Modernizr etc, not every time do we actually require to load a JavaScript file to detect a feature alone. You can do feature detection using CSS @supports rule too. However, please note that the older versions of Browsers do not support @supports rule too. In such a case I would suggest that you write small snippets of code in JavaScript to detect the support for the feature you are looking for.
How to use the @supports CSS rule ?
The @supports CSS rule is one among other CSS at-rules like @media etc. The @supports rule lets you to check the support for a CSS feature before the defined block of CSS properties are applied to the page. In other words its like saying that if “so and so” features are supported, apply these CSS properties to the page. Let’s take a look at an example usage of CSS @supports rule.
@supports (display: flex) {
.main-box { display:flex; padding:5px;}
}When the above code is parsed by the browser, it checks if the display:flex property is supported by the browser, if so it takes into consideration the block of CSS wrapper within the @supports rule. This can make your code simpler and lighter by avoiding the need for JavaScript for such feature detection. Interestingly, the @supports rule has other Operators too which gives you a little more power while doing a feature detection.
Operators that @supports support
Similar to the media queries (@media), @supports too has three operators :
The not operator
The “not” operator, as the name suggests, is to check for no support of the specified CSS property. This can come in handy to write a fallback version. For example:
@supports not (display: flex) {
.main-box { display:inline-block; padding:5px;}
}In the above example we can notice that if the browser does not support display:flex then keep the display as inline-block for the .main-box.
The and operator
The and operator can be used to check if a certain property “and” some other property are supported. For example :
@supports (display: flex) and (align-items: center;){
.myDiv { display:flex; padding:5px;align-items: center;}
}In the above example the block of CSS would be rendered only if both the conditions are true. You can also combine the and operator with not operator. For example :
@supports (display: inline-block) and (not (display:grid)){
.myDiv { display:inline-block; padding:5px;}
}The or operator
The other operator that @supports support is the or operator. The or operator as the name suggests can be used to check if any one of two or more CSS properties are supported by the browser. For example :
@supports (display: flex) or (display: grid;){
/* Block of CSS here */
}In this case the block of CSS would be executed even if one of the features are supported by the browser. You can use this operator to combine with the other operators too. For example:
@supports not ((transform-style: preserve) or (-webkit-transform-style: preserve)) {
/* Block of CSS here */
}If you notice, we need to make use of parentheses properly in order to define the order in which they apply. Parentheses are especially important while using both and and or operators.
To conclude I would say that the @supports rule is a very useful and helpful feature in CSS. However, the older browsers including IE11 still do not support it, hence, you need to use this with caution. However, if you are not supporting older browsers then go for it. You can check for the Browser support at CanIUse.com. Let us know about your experience using it.