如何确定浏览器对 CSS 属性和值的支持？

确定浏览器对 CSS 属性和值的支持

您遇到了 CSS 属性 (vh) 在各浏览器中不一致工作的问题。为了解决这个问题，您需要寻找一种方法来检查属性和值是否都受支持。虽然 Lea Verou 的文章提供了见解，但尚不清楚如何将其具体应用于 CSS 值。

使用 CSS.supports

现代浏览器现在提供 CSS.supports API ，它允许您验证对特定属性和值的支持。以下是如何使用它：

<code class="javascript">console.log(
  // Check for property support
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),

  // Check for value support
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // Check for more complex property and value combinations
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
);</code>

在此示例中，测试了各种属性和值。控制台输出将显示“true”表示受支持的功能，“false”表示不受支持的功能。此 API 提供了一种简洁有效的方法来验证浏览器对属性和值的支持。

以上是如何确定浏览器对 CSS 属性和值的支持？的详细内容。更多信息请关注PHP中文网其他相关文章！