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

概述

在今天的世界里，系统上有各种浏览器。因此，有时某些层叠样式表（C.S.S.）属性在该浏览器上无法运行。因此，为了检查特定的浏览器支持哪些CSS属性，JavaScript内置了CSS.supports()方法，它可以检查该特定属性是否被浏览器支持。所有的浏览器都支持 supports() 方法。Opera、Edge、Chrome和Firefox。

语法

CSS.supports()方法需要一个键值对作为输入，该键值对是字符串格式的。使用的基本语法是 –

CSS.supports(“propertyName:value”);

supports() – 这是CSS对象的一个方法，用于检查supports参数中传递的属性是否被浏览器支持。
propertyName – 这包含了CSS属性的名称，如display、position、margin、padding、z-index、text-align等。
value – 它取特定属性的值，如flex、absolute、relative、20 px、left、right等。

因此，为了进一步了解CSS.Suppers()方法，我们将通过一些例子来学习。

方法1 --在这个例子中，我们将直接把CSS样式键值作为参数传递给CSS.supports()方法，然后由该方法判断该浏览器是否支持给定的CSS属性。

算法

第1步 – 使用CSS对象中的supports()方法作为CSS.supports()。
第2步– 传递任何层叠样式表（CSS）属性作为参数。
第3步– 在控制台使用console.log()打印CSS.supports()方法。
第4步– 如果在传递属性时返回true，那么该特定的属性被支持，否则浏览器不支持。

例子

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check CSS property exist in browser using js</title>
</head>
   <body>
      <h1>Open console to see result by pressing (ctrl + shift + i) or F12 on keyboard</h1>

      <script>
         console.log(CSS.supports("float:top"));
         console.log(CSS.supports("float:right"));
         console.log(CSS.supports("float:bottom"));
         console.log(CSS.supports("float:left"));
      </script>
   </body>
</html>

输出

上述代码的输出显示在下面的图片中。由于 “float:top “和 “float:bottom “属性无效，它们将在控制台中返回false，而 “float:right “和 “float:left “属性有效且被浏览器支持，它们将返回true。

如何用JavaScript检查浏览器是否支持CSS属性？

方法2 - 在这个方法中，我们将建立一个用户界面，用户可以在给定的字段中输入CSS属性，并可以检查这些CSS属性在他们的浏览器中是否被支持。

算法

第1步 – 创建两个搜索框，一个用于搜索键，另一个用于搜索值，因为CSS的属性是键值形式的。分别给它们特定的ID，即 “propertyName “和 “pval”。再创建一个输出字段和一个HTML按钮。
第2步 – 在JavaScript中创建一个函数，命名为checkCss()。将使用一个箭头函数。
第3步 – 访问这两个输入框并将其存储在一个变量中，将这些输入框的值连接到一个变量中。
第4步 – 在CSS.supports()中传递这个连接的变量，并在if-else条件下进行检查。
第5步 – 如果它返回true，则该CSS属性被支持，否则返回false，则该属性不被支持。

例子

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check CSS property exist in browser using js</title>
   <style>
      body{
         min-height: 90vh;
         display: flex;
         place-content: center;
         flex-direction: column;
         text-align: center;
         background-color: #0a0a0a;
         color: white;
      }
      input{
         width:13rem;
         margin: 5px auto;
         padding: 0.3rem;
         outline: none;
      }
      button{
         width: 5rem;
         margin: 0 auto;
         padding: 0.2rem;
         cursor: pointer;
         background-color: transparent;
         box-shadow: 0 0 5px white;
         border-radius: 5px;
         color: white;
         border: none;
      }
   </style>
</head>
   <body>

      <h1>CSS Property Validator</h1>
      <div id="output" style="width:5rem;margin: 5px auto;padding: 0.2rem;"></div>
      <input type="text" id="propertyName" placeholder="Enter propertyName*">
      <input type="text" id="pval" placeholder="Enter value*">
      <button onclick="checkCss()">Check</button>

      <script>
         checkCss = () => {
            var p = document.getElementById("propertyName").value;
            var v = document.getElementById("pval").value;
            var pv = p + ":" + v;
            if(CSS.supports(pv)){
               document.getElementById("output").innerText=CSS.supports(pv);
               document.getElementById("output").style.background="green";
               document.getElementById("output").style.color="white";
            } else {
               document.getElementById("output").innerText=CSS.supports(pv);
               document.getElementById("output").style.background="tomato";
               document.getElementById("output").style.color="white";
            }   
         }
      </script>
   </body>
</html>