CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。ホームWEMOについて人気記事一覧フロントエンドHTMLCSS/SassJavaScriptSVGバックエンドPHPサーバーWordPress基礎知識カスタマイズプラグインちょいメモ集CSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。歴史を色々調べてみました。CSS1の登場から現在に至るまでのCSSの進化を知り、現在のモジュールの仕組みを理解しておくと、普段なんとなく使っていたCSSの様々な記述も身近に感じることができるようになります。コーディング時の無駄な疑問が少なくなり、参考にすべき信頼できるドキュメントを探しやすくなります。Sheets(カスケーディング・スタイル・シート)の略称。要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。1994年にWWW生誕の地であるCERNに勤務するホーコン・ウィウム・リー氏により提唱された。引用:wikiW3Cと勧告プロセスについてCSSの仕様書はW3Cによって公開されています。それらの仕様書には「勧告プロセス」というものがあり、このメモでも「勧告」という言葉や、W3Cが公開している仕様書への参考リンクが頻繁に出てきます。「W3C」や「勧告」についての知識が曖昧な方は先に以下をご覧ください。あわせて読みたいW3C勧告とはなんぞ?Web標準化とW3Cにおける勧告プロセスについて今回はWebデザイナーやフロントエンジニアにとっても基礎的かつ重要な存在、「W3C」について調べてみました。「HTML5がW3Cの勧告となりました」のような表現を見たこと...CSSのLevel遷移の歴史CSSの仕様はLevel(レベル)という段階を持っています。バージョンと表現している人もけっこういますが、正式には「Level」です。CSS1CSSの初期段階。1996年12月に勧告されています。CSS1で実装されていた主な仕様をまとめてみました。CSS1ですでに実装されていたようです。上位互換で、幾つかの概念の追加・拡大・改訂が行われたものです。1998年5月に勧告されています。表示媒体によって自動的にスタイルシートを変更できるようにし、それに附随した音声ブラウザや印刷媒体への対応が最も大きな変更点です。CSS2仕様書の定義が不明瞭であったため、各ユーザーエージェントのCSS2実装に非互換が生じてしまいます。そこで、曖昧な記述を明確にするといった改訂が行われ、2011年6月に勧告されたのがCSS2.1です。CSS2で策定されていながら長い間実装が行われなかったもの、displayプロパティのrun-in値のように、複数のユーザーエージェントで相互運用性を確保できなかった機能は削除されている。現在では、CSS2.1を基本仕様と見なしています。CSS2.2でいくつかの修正点が発表されています。CSS2および2.1で追加・修正されたものCSS1から追加されたものや修正された主な機能についていくつかピックアップしてみます。モジュールと呼ばれる小さなコンポーネントに分割して実装しています。CSS3自体が存在しているわけではなく、それぞれのモジュールが独立して勧告に向けて規格策定されています。新しいモジュールも随時追加されています。CSS3で追加された機能とそのモジュールの例CSS3で追加された機能がどのモジュールに分類されているのか、いくつか例を挙げてみます。3いずれも「CSS3で追加された新機能」系の記事でよくまとめられてますが、実はそれぞれ別のモジュールで管理されていたのですね。それぞれの勧告プロセスの策定状況も異なります。なんかはまだ草案(WD)と書かれていて驚きました。CSS4CSS4というのは存在しませんが、各モジュールのLevel4の総称として、便宜上CSS4と表記していることがあるようです。indexにて全て検索することができます。その他にも、以下のようなCSSに関する技術文書の情報一覧ページがあります。まとめられているので、そちらを参考にするのも良いかと思います。プロパティごとのブラウザ対応状況を調べるにはCSSの技術文書の作成に関してはW3Cによってモジュール毎に進めれらていることはすでに述べた通りですが、具体的な各プロパティの実装はブラウザ毎によって異なります。Use...」というサイトです。Use...」に関してはおそらく皆さんお馴染みだろうというのと、今回の主旨からは少し逸れてしまうということもあるので、ここでの詳しい説明は省きます。Use...」でチェックする、という流れを意識してみて下さい。おわりにいかがだったでしょうか。W3Cの公開文書も参考にしつつ、CSSについて詳しく調べてみました。CSSの歴史や現状のモジュール形式について、W3Cとの関係、公式な仕様書の確認方法など、今まで知らなかったことも多く、個人的にはすごく勉強になりました。誰かの参考になれば幸いです。@ddryo_loosホームフロントエンドCSS/SassCSS3・CSS4とは?CSSの歴史と現状、Level(レベル)の遷移について調べてみた。