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

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>

输出

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

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

输出结果如下图所示,它返回false,所以输入框中的属性是无效的,不被浏览器支持。

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

结论

supports()方法的返回类型是布尔型的,因为它根据当前浏览器是否支持该CSS属性而返回真或假。例子2的界面对开发者特别有用,因为它省去了反复检查控制台的麻烦;只需在输入框中输入你的CSS属性名称和值,你就会被告知它在当前浏览器中是否被支持。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程