概述

当今世界，系统上有各种可用的浏览器。因此，有时某些级联样式表 (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，则该特定属性受支持，否则浏览器不支持。

示例

   


   
      
Open console to see result by pressing (ctrl + shift + i) or F12 on keyboard
      
      
   

输出

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

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

算法

• 第 1 步 - 创建一个两个搜索框，一个用于键，另一个用于值，因为 CSS 属性采用键值形式。将它们的特定 ID 分别指定为“propertyName”和“pval”。创建另一个输出字段和一个 HTML 按钮。

• 步骤 2 - 在 JavaScript 中创建一个名为 checkCss() 的函数。将使用箭头函数。

• 第 3 步 - 访问两个输入框并将它们存储在变量中，将这些框的值连接到变量中。

• 第 4 步 - 在 CSS.supports() 中传递此串联变量并检查 if-else 条件。

• 第 5 步 - 如果返回 true，则支持该 CSS 属性，否则返回 false，则不支持该属性。

示例

   
   


   
      
      
CSS Property Validator
      

      
      
      Check
      
      
   

输出

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

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

结论

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

以上是如何使用 JavaScript 检查浏览器是否支持 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！