CSSカスタムプロパティ

2019年6月10日

皆さんこんにちは、末ちゃんです。

お出かけしたときのことをブログに書かないの？と聞かれましたが、
最近あまりにも忙しすぎて遊びに出かけることがまったくありません。

きっと夏になったら涼しい山にこもります。

CSSカスタムプロパティ

さて、今日はCSSカスタムプロパティのお話しをしようかなと思います。

CSSというと静的な言語で、変数とか使えないイメージある方がほとんどだと思いますが、今のCSSは大変便利になりました。

例えば calc() 関数。
これを使えばCSSの中でも計算ができてしまいます。

例えば

h1 {
  margin: calc(100% - 40px);
}

のように、別の単位でも計算できるため非常に便利です。

そして今回お話しする CSSカスタムプロパティ には、var() と env() 関数があり、特にこの var() 関数は使えます。
var から察することができるように、定義した変数を呼びだす事ができます。

たとえば、通常の文字色を指定するときは以下の様にすると思います。

h1 {
  color: rgb(51, 51, 51);
}

しかしこの文字色はサイト内のあらゆるところで使うし、複雑な色コードだと覚えづらいのでコーディングが大変です。変更のときも全部対応しなければならないためそれもまた大変です。（よく一括置換で行けるという人がいますが、同じコードでも別の意図で指定されたその値まで置換されることがあり、破壊的な一括置換はほとんどの場合使い物になりません）

そんな問題も、var() 関数を使えばこの通り・・・

:root {
  --font-color-primary: rgb(51, 51, 51);
}

h1 {
  color: var(--font-color-primary);
}

これならば、色コードを覚えなくてもわかりやすい単語で色を指定できますし、:root に指定した値を変更すればすべて切り替わります。

これからのブーム？サイトのダークモードも簡単に実装

たとえば最近流行のダークモードも、var()関数を使えば簡単に実装できます。
通常であれば以下のような実装になるでしょう。

h1 {
  color: rgb(51, 51,51);
  background-color: rgb(255, 255, 255);
}

.dark-mode h1 {
  color: rgb(255, 255, 255);
  background-color: rgb(51, 51, 51);
}

これだとすべてのセレクタに指定していかなければならなくて、とても大変です・・・。
昨今だとSassなどを使用して、この問題を解決したりしますよね。

でも var() 関数ならこう書けます。

body {
  --font-color-primary: rgb(51, 51, 51);
  --bg-color: rgb(255, 255, 255);
}

body.dark-mode {
  --font-color-primary: rgb(255, 255, 255);
  --bg-color: rgb(51, 51, 51);
}

h1 {
  color: var(--font-color-primary);
  background-color: var(--bg-color);
}

変数だけ書き換えれば良いのです・・・。ひとつひとつのセレクタを書き換える必要がないので、ファイルサイズも軽くなるし良いことづくめです。

レスポンシブデザインにも最適

var() 関数はレスポンシブデザインにも最適です。

例えば、PCでは margin: 20px; としていたものを、SPでは margin: 12px; としたいってことありますよね。

.container {
  margin: 20px;
}

@media screen and (max-width: 767px) {
  .container {
    margin: 12px;
  }
}

うーん、これもまた一個一個対応するのはとても大変です。皆さんSassの変数なんかを使って対応していますよね。

:root {
  --spacing-normal: 20px;
}

@media screen and (max-width: 768px) {
  :root {
    --spacing-normal: 12px;
  }
}

.container {
  margin: var(--spacing-normal);
}

はい、とっても簡単になりました。これはフォントサイズなどにも流用できるので、とてもとても便利です。

iPhone X問題も env() 関数で解決

iPhone Xなどノッチがあったり、ホームボタンのないiPhoneでは、不本意な場所にサイトのパーツがかぶってしまって操作しづらかったり、そもそも見えなくなってしまったりします。
それを大体このくらいかなーと、それらを回避するためにこんな書き方するのはいけてないです。

.container {
  padding: 0 32px 20px 0;
}

env () 関数はUAが定義した環境変数を呼びだすことができます。

つまりiPhone Xが用意してくれている値を呼びだす事ができるんですね。

.contaienr {
  padding: 
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

はい、とてもスマートになりました。

フォールバック

万が一値がセットされていないときのためのフォールバックも、第2引数にセットすることができます。

.container {
  padding: env(safe-area-inset-top, 20px);
  color: var(--font-color-primary, rgb(51, 51, 51));
}

cale() と var() の組合せ

calc() 関数の中にもちろん var() 関数を使うことができます。

.container {
  padding: calc(var(--spacing-normal) + 20px);
}

これはほんとに便利すぎますね！

まとめ

使い道はたくさんあり、本当に便利にコーディングをすることができます。
プリプロセッサを使用せず、ネイティブでこれができるということが本当に良いのです。

ぱっと見、今回のサンプルコードだと逆に記述が増えているのではと思うかもしれません。
しかし実際の案件では何千行、時に1万を超える行のCSSを書くようなこともあります。
そのような状況では明らかに有利になりますし、チームでのコーディングであれば統一性もとれます。

ところでブラウザのサポート状況は？

Internet Explorer 11 さん。あなたのことですよ。

 

それではまた会いましょう！

MDN CSS カスタムプロパティ

Share Button