📖

CSS大解剖 1日目: 「仕様書」

に公開
CSS
CSS 3
W3C
tech

本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。

CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画1日目です。今日のテーマは「仕様書」です。

仕様書

CSSはWebの標準化団体であるW3Cによって標準化され、各ブラウザベンダによって実装されている規格です。

標準化して挙動を仕様書として書き起こすことによって、Webブラウザ間の相互運用性が高まり、Web開発者も互換性の高い記述を心掛けてCSSを書くことができるようになります。

とはいえ、仕様書と実装の関係は必ずしも一方向的ではありません。「仕様書に記載される → 実装される」というシンプルな順番であるとは限らないのです。実装されたものにあわせて仕様が修正されることもありますし、仕様として書かれながらなかなか実装されないこともあります。また、インターネットやWebの仕様策定においては、仕様策定に先立って実装を行うことでその有効性を検証することは一般的であり、CSSの策定プロセスでもこのことは考慮されています。

レベル

CSSの仕様のバージョンは「バージョン」という言葉ではなく「レベル」という言葉で説明されます。これはCSSが原則として破壊的変更を含まないことを意図しているようです。semverの言葉で言えば、CSSのバージョンは 1.LEVEL.REVISION であるとも言えるでしょう。

総体としてのCSSはLevel 3まであります。Level 4は存在しません。

  • Level 1: 1996年リリース。font-size, color, background, margin など。
  • Level 2 (Revision 0): 1998年リリース。このバージョンは野心的でありすぎたため実質的に放棄され、これを縮小した実質非互換のCSS2.1がリリースされました。 (この経緯はES4からES5への流れと似たものがありますね)
  • Level 2, Revision 1: 2011年リリース。「CSS2」は一般的にこちらのリビジョンを指します。
    • CSS 2.2というドラフトも公開されていますが、これは最新のCSSからリンクされていないため、おそらく放棄されているのではないかと思います。
  • Level 3: Level 3は特定のバージョンを指さず、モジュール化された最新のCSSの総体を指します。したがって、現代においてはCSS3とCSSはほぼ同義です。

モジュール

現代のCSS (CSS3) では、全体で統一的なバージョン管理は行われていません。

CSS3はCSS2.1をベースに、「新機能」や「CSS2.1内の機能の改定」を独立に定義したモジュール[1]の集合体です。各モジュールは独立にレベルを持ちます。レベルは歴史的経緯から3から始まっているものもありますが、現在は1から始める方針のようです。

図: CSS3はモジュールの集合体である

したがって、現在でも最新のモジュールで上書きされていない限り CSS 2.1の記述は依然として有効であり、必要に応じて参照する必要があります。

スナップショットと安定性

CSSの各モジュールは独立に開発され、それぞれが複数のレベルを持ち、各レベルの安定性もまちまちです。その全てが含まれているページが以下です。

しかし、これだけでは現在の「安定的な最新CSS仕様」を俯瞰することが困難になってしまいます。そこで、W3Cは毎年、各モジュールの安定度を評価してまとめた「スナップショット」を用意しています。

このスナップショットの最新版が、仕様書のトップページとして掲載されている "CSS" です。

スナップショットには安定度の異なる3種類の集合が定義されています。

図: 仕様と実装の両方が揃ってはじめて公式定義となる

注意すべき点として、 Web開発者にとって広く利用可能な機能だと思われているものであっても、仕様上は公式定義に含まれていない場合があることです。これには大きく2つの理由が考えられます。

  • ブラウザによる実装が順調に進んでいるが、仕様の策定がそれに追いついておらず仕様の安定性が足りていない。 (CSS Gridなど)
  • 元々CSS2で規定されているものがモジュールとして整理されている途中であり、従来の定義はCSS2にある。 (Pseudo Elementsなど)

本シリーズで興味のあるテーマの中にも、公式定義に取り込まれるほど仕様策定が進んでいないものが多数あります。その場合はCSSの公式定義にまだ含まれていない不安定なモジュールも積極的に参照していきます。

ドラフト

関連する仕様

ドキュメント定義

実はCSSは、HTML以外の文書に対しても適用可能なように記述されています。とはいえ、実際にはHTMLに近い形式の文書に対して適用されることがほとんどでしょう。

文書形式に特有のルールは、一部を除いてCSS側ではなくHTML側に記述されています。

  • HTML はHTMLドキュメントの意味論を定義しています。
    • 特に、15 Rendering にCSSの適用方法が規定されています。
  • SVG および MathML はHTML文書に埋め込むことができます。

また、これらの形式の構造はDOMに規定されているため、DOMの理解も重要になります。特に、CSSの一部であるCSSOMはDOMを参照しています。

まとめ

  • 最新のCSSは "CSS3" と呼ばれるが、これはモジュール化された規格群の安定最新版の総称である。
脚注

  1. Webバンドラ向けのコミュニティー仕様であるCSS ModulesやHTMLの規定であるCSS Module Scriptとは関係ありません。これらはスタイルシートをモジュール化する仕様ですが、本稿でいうモジュールは仕様自体のモジュール化です。 ↩︎

Discussion