CSS

CSSの変数を使ってみよう

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

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

CSS変数の概要

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

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

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

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

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

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

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

-広告-

 

 






-CSS