We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS3 とは、 Cascading Style Sheets 言語の最新の発展版で、 CSS2.1 の拡張を目指しています。 CSS3 は、丸角やシャドウ、グラデーショントランジションアニメーション、同様に、マルチカラムフレキシブルボックス、グリッドレイアウトのような新しいレイアウトのような多くの待望の新規機能をもたらします。 実験的な部分はベンダープレフィックスが必要であり、将来的に構文と意味の両方が変更される可能性があるため、本番環境では避けるか、細心の注意を払って使用すべきです。

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

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

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

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

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

CSS モジュールの状態

安定版モジュール

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

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

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

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

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

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

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

追加:

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

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

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

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 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 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 Speech Module 勧告候補
speech メディアタイプや聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。
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 プロパティの標準化は、 このモジュールの次のイテレーションに延期されるかもしれません
  • image-resolutionimage-orientation プロパティを使用した外部イメージの解像度とオリエンテーションをオーバーライドする機能。
    リスク ブラウザサポートが不十分なため、image-resolutionimage-orientation プロパティの標準化は、 このモジュールの次のイテレーションに延期されるかもしれません

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

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 Conditional Rules Module Level 3 勧告候補
ブラウザー、または文書に適用される機能の条件である、スタイルシートの条件処理部分の機能が追加されました。これは主に、@media 内部のネストされた @-規則の許可と新しい @-規則 @supports の追加、新しい DOM メソッドの CSS.supports() の追加で構成されています。
CSS Text Decoration Module Level 3 勧告候補

拡張:

追加:

明確化:

  • decoration の描画順序。

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

CSS Fonts Module Level 3 勧告候補

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

追加:

CSS Cascading and Inheritance Level 3 勧告候補

追加:

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

明確化:

  • メディア依存の @import 文とスタイルシートのロード要件の相互作用。
CSS Writing Modes Module Level 3 勧告候補
横書きと縦書きの書字方向の定義、 directionunicode-bidi プロパティが新しい text-orientation プロパティに作用する方法の明確化、必要な機能の拡張を行います。
CSS Shapes Module Level 1 勧告候補
フロートに適用することができる geometric shapes が定義されました。これらの shapes は、バウンディングボックスがラップする代わりに、インラインコンテンツが周囲をラップする領域を提供します。
CSS Masking Module Level 1 勧告候補
ビジュアル要素の部分を一部、または完全に隠すための方法が定義されました。これはほかのグラフィカル要素、または画像を輝度またはアルファマスクとして使用する方法を提供します。

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

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

Web Animations 草案
 
CSS Counter Styles Level 3 勧告候補
 
Compositing and Blending Level 1 勧告候補
 
CSS Syntax Level 3 勧告候補
charset の決定方法を明確化。解釈とトークン化アルゴリズムにマイナーな変更が行われました。
CSS Will Change Module Level 1 勧告候補
 
CSS Transitions 草案
CSS に transition, transition-delay, transition-duration, transition-property, transition-timing-function プロパティを追加し、2つのプロパティ値の間の遷移効果を定義できるようになりました。
CSS Animations 草案
animation, animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function プロパティ、および @keyframes 規則 の追加によってもたらされる、 アニメーションの定義ができるようになりました。
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 Fragmentation Module Level 3 勧告候補
ウェブページ上でページ区切り、段区切り、1行を残して改ページをしないなどの扱い方を定義します。

追加:

  • ボックスが崩されたとき(ページ、または 列、改行)、 box-decoration-break プロパティを使用した枠線と背景色やイメージなどの装飾の動作の定義をサポート.
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 Custom Properties for Cascading Variables Module Level 1 勧告候補
CSS で変数を定義するメカニズムを定義します。
Compositing and Blending Level 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 の機能。
  • nav-indexnav-upnav-rightnav-leftnav-down プロパティを使用した、シーケンシャルナビゲーションの順序(つまり、タブの順序)を指定する機能。
    リスク: ブラウザ実装が不十分なため、navigation プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。
  • ime-mode プロパティを使用した、IME エディタの使用方法を制御する機能。
    リスク: ブラウザ実装が不十分なため、ime-mode プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。

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

CSS Grid Layout 勧告候補
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 Box Alignment Module Level 3 草案
 
CSS Paged Media Module Level 3 草案
 
CSS Object Model (CSSOM) View Module 草案
 
Selectors Level 4 草案
 

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

CSS Images Module Level 4 草案

拡張:

  • 右書きと左書きに依存する画像を利用できるようにするために、画像の方向(rtlltr)を記述する image() 関数表記。
  • image-orientation プロパティに、画像に保存されている EXIF データへの追従考慮できる from-image の追加。

追加:

  • 画像の解像度ネゴシエーション選択を可能にして、異なる解像度で同等の画像の定義を許可する image-set() 関数表記。
  • 画像のようにページの一部を使用できる element() 関数表記。
  • 2つの画像間を遷移して、それらの間に挿入を定義するとき、中間画像を参照できる cross-fade() 関数表記。
  • グラデーションの新しいタイプを表現する conic-gradient()repeating-conic-gradient() 関数表記。
  • オブジェクトのサイズ変更をどのように行うか定義する image-rendering プロパティ。
CSS Device Adaptation 草案
初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が @viewport に追加されます。
CSS Generated Content for Paged Media Module 草案
ヘッダーやフッターだけでなく、インデックスやテーブルコンテンツのようなテーブルを制御できる様になることで、ドキュメントの印刷バージョンを調整する機能が追加されます。
CSS Exclusions Module Level 1 草案
いずれかのポジションスキームで除外領域を定義するフロートを拡張します。コンテンツがフローすべき形態の概念を追加します。
CSS Lists Module Level 3 草案
リスト作成者がスタイリングでき、Web 開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。
CSS Regions Module Level 1 草案
コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。
Filter Effects Module Level 1 草案
 
CSS Grid Layout 不明
 
CSS Intrinsic & Extrinsic Sizing Module Level 3 草案
 
CSS Line Grid Module Level 1 草案
 
CSS Positioned Layout Module Level 3 草案
 
CSS Ruby Layout Module Level 1 草案
 
CSS Object Model (CSSOM) 草案
 
CSS Overflow Module Level 3 草案
 
CSS Font Loading Module Level 3 草案
 
CSS Display Module Level 3 草案
 
CSS Scoping Module Level 1 草案
 
Media Queries Level 4 勧告候補
 
Non-element Selectors Module Level 1 草案
 
Geometry Interfaces Module Level 1 勧告候補
 
CSS Inline Layout 草案
 

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

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

CSS Basic Box Model 草案
 
CSS Generated Content Module Level 3 草案
 
Unknown 不明
 

 

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

タグ: 
このページの貢献者: mfuji09, Uemmra3, sgitmot, takahashim, momdo, YuichiNukiyama, lv7777
最終更新者: mfuji09,