Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 17 Jun, 2022
View Discussion
Improve Article
Save Article

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:

  1. propertyName: A string containing the name of the CSS property to check.
  2. 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>


Output:

 

Supported browsers:

  1. Chrome
  2. Edge
  3. Firefox 
  4. Opera
  5. Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!