CSSで変数を利用可能に。W3Cが「CSS Variables Module Level 1」ドラフトを公開

W3Cは、CSSで変数を利用可能にする新しい仕様「CSS Variables Module Level 1」のエディターズドラフトを公開しました。

CSS Variables Module Level 1

CSSはこれまで変数が使えなかったため、例えばページ内の複数箇所を同じ色で揃えようとしたときには、同じカラーコードをCSSの複数箇所に書き込む必要があり、色に変更があるたびにすべての箇所を確実に修正しなければなりませんでした。

CSS Variables Module Level 1は、CSSに変数を持ち込むことによって、変数の値を買い換えるだけで複数箇所のカラーコードが自動的に書き換わる、といったことを可能にします。

色のコードを簡単に使いまわせる

変数を記述するときには「data-変数名」と記述します。例えば変数名が「var」のときには、CSSファイル内で「data-var」と記述します。接頭辞が「data-」なのは、HTML5の「Custom Data Attribute」と揃えているのではないでしょうか。

変数を参照する場合には「data（変数名）」と記述します。

エディターズドラフトで使われている例を引用しましょう。CSSファイル内でヘッダの色を設定し、その色を使い回すとしましょう。変数名を「header-color」とし、色を「#06c」とします。

:root {
  data-header-color: #06c;
}

これで変数を定義して値をセットできました。このヘッダの色を、H1の背景色で使うことにしましょう。

h1 { background-color: data(header-color); }

このように使うことができます。

まだエディターズドラフトの段階ですから、仕様として完成するには時間がかかるはずですが、簡単に使えて、しかも非常に実用的な機能であることは間違いありません。実装されるのが楽しみですね。