如何確定瀏覽器對 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中文網其他相關文章！