CSS3だとかCSS4だとかって一体何？今自分が使ってるCSSはどれ？というのが気になって、CSS (Cascading Style Sheets) の歴史を色々調べてみました。
CSS1の登場から現在に至るまでのCSSの進化を知り、現在のモジュールの仕組みを理解しておくと、普段なんとなく使っていたCSSの様々な記述も身近に感じることができるようになります。
また、コーディング時の無駄な疑問が少なくなり、参考にすべき信頼できるドキュメントを探しやすくなります。
はじめに
CSSとは
Cascading Style Sheets（カスケーディング・スタイル・シート）の略称。
HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
1994年にWWW生誕の地であるCERNに勤務するホーコン・ウィウム・リー氏により提唱された。
引用：wiki
W3Cと勧告プロセスについて
CSSの仕様書はW3Cによって公開されています。
それらの仕様書には「勧告プロセス」というものがあり、このメモでも「勧告」という言葉や、W3Cが公開している仕様書への参考リンクが頻繁に出てきます。
「W3C」や「勧告」についての知識が曖昧な方は先に以下をご覧ください。
CSSのLevel遷移の歴史
CSSの仕様はLevel(レベル)という段階を持っています。バージョンと表現している人もけっこういますが、正式には「Level」です。
例えば、 CSS1とはいうのは「CSSのバージョン1」ではなく、「 Cascading Style Sheets, level 1」の略称です。
CSS1
CSSの初期段階。 1996年12月に勧告されています。
CSS1で実装されていた主な仕様をまとめてみました。（参考資料： Cascading Style Sheets, level 1）
CSS1の時点で実装されていたプロパティ
- フォントプロパティ
- 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', 'font'
- カラー及び背景プロパティ
-
- 'color'
- 'background' ('background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position',)
- テキストプロパティ
- 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'text-align', 'text-indent', 'line-height'
- ボックスプロパティ
-
- 'margin' ('margin-top', 'margin-right', 'margin-bottom', 'margin-left')
- 'padding' ('padding-top', 'padding-right', 'padding-bottom', 'padding-left')
- 'border-width' ('border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width')
- 'border' ('border-color', 'border-style', 'border-top', 'border-right', 'border-bottom', 'border-left')
- 'width', 'height'
- 'float', 'clear'
- 分類プロパティ
-
- 'display'
- 'white-space'
- 'list-style' ('list-style-type', 'list-style-image', 'list-style-position')
CSS1で実装されていた擬似要素と擬似クラス
- アンカ擬似クラス（ :link, :visited, :active ）
- 'first-line'擬似要素
- 'first-letter'擬似要素
CSS1で実装されていたセレクタ構文
- LI {...}
- UL LI {...}
- UL OL LI {...}
- LI.red {...}
- UL OL LI.red {...}
- #x34y {...}
そのほか、@import や important! も CSS1ですでに実装されていたようです。
CSS2(CSS2.1)
CSS1 の上位互換で、幾つかの概念の追加・拡大・改訂が行われたものです。1998年5月に勧告されています。
表示媒体によって自動的にスタイルシートを変更できるようにし、それに附随した音声ブラウザや印刷媒体への対応が最も大きな変更点です。
しかし、CSS2仕様書の定義が不明瞭であったため、各ユーザーエージェントのCSS2実装に非互換が生じてしまいます。
そこで、曖昧な記述を明確にするといった改訂が行われ、2011年6月に勧告されたのがCSS2.1です。
CSS2で策定されていながら長い間実装が行われなかったもの、displayプロパティのrun-in値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。
現在では、CSS2.1を基本仕様と見なしています。
* CSS2.2でいくつかの修正点が発表されています。
CSS2および2.1で追加・修正されたもの
CSS1から追加されたものや修正された主な機能についていくつかピックアップしてみます。
参考資料：Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 日本語訳
- ベンダー固有の拡張（ベンダープレフィックス）
- 新しいセレクタ構文(*や E > F E + F, E[foo]など)
- 擬似クラスと擬似要素(:first-child,:hover,:focus,:lang,:before,:after)
- inherit値
- メディアタイプ（@media規則）
- 'display'プロパティの値(inline-blokやtableなど)
- 位置決めスキーム('position'、'top'、'right'、'bottom'、'left')
- 幅の最大値と最小値：'min-width'および'max-width'
- 高さの最大値と最小値：'min-height'、'max-height'
- はみ出しと切り抜き（'overflow',clip）
- 可視性（'visibility'）
- 生成コンテンツ（'content'）
- ページメディア（@page系）
- ユーザーインターフェイス('cursor'や'outline')
- 聴覚スタイルシート（'volume''speak''azimuth'など）
CSS3
CSS3からはCSS 2.1を中核として、新たな機能の追加や改良を モジュールと呼ばれる小さなコンポーネントに分割して実装しています。
つまり、CSS3自体が存在しているわけではなく、それぞれのモジュールが独立して勧告に向けて規格策定されています。新しいモジュールも随時追加されています。
CSS3で追加された機能とそのモジュールの例
CSS3で追加された機能がどのモジュールに分類されているのか、いくつか例を挙げてみます。
- アニメーション - CSS Animations Level 1
- 変形(transform) - CSS Transforms Module Level 1
- フレックスボックス - CSS Flexible Box Layout Module Level 1
- 背景グラデーション - CSS Image Values and Replaced Content Module Level 3
- 透明度 - CSS Color Module Level 3
いずれも「CSS3で追加された新機能」系の記事でよくまとめられてますが、実はそれぞれ別のモジュールで管理されていたのですね。
それぞれの勧告プロセスの策定状況も異なります。特に、Transform Module なんかはまだ草案（WD）と書かれていて驚きました。
CSS4
CSS4というのは存在しませんが、各モジュールのLevel4の総称として、便宜上CSS4と表記していることがあるようです。
CSSの各モジュールに関する技術文書の検索・一覧ページについて
W3C が公開している技術文書はW3C technical reports indexにて全て検索することができます。
その他にも、以下のようなCSSに関する技術文書の情報一覧ページがあります。
- CSSの各モジュールの技術文書の勧告プロセス近状の一覧：「CSS current work」
-
CSSの各モジュールの技術文書に関する詳細情報一覧：「Descriptions of all CSS specifications」
- CSS関係のEditor's Draftの一覧ページ：「CSS Working Group Editor Drafts」
もしくは、CSS全体を構成する仕様の概要についてはCSS Snapshotという Working Group Note にまとめられているので、そちらを参考にするのも良いかと思います。
プロパティごとのブラウザ対応状況を調べるには
CSSの技術文書の作成に関してはW3Cによってモジュール毎に進めれらていることはすでに述べた通りですが、具体的な各プロパティの実装はブラウザ毎によって異なります。
「どのプロパティが現在どのブラウザに対応しているのか」というのを調べる時に便利なのが、「Can I Use...」というサイトです。
「Can I Use...」に関してはおそらく皆さんお馴染みだろうというのと、今回の主旨からは少し逸れてしまうということもあるので、ここでの詳しい説明は省きます。
CSSの新しい技術を試す際には、仕様・規格に関してはそのモジュールの技術文書を参考にし、実際にどの程度ブラウザで使用できるのかを「Can I Use...」でチェックする、という流れを意識してみて下さい。
おわりに
いかがだったでしょうか。
W3Cの公開文書も参考にしつつ、CSSについて詳しく調べてみました。
CSSの歴史や現状のモジュール形式について、W3Cとの関係、公式な仕様書の確認方法など、今まで知らなかったことも多く、個人的にはすごく勉強になりました。
誰かの参考になれば幸いです。
