CSS変数の概要について見たあとに、ブラウザの対応状況を確認していきます。

• CSS変数の概要
• ブラウザの対応状況を確認

CSS変数の概要

・同じ値を一箇所で管理することができる CSS 変数という仕組みがあります。

・例えば複数の箇所がオレンジの指定をしている場合も一括でブルーなどに変更できるというような一括管理をすることができます。

ブラウザの対応状況を確認

・CSSの変数は最近使われだした機能で対応するブラウザが限られています。なので caniuse.com というサイトでブラウザの対応状況について見ておきましょう。

・ CSS Variables を検索しましょう。

・現時点では ChromeやFirefoxなどの最新版では問題なく使えるようですがIE では使えないという表示になっています。

・更にKnown issues を見ると Edge 15 で若干問題があるのがわかります。あくまで現時点ですので将来的には使えるようになっている可能性があります。ご自身の環境や状態を確認してみてください。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入