How to check if CSS property is supported in browser using JavaScript ?
Few CSS properties are not supported in some browsers, thus it is required to check whether a CSS property & its value are supported in the current browser. We can find it using JavaScript using CSS.supports() method.
Syntax:
supports(propertyName, value) supports(condition)
There are two distinct parameters:
- propertyName: A string containing the name of the CSS property to check.
- value: A string containing the value of the CSS property to check.
The second syntax takes one parameter condition which contains the condition to check.
Return value: Returns true if the browser supports the rule, otherwise returns false.
Example 1: The below example will illustrate how to check if CSS property is supported in the browser using JavaScript
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h1 style = "color:green; " > Welcome to w3wiki </ h1 > < script > // Returns 'true' result1 = CSS.supports("display: flex"); // Returns 'false' result2 = CSS.supports("transform-style: preserve"); console.log(result1); console.log(result2); </ script > </ body > </ html > |
Output:
Example 2: In the below example, if the value was ‘1%’ instead of ‘green’ the output would be ‘Not supported‘.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h1 style = "color:green; " > Welcome to w3wiki </ h1 > < script > if (CSS.supports('color', 'green')) console.log( 'border-radius is supported with given value'); else console.log('Not supported'); </ script > </ body > </ html > |
Output:
Example 3: In this example, the ‘text-overline-color’ CSS property has become obsolete and not supported in today’s modern browser.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h1 style = "color:green; " > Welcome to w3wiki </ h1 > < script > if (CSS.supports('text-overline-color', 'green')) console.log( 'text-overline-color is supported with given value'); else console.log('Not supported'); </ script > </ body > </ html > |
Output:
Supported browsers:
- Chrome
- Edge
- Firefox
- Opera
- Safari