要約

  • W3Cは2001年4月4日にMedia Queriesの最初の作業草案を出した。HTML4とCSS2には既にscreenとprintなどのメディア種別があり、草案は表示環境をもっと細かく尋ねる方法を提案した。
  • 2002年7月8日に勧告候補、2012年6月19日に勧告が出た。幅、高さ、色などを条件にスタイルを選び、記事の文面は一つのままにできる。

広い画面で三段組の記事を見ると、みんな行儀がいい。見出しには余裕があり、案内メニューも自分の席にいる。窓の端を内側へ引いた途端、右の段が中央の段を押し、見出しは窮屈そうに折り返した。印刷機までやって来て、クリック用の案内を紙に刷る必要があるのかと問い詰める。記事の内容は無実だった。寸法を一つしか用意しなかった服の問題である。

2001年4月4日のW3C最初の作業草案は、以前からある仕組みを踏まえている。HTML4とCSS2では画面向けと印刷向けをscreenやprintで分けられた。ところが画面という札は大ざっぱだ。同じ札を付けた窓でも、三段組が悠々と入る場合と、一段さえ苦しい場合がある。仕立屋に「人間用です」とだけ伝えて上着を注文するようなものだった。

草案が足したのは、環境の特徴についての質問だ。幅や高さ、色、解像度などを条件にできる。min-widthはある配置に必要な広さを、max-widthは狭い場所向けの配置を示せる。印刷する紙の幅にも条件を付けられる。ブラウザーは読者の環境を知り、制作者はどの条件でどのスタイルを使うか書く。本文の一文一文はそのままでいい。

たとえば広い窓では本文と写真と脇の欄を並べる。狭くなったら脇の欄を本文の下へ移し、見出しに場所を返す。印刷時には画面用の案内を外して紙面を整える。これは記事を三本書き分ける作業ではない。一つの文章が、読む場所に合わせて着替える作業だ。

2002年7月8日の勧告候補は、実装に向けてこの仕組みをさらに固めた。「候補」という位置付けは標準化の段階を表す。当時のすべてのブラウザーが同じ日に対応を終えた、という意味にはならない。変わらない要点は、文書を保ったまま、表示の条件を細かく指定できることだった。

2012年6月19日のW3C勧告では、メディア種別にゼロ個以上の特徴式を組み合わせる形が定まった。幅、高さ、色の条件があり、min-widthとmax-widthによる範囲の例も示された。紙の幅を対象にした例もある。三段組を崩す位置は、その月に売れた機器の名前から選ぶより、記事の段が実際に押し合いを始めるところに置くほうが筋が通る。

寸法の話には落とし穴がある。ここでいうpxはCSSピクセルで、画面の物理的な点を数えた値ではない。高密度の画面とそうでない画面でも、CSSから見える幅が近いことはある。織物の糸の本数を数えて上着の肩幅を決める人はいない。見るべきは、本文と見出しに残された場所だ。

2012年の勧告はonlyやnot、未知の特徴の扱いも定めた。環境が変わればユーザーエージェントがクエリーを評価し直し、組み直すことを期待する一方、その反応を常に必須とはしていない。だから編集部では窓を動かし、印刷表示を確かめ、実際の結果を見る。正しい文法で書いた服でも、試着すれば袖が長すぎることはある。

Media Queriesは、ページの幅を測る仕事をブラウザーへ渡した。どこで三段組をやめるかは作り手が決める。読者が窓を狭くしたとき、判断の良し悪しがすぐ見える。記事は同じ話を続けながら、ようやく場所に合った服を選べるようになった。