この雑な文章は、Gaiax Advent Calendar 2015 の9日目の記事です。

こんにちは、図書委員長です

私は Gaiax という会社で、図書委員長を名乗りながら Rails エンジニアをしています。

最近 W3C CSS Module 仕様書もくもく会に参加して「仕様書読むのっていいな」と思ったので、図書委員長らしく仕様書を読みます。

CSS 業界では素人ですが、よろしくお願いします。

W3C とは？ W3C 仕様書とは？

W3C (World Wide Web Consortium) について

W3C は、Web 技術の標準化を進めている国際的な非営利団体です。
HTML や CSS といった Web 技術の仕様を議論する場を提供していて、仕様書も W3C が作っています。

W3C が「仕様決まったよ！」と宣言することを W3C 勧告といいます。

W3C 仕様書の生まれてから勧告まで

仕様書を読む前の前提知識として、W3C による勧告までの過程について軽く触れておきます。

W3C では、常に新たな Web 技術の仕様検討が進んでいます。
検討の結果はすべて技術文書(Technical Report)、通称TRとして公開されています。
どんな TR も、まずは作業草案から始まって仕様が議論され、仕様が完全に決まって正式に公表されると、勧告となります。

W3C が現在公開している Technical Report 一覧

勧告までには「作業草案(Working Draft)→最終草案(Last Call Working Draft)→勧告候補(Candidate Recommendation)→勧告案(Proposed Recommendation)→勧告(Recommendation)」という手順を踏みます。
W3C の各作業グループである Working Group により草案が発行され、何度も改定されながら W3C 勧告に向けて進んでいきます。

勧告されたTRは、W3C の幾度とないレビューとテストを通過した仕様書と見なされ、標準技術として国際的に認められることになります。
一方で、勧告には至らなかった TR は Note として参考に公開されます。

このあたりについては、HTML標準仕様などを決める、W3Cによる勧告のプロセスとは？という記事が詳しく説明されています。

W3C CSS 仕様書を読む！

CSS Working Group について

CSS Working Groupは、W3C の CSS 作業グループです。つまり、次の CSS の仕様を議論したり草案を出したりしているグループですね。
CSS Working Group から、CSS の仕様書を読むことができます。

現時点での CSS 仕様をまとめた、CSS Snapshop 2015 の Editor's Draft (仕様策定者による草案) が出ています。
@momdo_ さん作の、非公式ですが優秀な日本語訳もあります。

CSS 仕様書のお約束

実は、CSS の仕様にはレベルやモジュールという概念があり、たくさんのドキュメントから成り立っています。

CSS の仕様における「レベル」とは、バージョンに似ています。CSS におけるレベルは上位互換、すなわち上位レベルが下位レベルの機能を備えます。
よく聞く CSS3 とは、CSS Level 3 を指しています。今は CSS Level 4 まで出ています。

CSS Level 1 (CSS1): 1996年12月勧告
CSS Level 2 (CSS2): 1998年5月勧告
CSS Level 2 revision 1 (CSS2.1): 2011年6月勧告
CSS Level 3 (CSS3): 一部は勧告済、作業草案もちらほら
CSS Level 4 (CSS4): 作業草案段階が多い

次に「モジュール」です。CSS の仕様書のタイトルには、よく Module という言葉が出てきます。

CSS Level 1では、すべての仕様が一つの文書に収まっていました。
が、CSS Level 3 以降、CSS Working Group は単一の仕様を決めるのではなく、仕様をモジュール(仕様の一部分を定義したもの)に分割して決めていくアプローチを採用しています。

CSS3 ではCSS2.1を中核とし、新たな機能追加や改良をモジュールとすることで実現されていました。CSS4では完全にモジュール化されており、CSS4 と言うときは CSS Level 4 モジュールの総称を指しています。

CSS のレベルについて | CSS Snapshop 2015 #css-levels
CSS 仕様の進行一覧 | CSS Current Work

読みたい仕様書の見つけ方

いよいよ読みたい仕様書を選びます。

特定の Web 技術に興味があるのなら、W3C の Technical Report 一覧から技術分野でソートすることができます。

Web 技術のキーワードを選ぶと、勧告済の仕様書(Recommendation)や参考文書(Note)をまとめた Complated Work、勧告の前段階である Drafts、今は推奨されない Obsolete に分類して表示してくれます。

新しいもの好きなら、日付でソートしてみるとよいでしょう。直近に更新された仕様書から見ることができます。

W3C には「少なくとも3ヶ月に一度は更新すること」という決まりがあるため、かなりの頻度で更新があります。
試しに、さらっと眺めて目についたものをリストアップしてみました。聞いたことがある技術も多いのではないでしょうか。

2015-12-03 CSS Custom Properties for Cascading Variables Module Level 1 (Candidate Recommendation)
2015-12-03 CSS Will Change Module Level 1 (Candidate Recommendation)
2015-11-19 W3C DOM4 (Recommendation)
2015-10-18 HTML 5.1 (Working Draft)
2015-10-06 Shadow DOM (Working Draft)
2015-09-24 Web Workers (Working Draft)

私のように CSS が好きなら、CSS Working Group の CSS Current Workもおすすめですが、基本は W3C で公開されている情報と同じです。同じに見えました。
Upcoming (次に来る段階) が分かったり、少ないですが Notes (補足資料) もあったりしますが、あまり情報量は変わらないかもしれません。

ポイントとしては、日頃から使っている CSS プロパティの仕様書を探してみるのが良いです。
仕様がイメージしやすく、また既に勧告済の仕様書であれば日本語訳も進んでいるため、かなりハードルが下がります。
ハードルは下がっても HTML/CSS に対する新しい視点が身に付くため、初めはここからがおすすめです。

日本語訳された仕様書は W3C 仕様書などのまとめ【保存版】などで探してみるといいかもしれません。

一人では不安なら、W3C CSS Module 仕様書もくもく会に参加してみるのも一つの手ですね。
その場で質問すればどなたかが答えてくれるので、初心者でも大丈夫そうな雰囲気でした。

W3C CSS 仕様書のススメ

Web ブラウザの気持ちになれる

仕様書を読むと、Web ブラウザの気持ちになれます。本当です。

いつも何気なく書いている CSS のプロパティが、どのようにブラウザで処理されるべきか。描画されるべきか。仕様書はそんな視点で書かれています。
例えば CSS Syntax Module Level 3では、CSS の構文解析処理が詳細に書かれていて、純粋に面白いと感じます。CSS の新たな側面を垣間見ることができます。

HTML/CSS の正しい仕様を知ることができる

どんな言語でも、最も確実な参考文献はソースコードでしょう。HTML/CSS においては、それが仕様書になります。
「HTML/CSS を学ぶならまず CSS2.1 の仕様書を読め」という人もいるくらいです。

仕様のすべてを把握するのはとても難しいですが、CSS2.1 の仕様書だけでも、その設計思想を垣間見ることになります。
それは CSS における「正しくあるべき姿」を知ることに繋がります。

Web 技術としての最先端を知ることができる

もう一つの良さは、最先端の草案を読むことができることです。
CSS であれば文書は英語でも、コードだけで何をしようとしているのかが分かります。

最近の CSS は、AltCSS が普及したこともあり、いろんな新しい文法が提案されてきています。
その文法が標準化されたら…という未来を想像ができるのも、とても楽しいことです。

無料で読めて、かつ英語の勉強になる

何より、仕様書は無料で公開されています！いつでも誰でも読めるんです！
英語とはいえ、出現する単語は見知ったものばかりなので、よい勉強にもなると思います。

最後に

今回は W3C CSS 仕様書の読み方をご紹介しましたが、CSS に限らず、自分の好きな技術の仕様策定がどのように行われているのかを調べてみると、より深い知識や理解を得るきっかけになります。

CSS の場合は、それがすべて無料で公開されていて、日本語訳も多くて、一方 CSS という言語自体は簡単なので、より仕様まで深めやすいと思います。
また、仕様が決まったときの影響範囲が大きく、このところ新しい動きも多いので、わくわくできます。

興味があれば、ぜひ W3C CSS 仕様書を一緒に読みましょう！

以上、素人の見解です！
明日は Gaiax の元気なインターン生こと @fukufukumarimo さんです。よろしくお願いいたします！