In this article I will show you different techniques to detect if a CSS property is supported by browser using CSS and JavaScript.
Detecting using CSS3
CSS3 provides @supports condition rule to check if a CSS property is support or not. Let’s see some example of using it
Detecting Using JavaScript
There are basically two ways to detect CSS property support using JavaScript.
Classical Method:
Developer been using in operator to detect if a CSS property is supported or not.
CSS.supports
CSS.supports is a function under the specification of CSS3 @support rule. Every browser supporting @support rule will support this function also.
There is also a polyfill available for CSS.supports function.
Official documentation for CSS3 @support rule.
Detecting support for @supports rule using JavaScript
As I mentioned above every browser supporting @supports CSS rule also support CSS.supports function. Therefore just check if CSS.supports is supported or not.
If you have overwritten the function using the above polyfill then you can check if the function contains native code or not. If it has native code then its supported otherwise not. Check this article to learn how to find out if a functions contains native code or not.