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