色もサイズ管理も楽々!便利なCSS変数を試してみた

便利なCSS変数を利用した指定をやってみました。使いまわしたいキーカラーやサイズ指定を繰り返し書かなくて済むので非常に便利な機能です。

CSS変数の使い方

▼基本的な構文

▼使用例について

▼以下のように表示されました。

CSS変数

CSS変数の対応ブラウザ対策

caniuse.comで変数(Variables)の対応状況を見るとIEを除き2018/4/4時点ではEdgeも対応しています。

CSS変数 caniuse.com より引用

まだまだシェアがあるIEは対応していないので使うにあたり検討する必要がありますが、どのブラウザも対応となれば工数が減り、カラーやサイズ指定の管理も楽になりますので全て対応となる時期を待ち望んでおります。以上、テクノブレイブ名古屋オフィス開発1Gでした。

料金表ナビゲーション 料金表ナビゲーション

おすすめ記事