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

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

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

Tags: HTML/CSS Web技術 Web標準 Webブラウザ

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




タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

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

最新記事10本