ブラウザでの CSS プロパティと値の両方のサポートを確認するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-29 18:37:50

オリジナル

350 人が閲覧しました

How to Check for Both CSS Property and Value Support in Browsers?

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