要約

  • W3Cが2021年12月21日に公開したCSS Containment Level 3の最初の草案は、画面全体を見るメディアクエリーと、文書内の要素を見るコンテナークエリーを区別した。container-typeが基準の箱を作り、@containerが子孫のスタイルを条件付きで適用する。
  • 2022年8月18日の草案は、行内方向のサイズ、名前付きコンテナー、相対単位を整理した。本文欄とサイドバーの例では、同じ部品がそれぞれの空き幅に応じて姿を変える。

記事カードは本文欄で堂々としていた。左に写真、右に見出しと紹介文。編集者がそのままサイドバーへ移すと、写真と文字は細い帯の中で肩を押し合った。メディアクエリーに尋ねれば「デスクトップの窓は広い」という答えが返る。答えは正しい。しかしカードに与えられた場所は狭い。建物の面積を聞いて、押し入れにソファを運び込むようなものだった。

W3Cが2021年12月21日に出した最初の公開草案は、測る相手を分けた。メディアクエリーは表示環境や窓の寸法を扱う。コンテナークエリーは文書の中の要素、その箱の寸法などを扱う。同じカードを一つのページで何カ所にも置くなら、窓の大きさは共通でも、カードの置かれた欄の幅はそれぞれ違う。部品には自分の部屋の情報が要る。

仕組みは、まず基準となる祖先を決めるところから始まる。作者が container-type で問い合わせ可能なコンテナーを設ける。@container の条件を満たすと、その中の子孫に指定したスタイルが適用される。広い欄なら画像と文章を横に、狭い欄なら縦に積む。同じ窓に二枚のカードが並んでも、それぞれの住所で別の判断ができる。どこへ置くかは編集者の仕事で、その場所を測るのがブラウザーの仕事だ。

測定には境界も必要になる。箱の幅が子の配置で決まり、その配置が箱の幅を質問して決まるなら、答えが自分を追いかけ始める。2021年のW3Cによる設計デモは、問い合わせる箱を定め、必要な場面で内容によるサイズ決定を切り離す理由を説明した。コンテナーの寸法を安定した条件として使うための、地味で大切な段取りだ。

2022年8月18日の作業草案には、本文領域とサイドバーに置く同一のメディア部品が登場する。コンテナーの大きさによって縦並びと横並びを変える例だ。container-type: inline-size は行内方向の寸法を質問できる祖先を設ける。名前を付ければ @container が目当ての祖先を選べる。条件はその箱の子孫に働き、カードは置かれた欄に合わせて整列する。

cqw や cqi のようなコンテナー相対単位も同じ発想の延長にある。長さを問い合わせ先の幅や行内方向の寸法に結び付ければ、細部の大きさも引っ越し先に合わせられる。W3C CSS作業部会の2022年の更新記事は、行内方向のコンテインメント、単位、条件規則を一組の仕組みとして紹介した。

この規則は草案の間にも仕立て直された。2021年版には block-size や state といった探索的な型があった。2022年版では一方向だけの block-size 型が外され、初期値や略記も変わった。W3Cの公開履歴には、その二つの時点が残る。部品が自分の周囲を測るという発想を、使える文法に縫い上げていく過程だった。

サイドバーの幅は最後まで狭いままだ。それでいい。カードに必要だったのは広い窓の報告ではなく、狭い欄に合う着替えの合図だった。CSSはようやく、その部屋の寸法を聞けるようになった。