CSSの変数:使用とブラウザの互換性

以前にCSS変数を使用していたに違いないでしょう.以前にCSS変数を使用している場合は、Internet Explorerを使用してユーザーをサポートする必要がある場合は特にブラウザの互換性の問題を経験することができました.私は知っている、私は関連することができます、それは痛みをすることができます😢 しかし、この記事ではCSS変数を導入し、CSS変数を使用する際のブラウザ互換性の問題についても解決します.CSSの変数との知り合いのレベルは何でも、私はあなたが読んで楽しいと私は私が学んだことを共有しながら学習すると信じています.
私が進む前に、CSS変数とCSSカスタムプロパティ/カスタムプロパティの用語が同義であることに注意してください.

説明変数
CSSの変数の概念は、多くのプログラミング言語で変数の概念と似ています.CSS変数は、スタイルシートの他の場所で再利用するためにCSS値を格納する方法です.これにより、プロパティに値を適用することが容易になり、また、スタイルシートにある場所を探す必要がなく、値を変更することができます.

変数の宣言
カスタムプロパティの命名概念はダブルハイフンでプロパティ名を開始することです-- とルールセット内のプロパティ値.

:root {
    --primary-color: #c4c4c4;
}

一般的な練習は:root ドキュメントを表すツリーのルート要素である擬似クラスです.ただし、カスタムプロパティのスコープを選択できます.

.hero {
    --primary-color: #c4c4c4;
}

上の例では--primary-color はヒーロークラスにスコープされます.カスタムプロパティのスコープを指定すると、CSSセレクタに対してその有効性が制限されます.

用途
変数を宣言したので、次のことは既に宣言された変数を使うことです.変数を使用するには、カスタムプロパティ名をvar() プロパティ値として使用する関数です.

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

div {
    background-color: var(--primary-color);
    border: 1px dashed var(--primary-color);
}

フォールバックは、カスタムプロパティを見つけることができないあなたのブラウザの結果として何かがうまくいかない場合に作成することができます.

div {
    background-color: var(--primary-color, #c4c4c4);
}

上の例では、カラーコード#c4c4c4 コンマが後に使用されるフォールバック値の後--primary-color が利用できない.

ブラウザの互換性問題の修正
On caniuse.com , サポートしていないブラウザvar() Internet Explorerは、このハッキングのためのインターネットエクスプローラです.ブラウザの互換性の問題は、PolyFillによって作成されたと解決することができます.
ちょうどこのスクリプトタグをあなたのHTMLに加えてください

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\/script>');</script>

...そして、それは完了です🎉. 互換性の問題が修正されます.このサポートはIE 11用です.

ボーナス
別の解決策が作成され、これはポリフィルではなくponyfill .
インストールするには、このスクリプトタグをHTMLに追加します

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>

またはNPM

npm install css-vars-ponyfill

それからインポート

import cssVars from 'css-vars-ponyfill';

使用法
それがPearfillであるので、機能は起こるために処理のために呼ばれなければなりません.

/* In your js file */

cssVars({
  rootElement   : document
});

これは魔法です✨. これはIE
この記事を読む時間を割いてくれてありがとう.それが役に立つことを願っていますか?あなたの次のプロジェクトに取り組んで、あなたはSASS以下のような任意のプリプロセッサを使用していない場合は、常にCSSのカスタムプロパティ/変数と強調表示されたPolyfillとPonFillを使用して、ブラウザの互換性の問題の世話をすることができます.では後で✌️.

更なる読書

MDN web docs

W3Schools

CSS variable polyfill by nuxodin

CSS var ponyfill by jhildenbiddle

リファレンス

Stack overflow