ほんっとにはじめてのHTML5とCSS3：（ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて

（ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて

最終更新日：2018年04月10日　（初回投稿日：2018年04月10日）

今回は「ちょっとメモ」。
もう周知のことで今さら感はあるんですが、CSS 3（Cascading Style Sheets, level 3）という名前の仕様は無いんです。
これは、それ以前の CSS 2.1 までと区別するために呼んでる「通称」のようなもの。
CSS 2.1の後は、各仕様はモジュール分けされ、それぞれにレベルが付いたものに変わりました。

そこで、どんなモジュールがあるか、どのプロパティがどのモジュールに入っているか の調べ方や、仕様の進捗状態（まだ草案なのか、勧告候補か勧告か）の調べ方などについて、今回はメモっておきます。

本日のINDEX

CSS2.1までと区別するために「CSS3」と呼ばれる

W3C から、1996年に「CSS 1」が勧告され、1998年には「CSS 2」、2011年には「CSS 2.1」が勧告されました。
「CSS 2.1」までは、たくさんのルールを全部ひとまとめにしていました。
（そのせいか、CSS 2.1 は 2002年の草案から勧告までに9年もかかったそうです）

CSS 1 は正式名は Cascading Style Sheets, level 1。
CSS 2 は Cascading Style Sheets, level 2 (CSS 2) 。
CSS 2.1 は Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) という名称でした。
（CSS 1、CSS 2 は廃止されています。）

その後 CSS でできることが格段に増え、もうひとまとめに標準化するのはムリ、全部が足並み揃えて正式な仕様になるには時間がかかる。ということで、これ以降は CSS 2.1 を元に各モジュール（Module）に分けて、それぞれ別々に標準化するようになりました。

フォントのためのCSSなら「Fonts Module」、マージンやパディングなどのボックスモデルのためのCSSは「Basic Box Model」と言った具合です。

新しいCSSモジュールは、CSS 2.1 仕様と矛盾しないように、CSS 2.1 をコアにして定義されていくことになり、「○○ Module Level 3」という名前が付きます。

CSS 2.1 までには存在しなかったものは「Level 1」から開始するんだって（Masking や Flexible Box とか）。まだレベルが付いていない仕様もあります（Transitions とか）。

これらの新しいCSSモジュール群を、CSS 2.1 までの仕様と区別するために CSS 3 と呼んでいるんだって。

W3C の CSS Snapshot 2017（2017年時点のメモ）では、下のように記載されています。
今後、CSS 4 になることは無いんだそうです。

CSS Level 4 and beyond
There is no CSS Level 4. Independent modules can reach level 4 or beyond, but CSS the language no longer has levels. ("CSS Level 3" as a term is used only to differentiate it from the previous monolithic versions.)
直訳：CSS Level 4 以降
CSSレベル4はありません。独立したモジュールはレベル4以上になれるけど、CSSという言語にはレベルが無いので。（用語としての「CSSレベル3」は、以前のひとまとまりのバージョンと区別するためにのみ使われます。）

CSSの仕様書の一覧（プロパティ別・モジュール別）

で、どのプロパティが何のモジュールに入っているか、知る必要がありますね。

プロパティ別の一覧はこちら。
所属するモジュール名がわからない時はここからが便利です。
List of CSS properties, both proposed and standard

ここでプロパティ名をブラウザでページ内検索すれば、そのプロパティが入っているモジュール名がわかります。

ブラウザでページ内検索する方法は、
Win は「Ctrl + F」
Mac は「Command + F」
で検索バーを出して、テキストを入力すればOK。

モジュール名がわかってる場合は、こっちを見たほうが早い。
これは、標準化作業への参加を促すページだけど、一応「What's new?」とかで、最新の状況（どのモジュールの作業段階が上がったとか）を知ることができます。
ここで、自分が見たいモジュール名でブラウザでページ内検索すればイイ感じ。
W3C CSS current work

モジュールの進捗状態（草案とか勧告候補とか勧告とか）

上記の表に、WD や CR などの略語と色分けがありますが、これは標準化作業の「進捗状態」を示しています。

略語のフルネームはこちら。赤から緑（上から下）の方向で作業が進んでいきます。

W3C は「CR（勧告候補）」まで進んだ仕様を使うように推奨しています。
ただ現実的には、「CR」なのに主要ブラウザが未対応で使えない場合もあります。
また「CR」まで来てから WD（草案）に戻っちゃうコトもたまにあるので要注意。

ブラウザの対応状況は Can I Use でチェック

W3C での作業の進捗状況より、ブラウザの対応状況のほうが「使えるかどうか」の大事な目安です。
そこで役に立つのが Can I Use 。
名前もそのまんま「使えますか？」ですし、このサイトはほんっと便利。

サイト上部の「Can I use 」のあとに調べたい言葉（名前の一部でもヒットする場合あり）をタイプすれば、ブラウザの対応状況が出ます。（あまりにもマイナーだとヒットしないけど）

モノによっては、「ベンダプレフィックスが必要」とか、「このブラウザはこの値には未対応」とか、大事な情報もゲットできます。

今はもう無いプロパティはこちらでチェック

プロパティによっては、一度「草案」などに登場していたけど、標準化作業の途中で消えていくものもあります。W3C でそれを確認するならこちら。
Old proposed properties（過去に提案されたプロパティ）

古めの資料を参考にしたときなど、Can I Use で調べてもヒットしないモノは、無くなってる可能性もあるのでココで調べるとイイかも。

（おまけ）世界でよく使われるプロパティ

世界でよく使われるプロパティのリストを、マイクロソフトが公開してくれています。Bingのクローラーが収集した情報を使ってるそうです。
自分が使おうとしているプロパティのシェアを、ある程度知ることができます。
CSS usage on the web platform - Microsoft Edge Development

シェアが非常に少なくても、「ショートカットプロパティのほうがよく使われるから」といった理由だったりするので、このサイトを見てすぐに「シェアが少ない=使えない」と決めるのはアレですけど。
たまに見ると、新しいプロパティのシェアが上がってたりして興味深いです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-04-10（Tue）│
投稿日：2018-04-10（Tue）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿