JavaScript 如何检查CSS属性在浏览器中是否受支持

在某些浏览器中不支持某些CSS属性，因此需要检查CSS属性及其值在当前浏览器中是否受支持。我们可以使用JavaScript的CSS.supports()方法来查找。

语法：

supports(propertyName, value)
supports(condition)

有两个不同的参数：

propertyName： 一个包含要检查的CSS属性名称的字符串。
value： 一个包含要检查的CSS属性值的字符串。

第二种语法接受一个参数 condition ，其中包含要检查的条件。

返回值： 如果浏览器支持该规则，则返回 true ，否则返回 false 。

示例1： 下面的示例将说明如何使用JavaScript来检查浏览器是否支持CSS属性。

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>

输出结果：

JavaScript 如何检查CSS属性在浏览器中是否受支持

示例2： 在下面的示例中，如果值是 ‘1%’ 而不是 ‘green’ 那么输出将是 ‘ 不支持 ‘。

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>

输出：

JavaScript 如何检查CSS属性在浏览器中是否受支持

示例3： 在这个示例中， CSS属性‘text-overline-color’已过时和在现代浏览器中不被支持。

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>

输出：

JavaScript 如何检查CSS属性在浏览器中是否受支持