要約

  • W3C は2020年2月11日に Resize Observer の最初の公開作業草案を発表した。要素の大きさの変化を観察し、その測定値をコールバックへ渡す API だ。
  • CSSWG の編集草案は content-box、border-box、device-pixel-content-box を区別し、描画中の通知と、繰り返しのためその回に渡せなかった変更の扱いを定める。

ダッシュボードのグラフを考えよう。外側のグリッドがカードの幅を決める。グラフの作者は目盛りの数や文字の長さを決める。サイドバーが開くとカードは細くなるが、ブラウザーの窓はそのままだ。建物の外壁を測っても、部屋に机が入るかどうかは分からない。必要なのはカードが実際にもらった幅だ。

2020年2月11日の W3C 最初の公開作業草案は、要素のサイズを観察する ResizeObserver を示した。observe() で対象を登録し、観察中の箱が変わると測定情報がコールバックへ届く。unobserve() で対象を外し、disconnect() で観察を終えられる。W3C の刊行履歴も、この日付を最初の公開作業草案として記録する。ものさしを窓から部品へ持ってきた転換点だ。

カードの幅を知らされたグラフは、軸のラベルを減らしたり、凡例を移したり、描画をやり直したりできる。ブラウザーは寸法を渡す。どのラベルを残すかは、グラフを書いた人が決める。ページのグリッドはグラフの内装まで知る必要がない。

どの寸法を測るかにも選択がある。CSSWG の Resize Observer Module Level 1 編集草案は content-box、border-box、device-pixel-content-box を説明する。文章を入れる空間を知りたいなら内容の箱、枠込みの大きさなら境界の箱、canvas に使う物理的な画素を知りたいなら端末画素の内容の箱が関係する。最後の値は CSS の変形より前の端末画素で表される。測る場所を選んでから、調整方法を考える。

観察時に指定した箱が、どの変化で通知を受けるかを決める。届くエントリーにはサイズの情報もある。通知の条件と読み取れる値を混ぜると、必要のない再計算を呼びやすい。部品を取り外したら観察も終える。解体した部屋へ毎朝採寸に来ても仕方がない。

コールバックは自分で騒ぎを作ることもある。狭いカードを広げると新しいサイズが届き、今度は縮め、また通知を受ける。編集草案は観察の処理を描画の工程に置き、要素の深さによって同じ工程内での繰り返しを制限する。渡せなかった変更はループのエラーとして報告され、後のフレームで扱われ得る。作者の仕事は調整を収束させることだ。もらった箱の中身を整えれば、箱そのものとの綱引きを減らせる。

CSSWG の文書は2022年11月22日付の編集草案で、W3C の履歴は2020年の公開草案を確認する。原典が描く発明は控えめで強い。ブラウザーは部品に割り当てられた場所を測る。部品の作者は、その場所に何をどう収めるかを決める。