社内勉強会用の資料として作成したものです。
厳密さよりも、感覚的な分かりやすさを重視しています。
年表を作るための補足を細々と調べてみました。
CSSとは
見た目を表現するための言語で、CSSとはCascading Style Sheetsの略です。
主にWebページを装飾するために使われています。
Webページを装飾する唯一の方法といっても過言ではないでしょう。
初めてリリースされたとき👶
1996年12月17日に「Cascading Style Sheets, level 1」という名前でリリースされました。
HTML1.0が公開されたのは1993年でした。
ちなみに当時主流のブラウザはInternet Explorer、Netscape Navigatorでしたが、両ブラウザとも部分的にしか対応しておらず、普及には至りませんでした。
IEがCSS1をほぼ完全にサポートするのはこの4年後の2000年になります。ただし普及するのはもっと先になります。
誰が作ってるの？
World Wide Web Consortium(W3C)が取りまとめて勧告しています。
加盟団体やスタッフを含めたCSS Working Groupなどが仕様について議論したり草案を出したりしています。
あなたが仕様策定に参加したい場合、GitHubからIssueに参加するのが手っ取り早いでしょう。
関係団体
次のような団体が仕様作成に携わっている。
World Wide Web Consortium (W3C)
Webの技術の標準化を進めるために発足された。
W3Cの会員は営利企業、非営利団体、大学、政府機関であり、個人会員は受け付けていない。
Web Hypertext Application Technology Working Group (WHATWG)
Apple、Mozilla、Operaの開発者たち（個人）により立ち上げられた。
W3C単体で決める仕様では主観が強く、実態にそぐわない仕様が出てきた。
それに対し物申す団体である。
HTML5の仕様策定ではW3Cと協力関係になりました。
リリースされるまでの手順
- 初期草案(First Public Working Draft[First Public WD])
- 作業草案(Working Drafts[WD])
- 勧告候補(Candidate Recommendations[CR])
- 勧告案(Proposed Recommendation[PR])
- 勧告(W3C Recommendation[REC])
- 修正勧告(Amended Recommendation)
上記のような手順を経て勧告されます。
ブラウザは作業草案ぐらいのタイミングでブラウザに実装します。
なので早い段階から我々が利用できるようになります。ただし、あくまで草案なので消えることもあります。
フライングで実装してしまったがゆえに草案からは消えたが、ブラウザの機能からはなかなか消せないという事例もありました。
CSSバージョン
CSSにもバージョンがあります。
level○○といったネーミングです。
しかしLevel3からはモジュール単位で仕様が決まっており、CSS3以前とは括り方が違うので「CSS3と言うのは間違っている」と言う人もいる。
Cascading Style Sheets, level 1
1996年12月にCSS1が勧告。
特に意味はないのだろうが、このバージョンだけSheets,とコンマが付いている。
Cascading Style Sheets level 2
1998年5月にCSS2が勧告。
Cascading Style Sheets Level 2 Revision 1
CSS2の仕様が不明瞭だったため、対応が異なり非互換性が生じた。
そのため新たに2011年6月にCSS2.1を勧告した。
CSS3
CSS3以降はCSS2、CSS2.1を元に新たな機能などをモジュールとし、各項目ごとに勧告するように変更された。
なのでCSS3は存在しないが、便宜上level3の総称としてCSS3と読んでいる。
などCSS3と呼ぶ場合、Media Queriesのような新機能も含まれる。
最初は2012年6月にMedia Queriesが勧告された。
2021年現在も一部のモジュールは勧告へ至っていない。
color: red;はCSS2.1で、@media (max-width:480px) {}はCSS3となる。2つ合わせて最新のCSSの仕様となるイメージ。
CSS4
2013年5月に最初の草案が発表された。
現在勧告されたモジュールはないが、一部のブラウザでは先駆けて実装されている。
Cascading Style Sheets Level 2 Revision 2
2016年4月に草案が発表された。
CSS2.2もCSS3と同様CSS2、CSS2.1を元にされている。
将来的にはCSS2.2 + CSS3を見れば良い。
CSS5
2020年7月に最初の草案が発表された。
Level3, Level4, Level5と同時に勧告されていない仕様が入り乱れていると、便宜上でもCSS5と呼ぶのは不都合である。
近年新たに出たCSS界隈の変動
メタ言語
CSSの使いづらさから書きやすいように書き、それをコンパイルしてCSSへ変換しようというものが登場してきた。
Sass
CSSの拡張言語として開発された。
ブラウザはSassを読み取る力はなく、コンパイルが必要である。
Sassには2種類の書き方があり、SASS記法とSCSS記法がある。（Sass言語のSCSS記法のようなイメージ）
SCSS記法を用いるのが一般的である。
SCSSは現在CSS開発のデファクトスタンダードとなっている。
昨今ではプレーンなCSSを書いたことがないエンジニアがいるほどである。
LESS
Sassに触発され作成された言語。
一時期、一部のCSSフレームワークで採用されるなどし、流行の兆しを見せたが、現在では見かけることは殆どない。
Stylus
Node.js向けに開発された。
Sassのようなインデント構文とCSSのような構文をサポートしている。
現在は更新されていません。
CSS設計手法
OOCSS、SMACSS、BEMといった設計思想を用いるのが一般的である。
設計手法が一般に流通するようになったのは2013年頃。
時代的にメディアクエリーが登場して、いよいよ設計しないと対応できないということではないかと思っています。
CSSフレームワーク
BootStrap、Foundationなどをはじめ、数多あるCSSフレームワークが誕生した。
また最近tailwindcssというUtility firstという設計手法を用いたCSSフレームワークが登場した。
年表
1993年: HTML 1.0, HTML+
1994年: W3C設立
1995年: HTML 2.0
1996年: IE3リリース
1996年12月: CSS1が勧告
1997年: HTML 3.2
1997年: IE4リリース
1997年: HTML 4.0
1998年5月: CSS2が勧告。
1999年: HTML 4.01
1999年: IE5リリース
2000年: IE5.5リリース
2001年: IE6リリース
2004年: WHATWG結成
2006年: Sassリリース
2006年: IE7リリース
2009年: IE8リリース
2009年: LESSリリース
2011年: IE9リリース
2011年: Stylusリリース
2011年6月: CSS2.1を勧告
2011年: Foundationリリース
2012年6月: Media Queries（CSS3）が勧告
2012年: IE10リリース
2013年5月: Media Queries Level 4（CSS4）の草案
2013年: IE11リリース
2013年: OOCSS
2013年: SMACSS
2013年: BootStrap v1.0.0, v2.0.0, v3.0.0リリース
2014年: HTML5
2015年: BEM
2016年4月: CSS2.2を草案
2016年: HTML5.1
2017年: HTML5.2
2018年: BootStrap v4.0.0
2019年: tailwindcssリリース
2020年7月: Media Queries Level 5（CSS5）の草案
2021年: BootStrap v5.0.0
※間違っていたら編集リクエスト下さい。
感想
ざっくり年表にしてみると、CSSの歴史は浅く、しかも発展したのはここ10年程度だと言うことが分かりました。
CSSを調べていてTabelレイアウトという力技を思い出しました。これは10年以上前の手法です。
メールでは未だに使ったりするらしいですが...
興味ある若い方は調べてみてください。（知っても今後の役に立ちません！）
調べていて面白かった記事
参考
Cascading Style Sheets, level 1
【CSSとは】CSSの構造や記述方法・基本的なプロパティを紹介！ | Webmedia
CSS current work & how to participate