要約

  • W3Cの2016年6月の最初の公開草案は、JavaScriptでカスタムプロパティを登録し、値の型、初期値、継承を指定する案を示した。色の停止点を動かす例も載っていた。
  • 2019年草案でCSSの@propertyが加わり、2024年草案は計算値の段階での型検査と、文書全体で共有される登録名の扱いを詳しく説明した。

デザイナーは赤い見本と緑の見本を並べ、グラデーションの境目を一秒かけて移したい。--stop-colorに両方の色を入れて遷移を指定する。名前にはcolorと書いてあるのに、ブラウザーは途中の一コマに何を描けばいいか分からない。カスタムプロパティはさまざまなCSSのトークンを受け取れる。名前の響きだけでは「これは色として補間する値です」という履歴書にならない。面接会場には着いたが、職種欄が空白なのだ。

2016年6月7日のW3C最初の公開草案は、その欄を埋める登録を提案した。型、初期値、子への継承の有無をカスタムプロパティに与える。入口はJavaScriptのCSS.registerProperty()だった。草案の--stop-colorの例では、型を<color>、初期値を透明色、inheritsをfalseに設定し、ホバー時に赤から緑へ変える。色だと分かれば、ブラウザーは中間の色も計算できる。名前が仕事を教えるのではない。登録が教える。

2017年11月9日の草案も、登録と型付きのアニメーションを発展させた。保存されたこの段階の本文では、登録はまだJavaScriptから行う。現在よく見る@propertyを2016年に置いてしまうと、問いの変化が見えなくなる。最初はブラウザーへ値の性質を伝えることが課題で、次にそれをCSSの中でどう宣言するかが課題になった。

2019年10月25日の草案で、入口は二つになる。スクリプトのCSS.registerProperty()と、スタイルシートの@propertyだ。CSS側ではsyntax、inherits、initial-valueを書く。円の大きさを決める--radiusの近くに、それが長さで、ゼロから始まり、子へ自動的には伝わらないという説明を置ける。値を使う場所と契約を読む場所が近くなった。

2020年10月13日の草案も両方の方法とアニメーション例を保った。効果は見た目に出る。型が色なら赤と緑の間に色がある。型が長さなら十ピクセルと五十ピクセルの間に長さがある。--radiusを<length>として登録すれば、描かれた円は途中の大きさを経て育つ。小から大へ瞬間移動する円とは、だいぶ働き方が違う。

2024年3月26日の草案には、登録が成立する条件が並ぶ。@propertyにはsyntaxとinheritsが必要だ。型が何でもよい*でなければ、有効で独立に計算できるinitial-valueも要る。受け取る値、出発点、子への伝わり方。この三つが空欄のままではブラウザーは契約を引き受けられず、必要な記述が欠けた規則は無効になる。

型を照合する時刻も意外だ。スタイルシートを読み込んだ瞬間ではなく、計算値を作る段階で調べる。後からスクリプトが名前を登録する可能性があるからだ。早い段階で「まだ知らない型に合わない」と宣言を捨てれば、登録後に必要になった宣言を取り戻すため、全部保存しておくかシート全体を読み直す羽目になる。草案はその費用を説明している。面接には、正しい部屋だけでなく正しい時間もある。

登録した名前は部品の内側だけに閉じこもらない。2024年の本文では、Shadow DOM内に書かれたものを含めて文書に共通の登録表を使う。同じ名前の有効な@propertyが複数あればスタイルシート順の最後が勝ち、JavaScript登録はCSS規則より優先する。二つの部品が--radiusを別々の型にしたいと思っても、ブラウザーは一つの名前に一つの意味しか与えられない。外側のページから部品へ型付きの値を渡せる便利さと、名前を共有する負担がここで出会う。

W3Cの公開履歴は2016年から2024年までの節目を記録する。面接を終えた変数は、型と初期値と継承の方針を持って帰る。赤から緑への道には、ようやく途中の景色ができた。