ブラウザでの CSS プロパティと値の両方のサポートを確認するにはどうすればよいですか?

CSS プロパティと値に対するブラウザのサポートの検出

問題:

CSS プロパティまたは値がサポートされているかどうかを判断するブラウザ間の互換性を確保するには、特定のブラウザが重要です。ただし、既存のソリューションは多くの場合、プロパティのサポートのみに焦点を当てています。 CSS または JavaScript でプロパティと値の両方のサポートを確認するにはどうすればよいですか?

解決策:

CSS.supports

モダンブラウザは CSS.supports API をサポートしており、プロパティと値の両方の検証が可能です。構文は次のとおりです。

<code class="css">CSS.supports(property, value);</code>

例:

次の JavaScript コードは、CSS.supports の使用法を示しています。

<code class="javascript">console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  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>

CSS.supports API は、指定されたプロパティや値がサポートされている場合は true を返し、そうでない場合は false を返します。これにより、包括的なクロスブラウザーのサポート テストが可能になります。

以上がブラウザでの CSS プロパティと値の両方のサポートを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。