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

2012年2月13日

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); }

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

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

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : CSS3 , HTML5 , Webブラウザ , Web標準



≫次の記事
NiciraがOpenFlowで実現する仮想化ネットワークのアーキテクチャとは
≪前の記事
EnterpriseDBが、クラウドでPostgreSQLを提供する「Postgres Plus Cloud Database」を開始

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus