要約

  • W3Cが2012年4月10日に公開した最初のCSS Variables作業草案は、スタイルシートで同じ値を繰り返す手間に着目した。当時はvar-colorを定義し、var(color)で参照する書き方で、値はカスケードに従った。
  • 2015年12月3日の勧告候補には--main-colorとvar(--main-color)が現れた。2022年6月16日の勧告候補スナップショットは、代替値や未定義・循環参照を詳しく扱った。共通色が伝わる途中で、ある部品だけ別の色を選べる。

編集長は「えんじ色を少し軽く」と言った。色を選ぶより、それが住み着いた場所を探す方が難しい。ボタン、リンク、告知欄、三回前の改装から残る見出しに、同じ数値がそれぞれ書かれていた。一か所直しても、別の一か所が旧制服のまま会議に出る。CSS変数は違う連絡方法を示した。値に名前を付け、必要な場所がその名前を呼ぶのである。

W3Cが2012年4月10日に公開した最初のCSS Variables作業草案は、この繰り返しの面倒さから始まる。大きなスタイルシートでは色などの値が散らばり、単純な文字列置換では無関係な値まで巻き込んだり、別のファイルを見落としたりする。草案は作者が名前付きの変数プロパティを定義し、通常のCSSの値から呼び出す方法を提案した。根に置いた色を子孫が使うとしても、配達先はCSSのカスケードが決める。ファイル全体を機械的に書き換える方式とは違う。

初期の言葉遣いには日付が必要だ。草案はvar-colorを書き、var(color)で読んだ。例では根に青、divに緑、警告用の要素に赤を設定している。同じ名前でも、どの要素で値を読むかによって届く色は変わる。本部の連絡は木を下っていくが、支部は自分の掲示板に別の知らせを出せる。名前を共有する価値は、各所の例外を許しながら届くところにあった。

名前を付けると、責任の押し付け合いも起こる。一つの変数が別の変数を参照し、相手がまた最初の変数を参照する。2012年草案はこの循環を無効な変数として説明した。「何色ですか」と尋ねると、両者が互いの部屋を指さす。ブラウザーは終わりのない廊下の奥から隠れた色を見つけてはくれない。計算の規則に従い、依存する宣言の結果が決まる。重複を減らす仕組みは、依存関係も見えるようにした。

2015年12月3日のW3C勧告候補には、今見慣れた記法がある。--main-colorでカスタムプロパティを定義し、var(--main-color)で使う。仕様の例は主色を根に置き、ほかの規則や主色から作る背景に使った。根の値を変えると、それに依存する場所が更新される。編集部は色の連絡を一通出せばよく、すべてのボタンの引き出しを開ける必要が減った。

ただし配達の順番はカスケードの仕事だ。ある部品が独自の--main-colorを定義すれば、その下の要素には局所の値が届く。サイト全体はえんじ色、購読欄だけ青緑にもできる。予想外の色を見つけたとき、名前を検索して最初に現れた宣言だけを読んでも答えは出ない。そのボタンに対して勝った宣言を、継承と上書きを含めて調べる必要がある。知らせの送り主だけでなく、受け取る住所も大切なのだ。

W3Cの2022年6月16日付勧告候補スナップショットは、連絡が来なかった部品の備えも示した。var(--header-color, blue)の二番目の引数が代替値になる。再利用できる部品は自分の既定色を持ち、外側のアプリが別の色を渡したらそれを受け取れる。仕様によれば代替部分にはコンマも入れられる。区切りの最初のコンマ以降がひとまとまりの代替値だ。客は自分の上着を持参しつつ、家の上着も借りられる。

値がない場合や参照が輪になった場合、問題は計算時に表へ出る。var()を含む宣言は読み取り段階では形が整っていても、代入して初めて使える値か分かることがある。有効な値も代替値もなければ、依存した宣言は狙った色を作れない。画面に出た色を調べるなら、この要素は根から継承したのか、部品の上書きを受けたのか、代替値を使ったのか、宣言が無効になったのかを見分けたい。手掛かりはその要素の計算済みスタイルにある。

三つの文書は同じ表記の三刷ではない。2012年の作業草案はvar-colorとvar(color)、2015年の勧告候補は--main-colorとvar(--main-color)を使う。2022年の文書は代替値や無効な値をより細かく記した。古い例を今の書式として持ち込まない方がよい。通して残った考えは、値に名前を与え、カスケードに乗せ、必要な枝で別の答えを出せることだ。

編集部に残る仕事は、共有色をどこまで共有するかの判断である。根のえんじ色はサイトを一つに見せる。警告欄には別の色が要るかもしれない。持ち運べる部品なら代替色を持たせておく。ブラウザーが配達と計算を行い、編集者が出来上がったページの調子を見極める。ボタンたちは今度こそ「連絡が来ていない」とは言いにくい。