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

CSS 変数の IE11 ポリフィル

IE11 では CSS 変数がサポートされていないため、ブラウザーが混在する Web 開発環境では課題が生じます。幸いなことに、解決策はポリフィルまたはスクリプトの形式で存在します。

CSS Vars Ponyfill

そのようなポリフィルの 1 つが CSS Vars Ponyfill で、GitHub と NPM で入手できます。この軽量 (gzip 最小 6kB) で依存関係のないライブラリは、さまざまな機能を提供します。

• CSS カスタム プロパティのクライアント側変換
• ランタイム値のライブ更新
• 連鎖およびネストされた var() 関数のサポート
• Web コンポーネントおよび Shadow DOM との互換性CSS

制限と考慮事項

CSS Vars Ponyfill は実質的なサポートを提供しますが、制限があります。

• カスタム プロパティのサポートは次のとおりです。 :root および :host 宣言に制限されています。
• var() の使用法は次のとおりです。 W3C 仕様に従って、プロパティ値に限定されます。

実装例

ポリフィルは、次のような例でその機能を示します。

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

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

• チェーンおよびネストされたカスタム プロパティ:

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

• フォールバック値:

  p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
  }

• CSS インポートと Web の変換コンポーネント:

  <link rel="stylesheet" href="/absolute/path/to/style.css">
  <link rel="stylesheet" href="../relative/path/to/style.css">
  
  <style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
  </style>

結論

CSS Vars Ponyfill を採用することで、開発者は IE11 でも CSS 変数の利点を活用できます。このポリフィルにより、最新ブラウザと従来のブラウザ間で一貫性のある再利用可能なスタイルの作成が可能になり、Web アプリケーションの柔軟性とパフォーマンスが向上します。

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