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

现在，一些CSS属性已经被弃用，一些浏览器不支持它们。因此，有时我们需要检查浏览器是否支持CSS属性，并相应地使用它来样式化元素。

然而，我们可以使用CSS的’supports’规则来实现这一目的，但这里我们将介绍使用JavaScript检查浏览器是否支持CSS属性的不同方法。

使用CSS.supports()方法检查浏览器是否支持CSS属性

我们可以使用JavaScript中的CSS.supports()方法来检查浏览器是否支持特定的CSS属性。

语法

用户可以按照下面的语法使用CSS.supports()方法来检查浏览器是否支持Web浏览器的CSS属性。

let isSupported = CSS.supports(CSS_Property_name, CSS_property_value);
let isSupported = CSS.supports(CSS_condition);

在上面的语法中，我们编写了supports()方法的两种不同语法，两者都有效。

参数

CSS_property_name - 它是CSS的属性名称，如display、height、width等。
CSS_property_value - 它是CSS_property_name属性的值。
CSS_condition - 我们可以将整个CSS条件作为参数传递，如’width: 1vh’，而不是将width和1vh作为分别的参数传递。

示例

在下面的示例中，我们使用CSS.supports()方法来检查浏览器是否支持CSS属性。我们创建了isPropertySupported()函数，该函数调用CSS.supports()方法，并根据属性是否受支持在Web浏览器上显示不同的HTML。

<html>
<body> 
   <h3>Using the<i> supports() method </i> to check whether CSS property is supported by the browser or not. </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById("output");
      function isPropertySupported(property, value) {

         // using the CSS.supports() methods
         let isSupported = CSS.supports(property, value);
         if (isSupported) {
            output.innerHTML += "The " + property + " CSS property and " + value + " is supported by the current browser! <br/>";
         } else {
            output.innerHTML += "The " + property + " CSS property and " + value + " is not supported by the current browser! <br/>";
         }
      }
      isPropertySupported("height", "10me");
      isPropertySupported("display", "flex");
   </script>
</body>
</html>

在上面的输出中，用户可以观察到，支持方法对于属性display和值flex返回true，并对于属性margin和值10me返回false。然而，margin属性被所有浏览器支持，但我们给出了一个错误单位值’me’，该单位值不被支持。

示例

在下面的示例中，当用户点击“检查有效的CSS属性”按钮时，它会调用validateCSS()函数两次，每次传递不同的CSS条件作为参数。

在这个示例中，我们将CSS条件作为CSS.supports()方法的参数传递，该方法根据浏览器中有效的CSS属性返回一个布尔值。

<html>
<body>
   <h3>Using the <i> supports() method </i> with condition parameter to check whether CSS the browser supports property or not. </h3>
   <div id = "output"> </div><br>
   <button onClick = "validateCSS('flex-direction: row'); validateCSS('margin: 10tr')"> Check for Valid CSS property </button>
   <script>
      let output = document.getElementById("output");
      function validateCSS(condition) {

         // using the CSS.supports() methods
         if (CSS.supports(condition)) {
            output.innerHTML += "The " + condition + " CSS condition" + " is supported by the current browser! <br/>";
         } else {
            output.innerHTML += "The " + condition + " CSS condition" + " is not supported by the current browser! <br/>";
         }
      }
   </script>
</body>
</html>

在上面的输出中，用户可以观察到浏览器支持 ‘flex-direction: row’，但不支持 ‘margin: 10tr’。

在 JavaScript 中创建一个自定义算法来检查浏览器是否支持 CSS 属性

我们可以通过自定义逻辑，在 JavaScript 中创建一个自定义算法来检查浏览器是否支持 CSS 属性。我们可以简单地创建一个 HTML 元素，尝试为特定属性赋值，并检查该属性是否通过值进行初始化。

语法

用户可以按照以下语法来使用自定义算法。

var dummyElement = document.createElement("div");
dummyElement.style[property] = value;
if (dummyElement.style[property] === value) {

   // CSS property supported
} else {

   // CSS property supported
}

在上面的语法中，我们使用 createElement() 方法在文档中创建一个虚拟的HTML元素。

步骤

第一步 - 使用document.createElement()方法创建任何虚拟的HTML元素。

第二步 - 访问虚拟元素的style属性。style属性是一个包含CSS属性和它们的值作为键值对的对象。尝试向style对象添加新的键值对。

第三步 - 如果CSS属性有效，我们可以成功地将其添加到style对象中。现在，尝试使用属性作为键从style对象中访问CSS属性的值，并将其与实际值进行比较。

第四步 - 如果实际值和从style对象获取的值相同，则浏览器支持该CSS属性及其值。

示例

下面的示例使用自定义逻辑并实现给定的步骤，以检查浏览器是否支持CSS属性及其值。

<html>
<body>
   <h3>Using the <i> custom algorithm </i> to check whether the CSS property is supported by the browser or not.</h2>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      function isValidCSSProperty(property, value) {
         var dummyElement = document.createElement("div");
         dummyElement.style[property] = value;
         if (dummyElement.style[property] === value) {
            output.innerHTML += "The " + property + " CSS property and " + value +  " value is supported by the browser! <br/>";
         } else {
            output.innerHTML += "The " + property + " CSS property and " + value + " value is not supported by the browser! </br>";
         }
      }
      isValidCSSProperty("flex-direction", "height");
      isValidCSSProperty("flex-direction", "row");
   </script>
</body>
</html>

用户可以使用supports()方法来编写一行代码，以检查浏览器是否支持CSS属性。