Internet Explorer 11 で CSS 変数を使用するにはどうすればよいですか?

IE11 での CSS 変数の互換性

CSS 変数は、CSS コード内で変数を定義および再利用する便利な方法を提供しますが、ネイティブではありません。 Internet Explorer 11 (IE11) でサポートされています。これは、アプリケーションで古いブラウザをサポートする必要がある開発者にとって課題となります。

解決策: CSS 変数 Ponyfill

ありがたいことに、次の形式で利用できる解決策があります。 CSS 変数 Ponyfill と呼ばれるポリフィル。このライブラリを使用すると、CSS 変数をネイティブにサポートしていない IE11 およびその他のブラウザで使用できます。

機能と機能

CSS 変数 Ponyfill は幅広い機能を提供します、以下を含む:

• CSS カスタム プロパティの静的へのクライアント側変換値
• 最新ブラウザと従来のブラウザの両方でのランタイム値のライブ更新
• 、
• 連鎖およびネストされた var() 関数
• var() 関数のフォールバックのサポート値
• Web コンポーネント / シャドウ DOM CSS のサポート
• での監視モードの自動更新
• 軽量 (6k min gzip) で依存関係なし

使用法

CSS 変数 Ponyfill を使用するには、単にそれを他の CSS よりも前の HTML ドキュメントファイル:

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

例

CSS 変数 Ponyfill を使用して IE11 で CSS 変数を作成および使用する方法の例をいくつか示します:

ルートレベルのカスタムプロパティ

:root {
    --a: red;
}

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

連鎖カスタム プロパティ

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

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

ネストされたカスタム プロパティ

:root {
    --a: 1em;
    --b: 2;
}

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

作成者CSS 変数 Ponyfill を使用すると、CSS の利点を活用できます。 IE11 の変数を使用して、サポートされているすべてのブラウザーで Web ページが一貫して表示されるようにします。

以上がInternet Explorer 11 で CSS 変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。