How to check if CSS property is supported in browser using JavaScript ?

Last Updated : 01 Jun, 2023

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>GeeksforGeeks</title>
</head>
 
<body>
    <h1 style="color:green; ">
        Welcome to GeeksforGeeks
    </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>GeeksforGeeks</title>
</head>
 
<body>
    <h1 style="color:green; ">
        Welcome to GeeksforGeeks
    </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>GeeksforGeeks</title>
</head>
 
<body>
    <h1 style="color:green; ">
        Welcome to GeeksforGeeks
    </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>