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 中国語 Web サイトの他の関連記事を参照してください。