IE11はCSS変数をサポートしていますか?ポリフィルを使用したソリューション

IE11 は CSS 変数をサポートしていますか? Polyfill

IE11 では CSS 変数がサポートされていないため、複数のブラウザーで Web サイトを開発する場合に障害となる可能性があります。ただし、ポリフィルという解決策があります。

ポリフィルとは何ですか?

ポリフィルは、ブラウザの機能間のギャップを埋めるスクリプトであり、サポートされていない機能の実装を可能にします。 .

CSS 変数 Polyfill

IE11 の場合、「css-vars-ponyfill」は CSS 変数を実装するための信頼できるオプションです。カスタム プロパティから静的な値へのクライアント側の変換を提供します。

インストール

ポリフィルは、GitHub、NPM 経由で、またはデモ ページから直接インストールできます。 Codepen.

使用例

IE11 で CSS 変数を有効にするためにポリフィルを使用する方法の例を次に示します。

<script src="css-vars-ponyfill.js"></script>
<style>
  :root {
    --primary-color: red;
  }
</style>
<p>This text will now be red.</p>

機能

• ルートレベルのカスタム プロパティの静的値への変換
• 最新および従来のブラウザーでのランタイム値のライブ アップデート
• チェーンおよびネストのサポートvar() 関数
• 軽量で依存関係なし

制限事項

• ルートレベルのカスタム プロパティ宣言に限定
• var() の使用はプロパティ値に制限されます

結論

「css-vars-ponyfill」を使用すると、IE11 ユーザーは快適に使用できますCSS 変数の全機能。これにより、ブラウザ間の互換性が向上し、Web 全体で一貫したユーザー エクスペリエンスが実現します。

以上がIE11はCSS変数をサポートしていますか?ポリフィルを使用したソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。