ネイティブ サポートなしで IE11 で CSS 変数を使用できますか?

IE11: CSS 変数 Polyfill

質問:

IE11 で CSS 変数を使用できますかネイティブ サポートなしですか?

答え:

はい、CSS Vars Ponyfill を使用します。

CSS Vars Ponyfill は、クライアント側の JavaScript ライブラリです。 CSS カスタム プロパティを静的な値に変換し、IE11 ブラウザが CSS 変数をサポートできるようにします。次のような機能を提供します。

• ランタイム値のライブ更新
• リンク、スタイル、@import CSS の変換
• チェーンおよびネストされた var() のサポート関数
• Web コンポーネントおよびシャドウ DOM との統合

使用法:

Web ページにポニーフィルを含める:

<script src="https://unpkg.com/css-vars-ponyfill/dist/css-vars-ponyfill.js"></script>

制限事項:

• カスタム プロパティのサポートは、:root および :host 宣言に限定されます。
• var() の使用はプロパティ値に制限されます。

例:

:root {
  --color: red;
}

p {
  color: var(--color);
}

:root {
  --size: 1em;
  --multiplier: 2;
}

p {
  font-size: calc(var(--size) * var(--multiplier));
}

W3C 仕様:

• [CSS カスタム]プロパティ](https://www.w3.org/TR/css-variables-1/)
• [CSS カスケードと継承レベル 4](https://www.w3.org/TR/css -cascade-4/#cascade-order)

以上がネイティブ サポートなしで IE11 で CSS 変数を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。