CSS3 とは、 Cascading Style Sheets 言語の最新の発展版で、 CSS2.1 の拡張を目的としています。 CSS3 は、角丸、影、グラデーショントランジションアニメーションなどの長く待望されていた数多くの新機能、また、段組みフレックスボックス、グリッドレイアウトなどの新しいレイアウトをもたらします。実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかすべきです。

モジュールと標準化プロセス

CSS レベル 2 が勧告ステータスに至るまで、 2002 年 8 月から 2011 年の 6 月までの 9 年間が必要でした。これは、いくつかの 2 次的な機能が仕様全体を堰き止めたためです。問題のない機能の仕様の標準化を加速させるために、 W3C の CSS 作業グループは、北京ドクトリンと呼ばれる決定に従い、 CSS をモジュールと呼ばれる小さなコンポーネントに分割しました。現在、それぞれのモジュールは言語の独立したパートで、それぞれのペースで標準化に向かっています。いくつかのモジュールが既に W3C 勧告になっている一方で、まだ早期の Working Draft であるものもあります。必要性が認められた時は、新しいモジュールも追加されています。

CSS Modules and Snapshots as defined since CSS3 正式には、CSS3 標準自体は存在しません。 それぞれのモジュールは独立して標準化されています。標準の CSS は、完了したモジュールによって改正および拡張された CSS2.1 で成り立っており、すべてが同じレベルの番号である必要はありません。各時点での、 CSS 標準のスナップショットは、 CSS2.1 と成熟したモジュールを列挙することで定義できます。

W3 コンソーシアムは、2007, 2010, 2015, 2017, 2018 のように、定期的にそのようなスナップショットを公開しています。

現在のところ、レベル 3 以上のモジュールは標準化されていませんが、将来的には変更されます。セレクター 4 や CSS 境界と背景 Level 4 のようないくつかのモジュールは、既に Editor's Draft がありますが、最初の Working Draft を公開するには至っていません。

CSS モジュールの状態

完了モジュール

一部の CSS モジュールは、すでに W3C 勧告として標準化されています。これらは基本的に変更されません。

CSS Color Module Level 3 勧告 2011年6月7日から

opacity プロパティ、および <color> 値を生成する hsl(), hsla(), rgba(), rgb() の各関数が追加されています。有効な色として、 currentColor キーワードも定義されています。

transparent 色は、実際の色になり (アルファチャネルに対応したため)、 rgba(0,0,0,0.0) の別名になりました。

いずれの本番環境でも使用すべきではない system-color キーワードは、非推奨になりました。

CSS Namespaces Module 勧告 2011年9月29日から

' | ' 構文の使用と CSS の @namespace @-規則の追加による CSS 修飾名の概念が定義されたことで、 XML 名前空間への対応が追加されました。

Selectors Level 3 勧告 2011年9月29日から

追加:

Selectors 仕様書の次のイテレーション はすでに進行していますが、まだ初めての Working Draft を公開する段階には至っていません。

Media Queries 勧告 since June 19th, 2012

元のメディア型 (print, screen, ) を拡張して、 only screen and (color) のような端末メディア能力のクエリを使用できる言語になりました。

メディアクエリは、 CSS 文書で使用されるだけではなく、 <link> 要素の media 属性のように、いくつかの HTML 要素の属性でも使用されています。

この仕様の次のイテレーションが作業中であり、ウェブサイトがユーザーエージェントのインプットメソッドをカスタマイズできる機能、 hoverpointer のような新しいメディア機能が利用できる予定です。 script メディア機能を使用した EcmaScript 対応の検出機能も提案されています。

CSS Style Attributes 勧告 2013年11月7日から
HTML の style グローバル属性の内容の構文が正式に定義されました。
CSS Fonts Module Level 3 勧告候補 2018年9月20日から

CSS2.1 フォントマッチングアルゴリズムを実装に近いものに修正します。

追加:

CSS Basic User Interface Module Level 3 勧告

追加:

  • box-sizing プロパティを使用したボックスモデルの調整機能。
    リスク: ブラウザーの対応が不十分であるため、 padding-box 値の標準化はこのモジュールの次のイテレーションに延期されるかもしれません。
  • :indeterminate:default, :valid:invalid:in-range:out-of-range:required:optional, :read-only:read-write 疑似クラスと ::value::choices::repeat-item::repeat-index 疑似要素を使用した、コンテンツに従ったフォームのスタイリングの許可。
    リスク: ブラウザーの対応が不十分であるため、 ::value::choices::repeat-item::repeat-index 疑似要素の標準化はこのモジュールの次のイテレーションに延期されるかもしれません。
  • icon プロパティと content プロパティの新しい icon 値によって定義されたアイコンのサポート。
    リスク: ブラウザ実装が不十分なため、icon プロパティと icon 値の標準化は CSS4 に延期されるかもしれません。
  • outline-offset プロパティにアウトラインの位置のより多くの制御を与えるサポート。
  • 要素の大きさが変更されるべきか、またはどのように変更すべきかを制御できる resize プロパティのサポート。
  • 必要な場合、テキストのオーバーフローの仕方を定義する text-overflow プロパティのサポート。
    リスク: ブラウザーの対応が不十分であるため、 <string> 値のサポートと同様に、このプロパティの 2 値構文もこのモジュールの次のイテレーションに延期されるかもしれません。
  • cursor プロパティを拡張したカーソルの位置の定義や新しい none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out の機能。
  • CSS の nav-index, nav-up, nav-right, nav-left, nav-down プロパティを使用した、シーケンシャルナビゲーションの順序 (すなわちタブの順序) を指定する機能。
    リスク: ブラウザーの対応が不十分であるため、 navigation プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。
  • CSS の ime-mode プロパティを用いた、IME エディタの使用方法を制御する機能。
    リスク: ブラウザーの対応が不十分であるため、ime-mode プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。

CSS Basic User Interface Module の次のイテレーションに追加されるもの初期リストが 利用可能 です。

安定版モジュール

いくつかの CSS モジュールは、既にかなり安定しており、 CSSWG の勧告レベル3つ (勧告候補、勧告案、勧告) のうち、いずれかに到達しています。接頭辞なしで使用でき、かなり安定していますが、いくつかの機能は勧告候補段階で削除される可能性があります。

これらのモジュールは、仕様の中心を構成する CSS2.1 仕様を拡張および修正します。これらはまとめて、 CSS 仕様の現在のスナップショットです。

CSS Backgrounds and Borders Module Level 3 勧告候補

追加:

背景と境界線の仕様の CSS4 イテレーションは既に進行していますが、まだ初めての Working Draft を公開する段階には至っていません。この仕様では、 border をクリッピングする機能 (CSS の border-clipborder-clip-top, border-clip-right, border-clip-bottom, border-clip-left プロパティ) や、コーナーの border の形の制御 (CSS border-corner-shape プロパティの使用) を追加する予定です。

CSS Conditional Rules Module Level 3 勧告候補
ブラウザー、または文書に適用される機能の条件である、スタイルシートの条件処理部分の機能が追加されました。これは主に、 @media 内部のネストされた @-規則の許可と新しい @-規則 @supports の追加、新しい DOM メソッドの CSS.supports() の追加で構成されています。
CSS Multi-column Layout Module 草案
CSS の columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside を使用した簡単な段組みレイアウトへの対応を追加。
CSS Values and Units Module Level 3 勧告候補

あらゆる CSS プロパティで initialinherit キーワードを使えるようにしました。

文法トークンといくつかのテキストの精度で暗黙的に定義されていた CSS 2.1 のデータ型を正式に定義しました。

追加:

  • フォント関連の長さの単位の定義: remch
  • viewport関連の長さの単位の定義: vwvhvmaxvmin
  • 実際には絶対的ではないが、reference pixel に関連して定義されている実際の絶対的な長さの単位についての精度。
  • <angle><time><frequency><resolution> の定義。
  • <color><image><position> の基本の値の定義。
  • calc()attr()toggle() の関数表記の定義。
    リスク: ブラウザーの対応が不十分であるため、 calc()attr()toggle() 関数表記はこのモジュールの次のイテレーションに延期されるかもしれません。

<ident><custom-ident> のようないくつかの型定義は、 CSS Values and Units Module Level 4 に延期されています。

CSS Flexible Box Layout Module 勧告候補
フレックスボックスレイアウトに CSS の display プロパティとそれを制御するいくつかの新しい CSS プロパティ (flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap) が追加されました。
CSS Cascading and Inheritance Level 3 勧告候補

追加:

  • プロパティへの initialunset の値
  • all プロパティ。
  • スコープメカニズム。

明確化:

  • メディア依存の @import 文とスタイルシートのロード要件の相互作用。
CSS Writing Modes Module Level 3 勧告候補
横書きと縦書きの書字方向の定義、 directionunicode-bidi プロパティが新しい text-orientation プロパティに作用する方法の明確化、必要な機能の拡張。
CSS Counter Styles Level 3 勧告候補

Testing モジュール

CSS Images Module Level 3 勧告候補

<image> データ型の定義。

メディアフラグメントを使用した image の切り分けをサポートするための url() の拡張。

追加:

  • <resolution> データタイプに dppx 単位。
  • url から 画像を定義する url() のより柔軟な代替である image() 関数。
    リスク: ブラウザーの対応が不十分であるため、 image() 関数の標準化は、このモジュールの次のイテレーションに延期されるかもしれません。
  • linear-gradient()repeating-linear-gradient()radial-gradient()、repeating-radial-gradient() への対応。
  • object-fit プロパティを使用した、置き換えた要素がその要素にフィットすべきかどうかを定義する機能。
    リスク: ブラウザーの対応が不十分であるため、 object-fit プロパティの標準化は、このモジュールの次のイテレーションに延期されるかもしれません。
  • CSS の image-resolutionimage-orientation プロパティを使用した外部イメージの解像度とオリエンテーションをオーバーライドする機能。
    リスク: ブラウザーの対応が不十分であるため、 image-resolutionimage-orientation プロパティの標準化は、このモジュールの次のイテレーションに延期されるかもしれません。

CSS Image Level 3 を置き換えるであろう CSS Image Values and Replaced Content Level 4 は開発中で、 草案 です。

CSS Speech Module 勧告候補
speech メディア型や聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。
CSS Text Decoration Module Level 3 勧告候補

拡張:

追加:

明確化:

  • decoration の描画順序。

リスク: ブラウザーの対応が不十分であるため、 text-decoration-skip と行ポジジョンルール、同じテキスト上に強調記号とルビを配置する機能は、このモジュールの次のイテレーションに延期されるかもしれません。

CSS Shapes Module Level 1 勧告候補
浮動要素に適用することができる幾何学的シェイプを定義。これらのシェイプは、インラインコンテンツが囲みボックスで折り返す代わりに、折り返す領域を記述します。
CSS Masking Module Level 1 勧告候補
ビジュアル要素の部分を一部、または完全に隠すための方法が定義されました。これは、他のグラフィカル要素または画像を、輝度またはアルファマスクとして使用する方法を提供します。
CSS Fragmentation Module Level 3 勧告候補
ウェブページ上でページ区切り、段区切り、1行を残して改ページをしないなどの扱い方を定義します。

追加:

  • ボックスが崩されたとき(ページ、または 列、改行)、 box-decoration-break プロパティを使用した枠線と背景色やイメージなどの装飾の動作の定義をサポート.
CSS Custom Properties for Cascading Variables Module Level 1 勧告候補
CSS で変数を定義するメカニズムを定義します。
Compositing and Blending Level 1 勧告候補
CSS Syntax Level 3 勧告候補
charset の決定方法を明確化。解釈とトークン化アルゴリズムにマイナーな変更が行われました。
CSS Grid Layout 勧告候補
グリッドレイアウトに CSS の display プロパティを追加し、にグリッドレイアウトとこれを制御するいくつかの新しいプロパティ、 grid, grid-area, grid-auto-columns, grid-auto-flow, grid-auto-position, grid-auto-rows, grid-column, grid-column-start, grid-column-end, grid-row, grid-row-start, grid-row-end, grid-template, grid-template-areas, grid-template-rows, grid-template-columns の追加。
CSS Display Module Level 3 勧告候補
CSS Will Change Module Level 1 勧告候補
Media Queries Level 4 勧告候補
Geometry Interfaces Module Level 1 勧告候補
CSS Cascading and Inheritance Level 4 勧告候補
CSS Scroll Snap Module Level 1 勧告候補
CSS Painting API Level 1 草案
CSS Containment Module Level 1 勧告候補
CSS Writing Modes Level 4 勧告候補

リファインフェーズのモジュール

リファインフェーズであるとみなされている仕様は、既にかなり安定しています。まだ変更が想定されますが、現在の実装と非互換になるものを作るべきではありません。主に極端な場合の振る舞いを定義しています。

CSS Animations 草案
animation, animation-delayanimation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function プロパティ、および @keyframes 規則 の追加によって、アニメーション効果の定義ができるようになりました。
Web Animations 草案
CSS Text Module Level 3 草案

拡張:

  • text-transform プロパティの full-width 値。
  • テキストが複数の書字方向を持つ文書のために、text-align プロパティの startendstart endmatch-parent 値に対応
  • 特定の文字で整列するための text-align プロパティの <string> 値。小数点位置を揃えるのに便利。
  • 両端揃えの柔軟性を制御するために、 word-spacingletter-spacing プロパティにおける制約範囲。

追加:

初期の CSS Text Level 3 draft のいくつかの機能は、このモジュールの次のイテレーションに延期されました

CSS Transforms Level 1 草案

追加:

  • transformtransform-origin プロパティを使用していずれかの要素に適用される 2 次元変形に対応。対応する変形: matrix() translate()translateX()、translateY()scale()、scaleX()scaleY()、rotate()、skewX()、skewY()
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS transform-styleperspectiveperspective-originbackface-visibility プロパティの追加、および transform プロパティの次の変更による拡張: matrix 3d()translate3d()translateZ()scale3d()scaleZ()、rotate3d()、rotateX()、rotateY()、rotateZ()、perspective() によっていずれかの要素に適用される 2 次元変形のサポート。

メモ: この仕様書は CSS 2D-Transforms, CSS 3D-Transforms, SVG transforms を合わせたものです。

CSS Transitions 草案
CSS に transition, transition-delay, transition-duration, transition-property, transition-timing-function プロパティを追加し、2つのプロパティ値の間の遷移効果を定義できるようになりました。
CSS Box Alignment Module Level 3 草案
Selectors Level 4 草案
CSS Lists Module Level 3 草案
リスト作成者がスタイリングでき、ウェブ開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。
Motion Path Module Level 1 草案
CSS Fonts Module Level 4 草案
CSS Easing Functions Level 1 Working Draft
CSS Logical Properties and Values Level 1 編集者草案

修正フェーズのモジュール

修正フェーズのモジュールは、リファインフェーズのものよりも安定度が欠けます。一般的に、構文は検査下にあり、非互換的な方法で多くの改善が行わるかもしれません。代替の構文はテストされて、一般的に実装されています。

CSS Paged Media Module Level 3 草案
CSS Object Model (CSSOM) View Module 草案
CSS Intrinsic & Extrinsic Sizing Module Level 3 草案
CSS Ruby Layout Module Level 1 草案
CSS Overflow Module Level 3 草案
CSS Basic Box Model 草案
CSS Scrollbars Level 1 草案

探求フェーズのモジュール

CSS Backgrounds and Borders Level 4 Working Draft
CSS Device Adaptation 草案
初期のコンテナーブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が @viewport に追加されます。
CSS Exclusions Module Level 1 草案
いずれかのポジションスキームで除外領域を定義するフロートを拡張します。コンテンツがフローすべき形態の概念を追加します。
Filter Effects Module Level 1 草案
CSS Generated Content for Paged Media Module 草案
ヘッダーやフッターだけでなく、インデックスやテーブルコンテンツのようなテーブルを制御できる様になることで、ドキュメントの印刷バージョンを調整する機能が追加されます。
CSS Page Floats Working Draft
CSS Grid Layout 不明
CSS Line Grid Module Level 1 草案
CSS Positioned Layout Module Level 3 草案
CSS Regions Module Level 1 草案
コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。
CSS Object Model (CSSOM) 草案
CSS Font Loading Module Level 3 草案
CSS Scoping Module Level 1 草案
CSS Inline Layout 草案
CSS Images Module Level 4 草案

拡張:

  • 書字方向に依存する画像を利用できるように、画像の書字方向 (rtl または ltr) を記述する image() 関数表記。
  • image-orientation プロパティに、画像に保存されている EXIF データに従うための from-image キーワードの追加。

追加:

  • 画像の解像度ネゴシエーションができ、同等の画像を異なる解像度で定義できるようにする image-set() 関数表記。
  • 画像のようにページの一部を使用できる element() 関数表記。
  • 2つの画像間を遷移して、それらの間に挿入を定義するとき、中間画像を参照できる cross-fade() 関数表記。
  • グラデーションの新しいタイプを表現する conic-gradient()repeating-conic-gradient() 関数表記。
  • オブジェクトのサイズ変更をどのように行うか定義する image-rendering プロパティ。

リライティングフェーズのモジュール

リライティングフェーズのモジュールは古くなっており、書き換えが求められています。構文は精査中で、互換性のない方法を含む多くの変更が加えられています。代替の構文はテストされ、多くの場合実装されています。

CSS Generated Content Module Level 3 草案

放棄されたモジュール

Non-element Selectors Module Level 1 草案

ドキュメントのタグと貢献者

タグ: 
最終更新者: chrisdavidmills,