如何使用 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 属性的名称，例如显示、位置、边距、填充、z-index、文本对齐等。
value - 它采用特定属性的值，例如 flex、absolute、relative、20 px、left、right 等。

因此，为了了解有关 CSS.Supports() 方法的更多信息，我们将通过一些示例进行学习。

方法 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>

输出

上述代码的输出如下图所示，用户可以在给定的输入框中键入 CSS 属性，并检查您的浏览器是否支持这些属性，如下图所示“display:block”属性受浏览器支持且有效，它返回 true。

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

输出如下图所示，返回false，因此输入框中填写的属性无效，浏览器不支持。

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

结论

supports() 方法的返回类型是 Boolean，因为它返回 true 或 false，具体取决于当前浏览器是否支持 CSS 属性。示例 2 界面对于开发人员特别有用，因为它消除了重复检查控制台的需要；只需在输入字段中输入您的 CSS 属性名称和值，您就会被告知当前浏览器是否支持。

以上就是如何使用 JavaScript 检查浏览器是否支持 CSS 属性？的详细内容，更多请关注编程之家其它相关文章！