W3Cスタイルシート仕様の歩き方みたいなもの（メモ）

Back to Basics CSSというイベントが先日行われた。主旨としては、SassやらCompassといったスタイルシートを記述するためのメタ言語なりフレームワークではなく、スタイルシート言語そのものの基礎に立ち返ろう、というものであったらしい。らしい、というのは筆者はこのイベントに参加しておらず、あくまで当日Twitterに流れてきたツイートと、イベントレポートでしか様子を伺い知ることができないからなのだけれども、このイベントで発表した人たちのスライドの中で、CSS3の日本語訳集やCSS 2.2日本語訳といった筆者の管理しているウェブページがほんのちょっぴり出てきたりする。

で、主に発表した人たちのエントリーを見るにつけ、ウェブ制作に携わる人が大多数のイベントであっても、そのイベントに参加する層はどうも日頃から仕様書を読まなかったり、縁遠かったりするという雰囲気……らしい。また、上記のイベントに参加して仕様書を読むぞという熱が一時的に上がったとしても、そろそろ熱が下がってくる頃合いじゃないかなと思うので、継続してスタイルシート仕様に触れるにはどうすればいいのか、についてメモ書き程度に書いてみた、という話。

CSSに関するイベントを枕にした都合上、記事タイトルをスタイルシートに絞ったけれども、別にウェブ仕様というもう少し大きな主語にしてもある程度耐えられる……ようにはなっていると思う。ただ、スタイルシートという具体例があった方が分かりやすいと思うので、基本的にはスタイルシートの話で行こうかなと。

1. 原仕様書が英語である

1つの回避方法としては、参考日本語訳を探し当てればいい。スタイルシートに限って言えば、前述の日本語訳集を当たってもらえればと思う。またW3Cに限らず、IETF (RFC)やECMA(Script)の技術文書がネット上に多数存在しているので、検索すれば出てくることがある。けれども、最新の仕様となると、どうしても英語を読まなければならないというシーンがある。もうこればっかりはどうしようもない。

もちろん機械翻訳という業もあったりするけれども、やはり正攻法で原仕様書を攻略するには、自力で英語が「読める」ようになればいい。では読めるようになるにはどうすればいいのか、というのはさしたる英語能力がない筆者があれこれ言うよりも英語上達完全マップあたりの方がよっぽど詳しいだろうから、このサイトを見て必要なスキルを揃えるにはどうすればいいのかのヒントをつかめばいいと思う。

いずれにせよ、仕様書に慣れないうちは日本語訳だけを読めばいいと思う。筆者もHTML4仕様は日本語訳を読むばっかりで、原仕様書を当たった記憶がほとんど無かったりする。

2. どこから手を付けていいのか分からない

さて、HTML4+CSS2という一昔前のある意味で牧歌的な時代とは違い、HTML5+CSS3という激しい時代である。前述のCSS3の日本語訳集には策定中のものも含めた全部のCSS3モジュールが記載されているので大量の仕様があって、これだけでも萎えそうになってしまう。そこで、CSS3とは何なのかをおさらいしておこうと思う。手前味噌だけれども、CSS3の日本語訳集にはこう記してある。

CSS3は、CSS2.1仕様を核とし、CSS2.1仕様の機能を追加・改訂するモジュール群です。CSS2.1ではひとつの巨大な仕様にすべてのモジュールが定義されていましたが、CSS3では仕様を分割し個別のモジュールとして定義するものです。

ということで、スタイルシートの基礎仕様はあくまでCSS2.1仕様であって、その上にCSS3があると思ってもらえればいい。もっとも、CSS2.1仕様はエラッタ（不確かな文言等の修正）がたまっており、マイナーな修正を施したCSS2.2を参照するようにCSS Working Groupはアナウンスしているので、日本語訳もCSS2.1訳ではなく、エラッタを反映したCSS2.2日本語訳を参照してもらえればと思う。若干脇道にそれたけれども、CSS2.1とCSS3の関係は、たとえばセレクタ（Selector）レベル3であれば、CSS2.1の5章を丸ごと改訂している。フレキシブルボックス（Flexible Box）であれば、CSS2.1に無かった機能なので新しく追加されている。改訂か追加かというのは、仕様のURLを見れば簡単に分かる。


セレクタとフレキシブルボックスでURLの表記形式が少し違う（css3-selectorsとcss-flexbox-1）のは命名規則に変更があったためなのだけれども、フレキシブルボックスの命名規則が新しいもので、[仕様のステータス]-css-[レベル番号]-[年月日]という規則になる。なお、セレクター4という仕様が策定中で、これはセレクター3の改訂になる。フレキシブルボックスの改訂版が発行されるならば、flexbox-2というようにレベル番号が付けられる。つまり、"3"で始まるか、"1"で始まるかでCSS2.1の改訂かCSS2.1に新規追加なのかが分かるようにしてある、ということになる。しかし、フレキシブルボックスのように1で始まろうともCSS3に分類される。セレクター4も数字は4だけれどもやはりCSS3に分類される。CSS3はあくまでモジュールの集合を表す概念であり、その中心を成すのがCSS2.1仕様である……というような説明でCSS2.1仕様がスタイルシート仕様の核となる、というイメージがつかめるだろうか。

なので、スタイルシートの基礎の基礎を学びたい、という場合は最初にCSS2.2日本語訳を当たってもらえればいいと思う（これまた手前味噌だけど）。

3. 仕様書の流儀がよく分からない

RFC 2119（RFC2119参考日本語訳）のキーワードはスタイルシート仕様にかかわらず、ほとんどのウェブ関連仕様で出現するので、まず抑えておきたい。仕様でどのキーワードを採用するかは、仕様内に明示される。CSS2.2なら3章の適合性にある。特にキーワードMUST（しなければならない）、MUST NOT（してはならない）、SHOULD（すべきである）、SHOULD NOT（すべきでない）、MAY（してもよい）、RECOMMENDED（推奨される）あたりは頻出キーワードだと思う（これらのキーワードを訳出する際は必ず括弧内の訳語にするように筆者はしている）。いくつか例示してみよう。

MUST
「HTMLに対して、div.valueとdiv[class~=value]は同じ意味を持つ。属性値は、"ピリオド"（.）の直後に続かなければならない。」（5.8.3 クラスセレクタ）とというのは、必ず"."の直後に属性値を書かなければならないことを意味する。たとえば、. valueなどと空白を入れて書くことは、例外なくクラスセレクタを表すことにはならない。
MAY
「著者は、色または画像のいずれかとして要素の背景（すなわち、レンダリング表面）を指定してもよい。」（14.2 背景）というのは、スタイルシート制作者は、背景を指定してもいいし、指定しなくてもよいことを意味する。
SHOULD
「背景画像を設定する場合、著者は画像が使用不能である場合に使用される背景色を指定すべきである。」（14.2.1 背景のプロパティー）というのは、もしスタイルシートで背景画像を指定するならば、指定しない理由が特別にない限り、何らかの背景色を画像とあわせて指定すべきことを意味する。

あと、別に頭から読み進める必要も無い（通読するというのももちろんありだろうけども、分量が多いと挫折するのが目に見えている）。CSS2.2であればプロパティー表をリファレンス代わりに引いてもよいだろう。また、気になる仕様書内のリンクはどんどん踏んでいけばよいと思う。芋づる式に関連する情報が得られていく……はず。

とまあ、昨日あたりのツイート


をブログに書き起こしてみたんですけど、どんなもんでしょうか……。