CSSでプログラミング？圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門

SassのようなCSSプリプロセッサーが登場してもう5年以上が経過しました。
SassやLESSは関数や変数などを使うことができるので非常に便利です。
関数や変数を使えるようになるだけで、大量のコードをコピーアンドペーストするという作業を省くことができ、サクサクと開発を進めることができるようになります。

ところが、コンパイルを行わなければならないという一手間が億劫で業務ではまだ使っていないという現場も多いのではないでしょうか。

さらに、プリプロセッサーの変数にはいくつかの制限もあります。
変数はDOM構造と結びつくことはなく、JavaScriptから読み込んだり変更したりすることができないという点です。

そうした問題に対処するために新しくCSSに導入されたのが、「CSSカスタムプロパティ」(CSS Variables)です。
基本的に、CSSカスタムプロパティは、プリプロセッサーの変数と同じように働きます。

今回は、圧倒的にデザインが便利になる「CSSカスタムプロパティ」についての基本的な使い方を解説します。
プリプロセッサーを使う時のようにコンパイルを行う必要もなく、新しく文法を覚える必要もありません。

「CSSカスタムプロパティ」の基本

大抵の場合、言語やフレームワークを新しく学ぶためには、新しい文法を学んでいく必要があります。

プリプロセッサーではそれぞれ変数を宣言する方法が異なります。
例えば、Sassであれば「$」、LESSであれば「@」を変数名の前につけます。

CSSカスタムプロパティでは、同じように「--」(ダッシュ2つ)を変数の前につけます。
ありがたいことに、新しく覚えるのはたったこれだけのルールで、ブラウザごとに文法を分けて書く必要は一切ありません。

例えば、boxのcolorやpaddingを指定したいとき、変数の前に「--」をつけて次のように指定します。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
}

変数を使いたい時には「var()」というCSSの関数を使い、括弧の中身にカスタムプロパティー名を入力します。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
　　padding: var(--box-padding);
}

.box div{
　　color: var(--box-color);
}

「var()」を使った方法は非常に簡単です。
しかも、カスタムプロパティーが前に宣言されているかどうかわからない時にも、次のように使うことで、フォールバックを設定することができます。

.box{
　　--box-color: #0060e6;
　　--box-padding: 0 10px;
　　margin: var(--box-margin, 10px);
}

この場合、「--box-margin」は以前に宣言されていないので、marginは10pxのほうを取ります。

このような使い方をすることもできます。

.box{
　　padding: var(--box-padding, var(—key-padding));
}

上の例では、「--box-padding」が指定されていない場合には、「--main-padding」を採用します。

演算子を使ってみる

CSSプリプロセッサーや他の言語と同様に、変数に基本演算子(+, -, *, /)を混ぜて使うこともできます。
CSSの場合は「calc()」関数が用意されており、カスタムプロパティーを含めた演算を行います。

.box{
　　--base-size: 10px;
　　--indent-xl: calc( 2 * var(—base-size));
　　--indent-l: calc(var(—base-size) + 2px);
　　--indent-s: calc(var(—base-size) - 2px);
　　--indent-xs: calc(var(—base-size) / 2);
}

やっかいなのは、単位をつけるかどうかです。
しかし、単位は次のように「calc()」の中に入れてやることで解決します。

.box{
　　--space: 10;
　　padding: var(--space)px 0; // ×
　　padding: calc(var(--space)*1px) 0; // ○
}

CSSワイドなキーワードにも対応

CSSカスタムプロパティは他のCSSのプロパティと同じルールで働きます。
したがって、CSSワイドな値である「initial」や「unset」なども対応しています。

• initial：初期値を指定値にする
• inherit：継承値を指定値かつ算出値にする
• unset：継承するプロパティについてはinherit、そうでないものにはinitialにする
• revert：ユーザーエージェントのスタイルシートによって決められた初期値にする

これらをCSSで使うと、例えばこのようになります。

.common-values{
　　--border: inherit;
　　--bgcolor: initial;
　　--padding: unset;
　　--animation: revert;
}

また、コンポーネントを作りたい時に、うっかりして他のスタイルやカスタムプロパティを読み込みたくない場合があります。
通常、そうした場合にはCSSをモジュール化して組み込むのが一般的な解決策でしょう。

しかし、「all」プロパティを使うことで解決することができます。
このプロパティは、CSSプロパティをすべてリセットしたい時に使います。

.all-reset{
　　all: initial;
}

しかし、残念ながらこの「all」プロパティはCSSカスタムプロパティまではリセットを行いません。
現在、「--」という接頭辞を「all」と同じように使ってカスタムプロパティをリセットできるようにするかどうか、議論が行われています。

最終的には、このようにリセットが行われるようになります。

.all-custom-properties-reset{
　　--: initial;
}

JavaScriptでカスタムプロパティの値を取得する

CSSカスタムプロパティはDOM操作に対応しているので、JavaScriptを使ってCSSカスタムプロパティの値を取得することができます。

例えば、以下のCSSカスタムプロパティを定義したとしましょう。
:root {
　　—font-color: #0060e6;
}

JavaScript側では、このように定義します。

var value = document.documentElement.style.getPropertyValue(‘—font-color');
console.log(value);

CSS側でどんな変数が定義されているのかを見に行き、JavaScriptで何かしらの処理を入れられるようになります。

また、値を変更する場合はこのように処理を行います。

document.documentElement.style.setProperty('--key-color', ‘ #006090 ’);

まとめ

これまで、変数などを使うにはSassなどのプリプロセッサーを使って処理するのが主流でした。
CSSカスタムプロパティはようやくさまざまなモダンブラウザで対応するようになったので、これからネイティブのCSSでもますます使う機会が増えてくるでしょう。
最初のうちはレガシーブラウザのことを考えて対応する必要があるかもしれませんが、ぜひ積極的に利用してみてください。