Revision 1133133 of CSS3

リビジョンの URL スラグ: Web/CSS/CSS3
リビジョンのタイトル: CSS3
リビジョンの ID: 1133133
作成日: 2016/10/22 0:53:54
作成者: takahashim
現行リビジョン？はい
コメント表記ゆれ修正、ベンダプレフィックス→ベンダープレフィックス、プレフィクス→接頭辞

タグ:

このリビジョンの内容

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

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

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

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

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

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

CSS モジュールの状態

安定版モジュール

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

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

{{ SpecName("CSS3 Colors", "", "") }} {{ Spec2("CSS3 Colors") }} since June 7th, 2011

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

transparent カラーは、実際のカラーになり（アルファチャネルのサポートに感謝）、 rgba(0,0,0,0.0) のエイリアスです。

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

{{ SpecName("CSS3 Selectors", "", "") }} {{ Spec2("CSS3 Selectors") }} since September 29th, 2011

追加：

一致する属性セレクタのサブストリング： E[attribute^="value"]、 E[attribute$="value"]、 E[attribute*="value"] 。
新しい疑似クラス： {{ cssxref(":target") }}、 {{ cssxref(":enabled") }}、 {{ cssxref(":disabled") }}、 {{ cssxref(":checked") }}、 {{ cssxref(":indeterminate") }}、 {{ cssxref(":root") }}、 {{ cssxref(":nth-child") }}、 {{ cssxref(":nth-last-child") }}、 {{ cssxref(":nth-of-type") }}、 {{ cssxref(":nth-last-of-type") }}、 {{ cssxref(":last-child") }}、 {{ cssxref(":first-of-type") }}、 {{ cssxref(":last-of-type") }}、 {{ cssxref(":only-child") }}、 {{ cssxref(":only-of-type") }}、 {{ cssxref(":empty") }}、 {{ cssxref(":not") }}。
疑似要素は 1 つのコロンではなく、2 つのコロンで表現されるようになった： :after は {{ cssxref("::after") }} に、:before は {{ cssxref("::before") }} に、 :first-letter は {{ cssxref("::first-letter") }} に、 :first-line は {{ cssxref("::first-line") }} になりました。
新しい一般的な兄弟ジェネレーター ( h1~pre )。

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

{{ SpecName("CSS3 Namespaces", "", "") }}	{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
' `\|` ' 構文の使用と {{ cssxref("@namespace") }} CSS @-規則の追加による CSS 修飾名の概念が定義されたことで、XML 名前空間のサポートが追加されました。

{{ SpecName("CSS3 Media Queries", "", "") }} {{ Spec2("CSS3 Media Queries") }} since June 19th, 2012

元のメディアタイプ（print、 screen、 …）を、only screen and (color) のようなデバイスメディア特性のクエリを使用できる言語に拡張しました。

メディアクエリは、CSS ドキュメントで使用されるだけではなく、{{ HTMLElement("link") }} 要素の{{ htmlattrxref("media","link") }} 属性のように、いくつかの HTML 要素の属性でも使用されています。

ホバーやポインターのような新しいメディア機能で、ユーザーエージェント上で Web サイトの入力方法をカスタマイズできるこの仕様の次のイテレーションが行われています。script メディア機能を使用した EcmaScript サポートの検出機能も提案されています。

{{ SpecName("CSS3 Style", "", "") }}	{{ Spec2("CSS3 Style") }} since November 7th, 2013
正式に HTML `style` グローバル属性のコンテンツの構文が定義されました。

{{ SpecName("CSS3 Backgrounds", "", "") }} {{ Spec2("CSS3 Backgrounds") }}

追加：

uri() で定義されたものだけでなく、{{cssxref("<image>")}} のいずれかの方が backgorund でサポート。
複数の background イメージのサポート。
{{ cssxref("background-repeat") }} の space と round 値、およびこの CSS プロパティの 2 値構文。
{{ cssxref("background-attachment") }} の local 値。
{{ cssxref("background-origin") }} と {{ cssxref("background-size") }}、{{ cssxref("background-clip") }} プロパティ。
{{ cssxref("border-radius") }} と {{ cssxref("border-top-left-radius") }}、{{ cssxref("border-top-right-radius") }}、{{ cssxref("border-bottom-left-radius") }}、{{ cssxref("border-bottom-right-radius") }} プロパティによるカーブした枠線のサポート。
{{ cssxref("border-image") }} と {{ cssxref("border-image-source") }}、{{ cssxref("border-image-slice") }}、{{ cssxref("border-image-width") }}、{{ cssxref("border-image-outset") }}、{{ cssxref("border-image-repeat") }} プロパティによる border での {{cssxref("<image>")}} の使用のサポート。
{{ cssxref("box-shadow") }} プロパティを使用した要素の shadow のサポート。

Background と Border 仕様の CSS4 イテレーションは既に進行していますが、まだ初めの Working Draft を公開する段階には至っていません。この仕様では、border をクリックする機能（CSS {{ cssxref("border-clip") }} と {{ cssxref("border-clip-top") }}、{{ cssxref("border-clip-right") }}、{{ cssxref("border-clip-bottom") }}、{{ cssxref("border-clip-left") }} プロパティ）や、コーナーの border の形のコントロール（CSS {{ cssxref("border-corner-shape") }} プロパティの使用）を追加する予定です。

{{ SpecName("CSS3 Multicol", "", "") }}

{{ cssxref("columns") }} と {{ cssxref("column-count") }}、{{ cssxref("column-fill") }}、{{ cssxref("column-gap") }}、{{ cssxref("column-rule") }}、{{ cssxref("column-rule-color") }}、{{ cssxref("column-rule-style") }}、{{ cssxref("column-rule-width") }}、{{ cssxref("column-span") }}、{{ cssxref("column-width") }}、{{ cssxref("break-after") }}、{{ cssxref("break-before") }}、{{ cssxref("break-inside") }} を使用した簡単な複数列レイアウトのサポートを追加。

{{ SpecName("CSS3 Speech", "", "") }}	{{ Spec2("CSS3 Speech") }}
`speech` メディアタイプや聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。

{{ SpecName("CSS3 Images", "", "") }} {{ Spec2("CSS3 Images") }}

{{cssxref("<image>")}} データタイプの定義。

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

追加：

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

CSS Image Level 3 を置き換えるであろう CSS Image Values and Replaced Content Level 4 は開発中で、{{Spec2("CSS4 Images")}} です。

{{ SpecName("CSS3 Values", "", "") }} {{ Spec2("CSS3 Values") }}

いくつかの CSS プロパティで initial と inherit キーワードを使えるようにしました。

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

追加：

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

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

{{ SpecName("CSS3 Flexbox", "", "") }}

flexbox レイアウトに CSS {{ cssxref("display") }} プロパティとそれを制御するいくつかの新しい CSS プロパティがついかされました：{{ cssxref("flex") }} と {{ cssxref("flex-align") }}、{{ cssxref("flex-direction") }}、{{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}、{{ cssxref("flex-line-pack") }}、{{ cssxref("flex-order") }}、{{ cssxref("flex-pack") }}、{{ cssxref("flex-wrap") }}。

{{ SpecName("CSS3 Conditional", "", "") }}

ブラウザ、またはドキュメントに適用される機能の条件である、スタイルシートの条件処理部分の機能が追加されました。これは主に、{{ cssxref("@media") }} 内部のネストされた @-規則の許可と新しい @-規則 {{ cssxref("@supports") }} の追加、新しい DOM メソッドの {{domxref("CSS.supports()")}} の追加で構成されています。

{{ SpecName("CSS3 Text Decoration", "", "") }} {{ Spec2("CSS3 Text Decoration") }}

拡張：

{{ cssxref("text-decoration-line") }} と {{ cssxref("text-decoration-color") }}、{{ cssxref("text-decoration-style") }} プロパティのショートハンドを記述できる CSS {{ cssxref("text-decoration") }} プロパティ。{{ cssxref("text-decoration-skip") }} と {{ cssxref("text-underline-position") }} プロパティの追加。

追加：

SCSS {{ cssxref("text-emphasis") }} と {{ cssxref("text-emphasis-style") }}、{{ cssxref("text-emphasis-color") }}、{{ cssxref("text-emphasis-position") }} プロパティによる東アジアスクリプト強調記号のサポート。
{{ cssxref("text-shadow") }} プロパティによるスクリプトシャドウのサポート。

明確化：

decoration のペイント順序。

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

{{ SpecName("CSS3 Fonts", "", "") }}

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

追加：

{{ cssxref("@font-face") }} @-規則を通したダウンロードできるフォントのサポート。
{{ cssxref("font-kerning") }} プロパティを通した図間のスペースの制御。
{{ cssxref("font-language-override") }} プロパティを通した言語特定の図の選択。
{{ cssxref("font-feature-settings") }} プロパティを通した特定の OpenType を持つ図の選択。
{{ cssxref("font-size-adjust") }} プロパティを通した、代替えフォントを指定した場合の使用するアスペクト比の制御。
{{ cssxref("font-stretch") }} と {{ cssxref("font-variant-alternates") }}、{{ cssxref("font-variant-caps") }}、{{ cssxref("font-variant-east-asian") }}、{{ cssxref("font-variant-ligatures") }}、{{ cssxref("font-variant-numeric") }}、{{ cssxref("font-variant-position") }} プロパティを使用した代替えフォントフェイスの選択。関連する {{ cssxref("font-variant") }} ショートハンドプロパティの拡張と {{ cssxref("@font-feature-values") }} @-規則の導入。
{{ cssxref("font-synthesis") }} プロパティを通した、何も見つからない場合の斜体、または太字の自動生成の制御。

{{ SpecName("CSS3 Cascade", "", "") }} {{ Spec2("CSS3 Cascade") }}

追加：

initial と unset 値。
{{ cssxref("all") }} プロパティ。
スコープメカニズム。

明確化：

メディア依存の@import 文とスタイルシートのロード要件の相互作用。

{{ SpecName("CSS3 Writing Modes", "", "") }}	{{ Spec2("CSS3 Writing Modes") }}
水平と垂直スクリプトの書き込みモードの定義と、新しい {{ cssxref("text-orientation") }} プロパティと必要な機能の拡張をすることで CSS {{ cssxref("direction") }} と {{ cssxref("unicode-bidi") }} プロパティの動作方法の明確化をしました。

{{ SpecName("CSS Shapes", "", "") }}	{{ Spec2("CSS Shapes") }}
フロートに適用することができる geometric shapes が定義されました。これらの shapes は、バウンディングボックスがラップする代わりに、インラインコンテンツが周囲をラップする領域を提供します。

{{ SpecName("CSS Masks", "", "") }}	{{ Spec2("CSS Masks") }}
ビジュアル要素の部分を一部、または完全に隠すための方法が定義されました。これはほかのグラフィカル要素、または画像を輝度またはアルファマスクとして使用する方法を提供します。

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

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

{{ SpecName("Web Animations", "", "") }}	{{ Spec2("Web Animations") }}

{{ SpecName("CSS3 Counter Styles", "", "") }}	{{ Spec2("CSS3 Counter Styles") }}

{{ SpecName("Compositing", "", "") }}	{{ Spec2("Compositing") }}

{{ SpecName("CSS3 Syntax", "", "") }}	{{ Spec2("CSS3 Syntax") }}
charset の決定方法を明確化します；パースとトークン化アルゴリズムにマイナーな変更が行われました。

{{ SpecName("CSS Will Change", "", "") }}	{{ Spec2("CSS Will Change") }}

{{ SpecName("CSS3 Transitions", "", "") }}	{{ Spec2("CSS3 Transitions") }}
{{ cssxref("transition") }} と {{ cssxref("transition-delay") }}、{{ cssxref("transition-duration") }}、{{ cssxref("transition-property") }}、{{ cssxref("transition-timing-function") }} プロパティの追加により、 2 つのプロパティ値の間に作用する transition の定義を許可しました。

{{ SpecName("CSS3 Animations", "", "") }}

{{ cssxref("animation") }}, {{ cssxref("animation-delay") }} と {{ cssxref("animation-direction") }}、{{ cssxref("animation-duration") }}、{{ cssxref("animation-fill-mode") }}、{{ cssxref("animation-iteration-count") }}、{{ cssxref("animation-name") }}、{{ cssxref("animation-play-state") }}、{{ cssxref("animation-timing-function") }} プロパティ、および {{ cssxref("@keyframes") }} @-規則の追加によってもたらされる、アニメーションの定義が許可されました。

{{ SpecName("CSS3 Transforms", "", "") }} {{ Spec2("CSS3 Transforms") }}

追加：

{{ cssxref("transform") }} と {{ cssxref("transform-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 {{ cssxref("transform-style") }} と {{ cssxref("perspective") }}、{{ cssxref("perspective-origin") }}、{{ cssxref("backface-visibility") }} プロパティの追加、および {{ cssxref("transform") }} プロパティの次の変更による拡張： matrix 3d() と translate3d()、translateZ()、scale3d()、scaleZ()、rotate3d()、rotateX()、rotateY()、rotateZ()、perspective() によっていずれかの要素に適用される 2 次元変形のサポート。

ノート： この仕様は CSS 2D-Transforms と CSS 3D-Transforms、SVG transforms のマージです。

{{ SpecName("CSS3 Fragmentation", "", "") }}

ページや改行、ウィンド、orphans のハンドリングにおいて Web ページのパーティションで発生すべきことを定義します。

追加：

ボックスが崩されたとき（ページ、または列、改行）、 {{ cssxref("box-decoration-break") }} プロパティを使用した枠線と背景色やイメージなどの装飾の動作の定義をサポート.

{{ SpecName("CSS3 Text", "", "") }} {{ Spec2("CSS3 Text") }}

拡張：

{{ cssxref("text-transform") }} プロパティの value full-width 値。
テキストが複数の方向性を持つドキュメントのために、{{ cssxref("text-align") }} プロパティの start と end、start end、match-parent 値のサポート
文字を整列させる {{ cssxref("text-align") }} プロパティと {{cssxref("<string>")}} 値。小数点数を揃えるのに有益。
揃えを柔軟性を制御する範囲制約を持つ {{ cssxref("word-spacing") }} と {{ cssxref("letter-spacing") }} プロパティ

追加：

{{ cssxref("text-space-collapse") }} と {{ cssxref("tab-size") }} プロパティを使用したホワイトスペースの表示方法の制御。
{{ cssxref("line-break") }} と {{ cssxref("word-break") }}、{{ cssxref("hyphens") }}、{{ cssxref("text-wrap") }}、{{ cssxref("overflow-wrap") }}、{{ cssxref("text-align-last") }} プロパティを使用した改行と単語の制御。
より多くのスクリプトの種類をサポートするための、{{ cssxref("text-justify") }} プロパティを使用した揃えの発生方法の制御。
{{ cssxref("text-indent") }} と {{ cssxref("hanging-punctuation") }} プロパティを使用した縁の効果の制御。

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

{{ SpecName("CSS3 Variables", "", "") }}	{{ Spec2("CSS3 Variables") }}
CSS で変数を定義するメカニズムを定義します。

{{ SpecName("Compositing", "", "") }}	{{ Spec2("Compositing") }}

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

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

{{ SpecName("CSS3 Basic UI", "", "") }} {{ Spec2("CSS3 Basic UI") }}

追加：

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

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

{{ SpecName("CSS3 Grid", "", "") }} {{ Spec2("CSS3 Grid") }}

display プロパティにグリッドレイアウトとこれを制御するいくつかの新しいプロパティの追加：{{cssxref("grid")}}、{{cssxref("grid-area")}}、{{cssxref("grid-auto-columns")}}、{{cssxref("grid-auto-flow")}}、{{cssxref("grid-auto-position")}}、{{cssxref("grid-auto-rows")}}、{{cssxref("grid-column")}}、{{cssxref("grid-column-start")}}、{{cssxref("grid-column-end")}}、{{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}、{{cssxref("grid-row-end")}}、{{cssxref("grid-template")}}、{{cssxref("grid-template-areas")}}、{{cssxref("grid-template-rows")}}、{{cssxref("grid-template-columns")}}。

{{ SpecName("CSS3 Box Alignment", "", "") }}	{{ Spec2("CSS3 Box Alignment") }}

{{ SpecName("CSS3 Paged Media", "", "") }}	{{ Spec2("CSS3 Paged Media") }}

{{ SpecName("CSSOM View", "", "") }}	{{ Spec2("CSSOM View") }}

{{ SpecName("CSS4 Selectors", "", "") }}	{{ Spec2("CSS4 Selectors") }}

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

{{ SpecName("CSS4 Images", "", "") }} {{ Spec2("CSS4 Images") }}

拡張：

双方向感応イメージを許可する画像の方向（rtl か ltr）を提供する image() 関数表記。
{{ cssxref("image-orientation") }} プロパティに、画像に保存されている EXIF データへの追従を考慮できる from-image の追加。

追加：

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

{{ SpecName("CSS3 Device", "", "") }}	{{ Spec2("CSS3 Device") }}
初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が {{ cssxref("@viewport") }} に追加されます。

{{ SpecName("CSS3 GCPM", "", "") }}	{{ Spec2("CSS3 GCPM") }}
ヘッダーやフッターだけでなく、インデックスやテーブルコンテンツのようなテーブルを制御できる様になることで、ドキュメントの印刷バージョンを調整する機能が追加されます。

{{ SpecName("CSS Exclusions", "", "") }}	{{ Spec2("CSS Exclusions") }}
いずれかのポジションスキームで除外領域を定義するフロートを拡張します。コンテンツがフローすべき形態の概念を追加します。

{{ SpecName("CSS3 Lists", "", "") }}	{{ Spec2("CSS3 Lists") }}
リスト作成者がスタイリングでき、Web 開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。

{{ SpecName("CSS3 Regions", "", "") }}	{{ Spec2("CSS3 Regions") }}
コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。

{{ SpecName("CSS3 Device", "", "") }}	{{ Spec2("CSS3 Device") }}
初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が {{ cssxref("@viewport") }} に追加されます。

{{ SpecName("Filters 1.0", "", "") }}	{{ Spec2("Filters 1.0") }}

{{ SpecName("CSS3 Template", "", "") }}	{{ Spec2("CSS3 Template") }}

{{ SpecName("CSS3 Sizing", "", "") }}	{{ Spec2("CSS3 Sizing") }}

{{ SpecName("CSS Line Grid", "", "") }}	{{ Spec2("CSS Line Grid") }}

{{ SpecName("CSS3 Positioning", "", "") }}	{{ Spec2("CSS3 Positioning") }}

{{ SpecName("CSS3 Ruby", "", "") }}	{{ Spec2("CSS3 Ruby") }}

{{ SpecName("CSSOM", "", "") }}	{{ Spec2("CSSOM") }}

{{ SpecName("CSS3 Overflow", "", "") }}	{{ Spec2("CSS3 Overflow") }}

{{ SpecName("CSS3 Font Loading", "", "") }}	{{ Spec2("CSS3 Font Loading") }}

{{ SpecName("CSS3 Display", "", "") }}	{{ Spec2("CSS3 Display") }}

{{ SpecName("CSS Scope", "", "") }}	{{ Spec2("CSS Scope") }}

{{ SpecName("CSS4 Media Queries", "", "") }}	{{ Spec2("CSS4 Media Queries") }}

{{ SpecName("CSS Non-element Selectors", "", "") }}	{{ Spec2("CSS Non-element Selectors") }}

{{ SpecName("Geometry Interfaces", "", "") }}	{{ Spec2("Geometry Interfaces") }}

{{ SpecName("CSS3 Inline", "", "") }}	{{ Spec2("CSS3 Inline") }}

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

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

{{ SpecName("CSS3 Box", "", "") }}	{{ Spec2("CSS3 Box") }}

{{ SpecName("CSS3 Content", "", "") }}	{{ Spec2("CSS3 Content") }}

{{ SpecName("CSS3 Inline Layout", "", "") }}	{{ Spec2("CSS3 Inline Layout") }}

このリビジョンのソースコード

<p><span class="seoSummary"><strong>CSS3</strong> とは、<em>Cascading Style Sheets</em> 言語の最新の発展版で、CSS2.1 の拡張を目指しています。CSS3 は、丸角やシャドウ、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">グラデーション</a>、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">トランジション</a>、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">アニメーション</a>、同様に、<a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">マルチカラム</a>、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">フレクシブルボックス</a>、グリッドレイアウトのような新しいレイアウトのような多くの待望の新規の機能をもたらします。</span> 実験的な部分はベンダープレフィックスが必要であり、将来的に構文と意味の両方が変更される可能性があるため、本番環境では避けるか、細心の注意を払って使用すべきです。</p>

<h2 id="モジュールと標準化プロセス">モジュールと標準化プロセス</h2>

<p>CSS レベル 2 は、勧告に至るまで、2002 年 8 月から 2011 年の 6 月までの 9 年間が必要でした。これは、いくつかの 2 次的な機能が仕様全体を堰き止めたためです。問題のない仕様の標準化を加速させるために、W3C&nbsp;の <a class="external" href="https://www.w3.org/blog/CSS/" title="https://www.w3.org/blog/CSS/">CSS Working Group</a> は、<a class="external" href="https://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="https://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">北京ドクトリン</a>と呼ばれる決定に従い、CSS を<em>モジュール</em>と呼ばれる小さなコンポーネントに分割しました。現在、それぞれのモジュールは言語の独立したパートで、それぞれのペースで標準化に向かっています。いくつかのモジュールが既に W3C に勧告されている一方で、まだ早期の Working Draft のモジュールもあります。また、必要が認められた時は、新しいモジュールも追加されています。</p>

<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float:left; width:550px" /> </a> 正式には、CSS3 標準<em>自体</em>は存在しません。 それぞれのモジュールは独立して標準化されています。標準の CSS は、完了したモジュールによって改正および拡張された CSS2.1 で成り立っており、すべてに同じレベルの番号は必要ありません。各時点での、CSS 標準のスナップショットは、CSS2.1 と成熟したモジュールをリストすることで定義できます。</p>

<p>W3 コンソーシアムは、<a class="external" href="https://www.w3.org/TR/css-beijing/" title="https://www.w3.org/TR/css-beijing/">2007</a> や <a class="external" href="https://www.w3.org/TR/css-2010/" title="https://www.w3.org/TR/css-2010/">2010</a> のように、定期的にそのようなスナップショットを公開しています。</p>

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

<h2 id="CSS_モジュールの状態" style="clear: both;">CSS モジュールの状態</h2>

<h3 id="安定版モジュール">安定版モジュール</h3>

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

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

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>{{ cssxref("opacity") }} プロパティ、および {{cssxref("&lt;color&gt;")}}&nbsp;値を生成する <code>hsl()、</code><code>hsla()、</code><code>rgba()、</code><code>rgb()</code> 関数が追加されています。有効なカラーとして、 <code>currentColor</code> キーワードも定義されています。</p>

    <p><code>transparent</code> カラーは、実際のカラーになり（アルファチャネルのサポートに感謝）、 <code>rgba(0,0,0,0.0)</code> のエイリアスです。</p>

    <p><a href="https://www.w3.org/TR/CSS2/ui.html#system-colors">いずれの本番環境でも使用すべきではない system-color キーワードは</a>、非推奨になりました。</p>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(128, 255, 128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>追加：</p>

    <ul>
     <li>一致する属性セレクタのサブストリング： <code>E[attribute^="value"]、</code> <code>E[attribute$="value"]、</code> <code>E[attribute*="value"]</code> 。</li>
     <li>新しい疑似クラス： {{ cssxref(":target") }}、 {{ cssxref(":enabled") }}、 {{ cssxref(":disabled") }}、 {{ cssxref(":checked") }}、 {{ cssxref(":indeterminate") }}、 {{ cssxref(":root") }}、 {{ cssxref(":nth-child") }}、 {{ cssxref(":nth-last-child") }}、 {{ cssxref(":nth-of-type") }}、 {{ cssxref(":nth-last-of-type") }}、 {{ cssxref(":last-child") }}、 {{ cssxref(":first-of-type") }}、 {{ cssxref(":last-of-type") }}、 {{ cssxref(":only-child") }}、 {{ cssxref(":only-of-type") }}、 {{ cssxref(":empty") }}、 {{ cssxref(":not") }}。</li>
     <li>疑似要素は 1 つのコロンではなく、2&nbsp;つのコロンで表現されるようになった： <code>:after</code> は {{ cssxref("::after") }} に、<code>:before</code> は {{ cssxref("::before") }}&nbsp;に、 <code>:first-letter</code>&nbsp;は {{ cssxref("::first-letter") }} に、 <code>:first-line</code> は {{ cssxref("::first-line") }} になりました。</li>
     <li>新しい<em style="font-style:italic">一般的な兄弟ジェネレーター</em> ( <code>h1~pre</code> )。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p><a class="external" href="https://dev.w3.org/csswg/selectors4/" title="https://dev.w3.org/csswg/selectors4/">Selectors 仕様の次のイテレーション</a> はすでに進行していますが、まだ初めの Working Draft を公開する段階には至っていません。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(128, 255, 128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>' <code>|</code> ' 構文の使用と {{ cssxref("@namespace") }} CSS @-規則の追加による <em>CSS 修飾名</em>の概念が定義されたことで、XML 名前空間のサポートが追加されました。</p>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(128, 255, 128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>元のメディアタイプ（<code>print</code>、 <code>screen</code>、 <code>…</code>）を<code>、only screen and (color)</code> のような <a href="/ja/CSS/Media_queries" title="en/CSS/Media_queries">デバイスメディア特性のクエリ</a> を使用できる言語に拡張しました。</p>

    <p>メディアクエリは、CSS ドキュメントで使用されるだけではなく、{{ HTMLElement("link") }} 要素の{{ htmlattrxref("media","link") }} 属性のように、いくつかの HTML 要素の属性でも使用されています。</p>
   </td>
  </tr>
 </tbody>
</table>

<p>ホバーやポインターのような新しいメディア機能で、ユーザーエージェント上で Web サイトの入力方法をカスタマイズできる <a href="https://dev.w3.org/csswg/mediaqueries4" title="https://dev.w3.org/csswg/mediaqueries4">この仕様の次のイテレーション</a> が行われています。<code>script</code> メディア機能を使用した EcmaScript サポートの検出機能も提案されています。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(128, 255, 128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td>
  </tr>
  <tr>
   <td colspan="2">正式に HTML <a href="/ja/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> グローバル属性のコンテンツの構文が定義されました。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Backgrounds") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>追加：</p>

    <ul>
     <li><code>uri()</code> で定義されたものだけでなく、{{cssxref("&lt;image&gt;")}} のいずれかの方が backgorund でサポート。</li>
     <li>複数の background イメージのサポート。</li>
     <li>{{ cssxref("background-repeat") }}&nbsp;の <code>space</code>&nbsp;と <code>round</code>&nbsp;値、およびこの CSS プロパティの 2 値構文。</li>
     <li>{{ cssxref("background-attachment") }}&nbsp;の <code>local</code> 値。</li>
     <li>{{ cssxref("background-origin") }}&nbsp;と {{ cssxref("background-size") }}、{{ cssxref("background-clip") }} プロパティ。</li>
     <li>{{ cssxref("border-radius") }}&nbsp;と {{ cssxref("border-top-left-radius") }}、{{ cssxref("border-top-right-radius") }}、{{ cssxref("border-bottom-left-radius") }}、{{ cssxref("border-bottom-right-radius") }} プロパティによるカーブした枠線のサポート。</li>
     <li>{{ cssxref("border-image") }}&nbsp;と {{ cssxref("border-image-source") }}、{{ cssxref("border-image-slice") }}、{{ cssxref("border-image-width") }}、{{ cssxref("border-image-outset") }}、{{ cssxref("border-image-repeat") }} プロパティによる border での&nbsp;{{cssxref("&lt;image&gt;")}} の使用のサポート。</li>
     <li>{{ cssxref("box-shadow") }} プロパティを使用した要素の shadow のサポート。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p><a class="external" href="https://dev.w3.org/csswg/css4-background/" title="https://dev.w3.org/csswg/css4-background/">Background と Border 仕様の CSS4 イテレーション</a> は既に進行していますが、まだ初めの Working Draft を公開する段階には至っていません。この仕様では、border をクリックする機能（CSS {{ cssxref("border-clip") }}&nbsp;と {{ cssxref("border-clip-top") }}、{{ cssxref("border-clip-right") }}、{{ cssxref("border-clip-bottom") }}、{{ cssxref("border-clip-left") }} プロパティ）や、コーナーの border の形のコントロール（CSS {{ cssxref("border-corner-shape") }} プロパティの使用）を追加する予定です。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Multicol") }}</td>
  </tr>
  <tr>
   <td colspan="2">{{ cssxref("columns") }} と {{ cssxref("column-count") }}、{{ cssxref("column-fill") }}、{{ cssxref("column-gap") }}、{{ cssxref("column-rule") }}、{{ cssxref("column-rule-color") }}、{{ cssxref("column-rule-style") }}、{{ cssxref("column-rule-width") }}、{{ cssxref("column-span") }}、{{ cssxref("column-width") }}、{{ cssxref("break-after") }}、{{ cssxref("break-before") }}、{{ cssxref("break-inside") }} を使用した簡単な複数列レイアウトのサポートを追加。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Speech") }}</td>
  </tr>
  <tr>
   <td colspan="2"><code>speech</code> メディアタイプや聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Images") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>{{cssxref("&lt;image&gt;")}} データタイプの定義。</p>

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

    <p>追加：</p>

    <ul>
     <li>{{cssxref("&lt;resolution&gt;")}} データタイプに <code>dppx</code> 単位。</li>
     <li>url から 画像を定義する <code>url()</code> のより柔軟な代替えである <code>image()</code> 関数。<br />
      <em><strong>リスク</strong> </em> <strong> <em>：</em> </strong> <em> ブラウザサポートが不十分なため、<code>image()</code> 関数の標準化は、</em><em>このモジュールの次のイテレーションに延期されるかもしれません</em> <em>。</em></li>
     <li><code>linear-gradient()</code> と <code>repeating-linear-gradient()</code>、<code>radial-gradient()、repeating-radial-gradient()</code> のサポート。</li>
     <li>{{ cssxref("object-fit") }} プロパティを使用した、置き換えた要素がその要素にフィットすべきかどうかを定義する機能。<br />
      <em><strong>リスク</strong> </em><strong><em>：</em> </strong> <em>ブラウザサポートが不十分なため、{{ cssxref("object-fit") }} プロパティの標準化は、</em> <em>このモジュールの次のイテレーションに延期されるかもしれません</em> <em>。</em></li>
     <li>{{ cssxref("image-resolution") }} と {{ cssxref("image-orientation") }} プロパティを使用した外部イメージの解像度とオリエンテーションをオーバーライドする機能。<br />
      <em><strong>リスク</strong> </em> <strong> <em>：</em> </strong> <em> ブラウザサポートが不十分なため、{{ cssxref("image-resolution") }} と {{ cssxref("image-orientation") }} プロパティの標準化は、</em> <em>このモジュールの次のイテレーションに延期されるかもしれません</em> <em>。</em></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>CSS Image Level 3 を置き換えるであろう <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> は開発中で、{{Spec2("CSS4 Images")}} です。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Values") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>いくつかの CSS プロパティで <code>initial</code> と <code>inherit</code> キーワードを使えるようにしました。</p>

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

    <p>追加：</p>

    <ul>
     <li>フォント関連の長さの単位の定義： <code>rem</code> と <code>ch</code>。</li>
     <li>viewport関連の長さの単位の定義： <code>vw</code> と <code>vh</code>、<code>vmax</code>、<code>vmin</code>。</li>
     <li>実際には絶対的ではないが、<em>reference pixel</em> に関連して定義されている実際の絶対的な長さの単位についての精度。</li>
     <li>{{ cssxref("&lt;angle&gt;") }} と {{cssxref("&lt;time&gt;")}}、{{cssxref("&lt;frequency&gt;")}}、{{cssxref("&lt;resolution&gt;")}} の定義。</li>
     <li>{{cssxref("&lt;color&gt;")}} と {{cssxref("&lt;image&gt;")}}、{{cssxref("&lt;position&gt;")}} の基本の値の定義。</li>
     <li>{{ cssxref("calc", "calc()") }} と{{ cssxref("attr", "attr()")}}、<code>toggle()</code> の関数表記の定義。<br />
      <em><strong>リスク：</strong> ブラウザサポートが不十分なため、<code>calc()</code> と <code>attr()</code>、<code>toggle()</code> 関数表記はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

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

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Flexbox") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>flexbox レイアウトに CSS {{ cssxref("display") }} プロパティとそれを制御するいくつかの新しい CSS プロパティがついかされました：{{ cssxref("flex") }} と {{ cssxref("flex-align") }}、{{ cssxref("flex-direction") }}、{{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}、{{ cssxref("flex-line-pack") }}、{{ cssxref("flex-order") }}、{{ cssxref("flex-pack") }}、{{ cssxref("flex-wrap") }}。</p>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Conditional") }}</td>
  </tr>
  <tr>
   <td colspan="2">ブラウザ、またはドキュメントに適用される機能の条件である、スタイルシートの条件処理部分の機能が追加されました。これは主に、{{ cssxref("@media") }} 内部のネストされた @-規則の許可と新しい @-規則 {{ cssxref("@supports") }} の追加、新しい DOM メソッドの {{domxref("CSS.supports()")}} の追加で構成されています。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Text Decoration") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>拡張：</p>

    <ul>
     <li>{{ cssxref("text-decoration-line") }} と {{ cssxref("text-decoration-color") }}、{{ cssxref("text-decoration-style") }} プロパティのショートハンドを記述できる CSS {{ cssxref("text-decoration") }} プロパティ。{{ cssxref("text-decoration-skip") }} と {{ cssxref("text-underline-position") }} プロパティの追加。</li>
    </ul>

    <p>追加：</p>

    <ul>
     <li>SCSS {{ cssxref("text-emphasis") }} と {{ cssxref("text-emphasis-style") }}、{{ cssxref("text-emphasis-color") }}、{{ cssxref("text-emphasis-position") }} プロパティによる東アジアスクリプト強調記号のサポート。</li>
     <li>{{ cssxref("text-shadow") }} プロパティによるスクリプトシャドウのサポート。</li>
    </ul>

    <p>明確化：</p>

    <ul>
     <li>decoration のペイント順序。</li>
    </ul>

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

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Fonts") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>CSS2.1 フォントマッチングアルゴリズムを実際に実装されているものに近いものに修正します。</p>

    <p>追加：</p>

    <ul>
     <li>{{ cssxref("@font-face") }} @-規則 を通したダウンロードできるフォントのサポート。</li>
     <li>{{ cssxref("font-kerning") }} プロパティを通した図間のスペースの制御。</li>
     <li>{{ cssxref("font-language-override") }} プロパティを通した言語特定の図の選択。</li>
     <li>{{ cssxref("font-feature-settings") }} プロパティを通した特定の OpenType を持つ図の選択。</li>
     <li>{{ cssxref("font-size-adjust") }} プロパティを通した、代替えフォントを指定した場合の使用するアスペクト比の制御。</li>
     <li>{{ cssxref("font-stretch") }} と {{ cssxref("font-variant-alternates") }}、{{ cssxref("font-variant-caps") }}、{{ cssxref("font-variant-east-asian") }}、{{ cssxref("font-variant-ligatures") }}、{{ cssxref("font-variant-numeric") }}、{{ cssxref("font-variant-position") }} プロパティを使用した代替えフォントフェイスの選択。関連する {{ cssxref("font-variant") }} ショートハンドプロパティの拡張と {{ cssxref("@font-feature-values") }} @-規則 の導入。</li>
     <li>{{ cssxref("font-synthesis") }} プロパティを通した、何も見つからない場合の斜体、または太字の自動生成の制御。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Cascade") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>追加：</p>

    <ul>
     <li><code>initial と</code> <code>unset</code> 値。</li>
     <li>{{ cssxref("all") }} プロパティ。</li>
     <li>スコープメカニズム。</li>
    </ul>

    <p>明確化：</p>

    <ul>
     <li>メディア依存の@import 文とスタイルシートのロード要件の相互作用。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Writing Modes") }}</td>
  </tr>
  <tr>
   <td colspan="2">水平と垂直スクリプトの書き込みモードの定義と、新しい {{ cssxref("text-orientation") }} プロパティと必要な機能の拡張をすることで CSS {{ cssxref("direction") }} と {{ cssxref("unicode-bidi") }} プロパティの動作方法の明確化をしました。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Shapes") }}</td>
  </tr>
  <tr>
   <td colspan="2">フロートに適用することができる geometric shapes が定義されました。これらの shapes は、バウンディングボックスがラップする代わりに、インラインコンテンツが周囲をラップする領域を提供します。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Masks") }}</td>
  </tr>
  <tr>
   <td colspan="2">ビジュアル要素の部分を一部、または完全に隠すための方法が定義されました。これはほかのグラフィカル要素、または画像を<span class="short_text" id="result_box" lang="ja"><span>輝度</span><span>またはアルファ</span><span>マスクとして使用する方法を提供します。</span></span></td>
  </tr>
 </tbody>
</table>

<h3 id="リファインフェーズのモジュール">リファインフェーズのモジュール</h3>

<p><em>リファインフェーズ&nbsp;</em> であるとみなされている仕様は、既にかなり安定しています。まだ変更が想定されますが、現在の実装からの非互換性を作らないべきです；それらは、周辺的な動作を定義すべきです。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td>
   <td>{{ Spec2("Web Animations") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Counter Styles") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td>
   <td>{{ Spec2("Compositing") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Syntax") }}</td>
  </tr>
  <tr>
   <td colspan="2">charset の決定方法を明確化します；パースとトークン化アルゴリズムにマイナーな変更が行われました。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Will Change") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Transitions") }}</td>
  </tr>
  <tr>
   <td colspan="2">{{ cssxref("transition") }} と {{ cssxref("transition-delay") }}、{{ cssxref("transition-duration") }}、{{ cssxref("transition-property") }}、{{ cssxref("transition-timing-function") }} プロパティの追加により、 2 つのプロパティ値の間に作用する transition の定義を許可しました。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Animations") }}</td>
  </tr>
  <tr>
   <td colspan="2">{{ cssxref("animation") }}, {{ cssxref("animation-delay") }} と {{ cssxref("animation-direction") }}、{{ cssxref("animation-duration") }}、{{ cssxref("animation-fill-mode") }}、{{ cssxref("animation-iteration-count") }}、{{ cssxref("animation-name") }}、{{ cssxref("animation-play-state") }}、{{ cssxref("animation-timing-function") }} プロパティ、および {{ cssxref("@keyframes") }} @-規則 の追加によってもたらされる、 アニメーションの定義が許可されました。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Transforms") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>追加：</p>

    <ul>
     <li>{{ cssxref("transform") }} と {{ cssxref("transform-origin") }} プロパティを使用していずれかの要素に適用される 2 次元変形のサポート。サポートされる変形： <code>matrix</code><code>()</code> と<code> translate()</code>、<code>translateX()、</code><code>translateY()</code>、<code>scale()、</code><code>scaleX()</code>、<code>scaleY()、</code><code>rotate()、</code><code>skewX()、</code><code>skewY()</code>。</li>
     <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }} と {{ cssxref("perspective") }}、{{ cssxref("perspective-origin") }}、{{ cssxref("backface-visibility") }} プロパティの追加、および&nbsp; {{ cssxref("transform") }} プロパティの次の変更による拡張： <code>matrix</code> <code>3d()</code> と <code>translate3d()</code>、<code>translateZ()</code>、<code>scale3d()</code>、<code>scaleZ()、</code><code>rotate3d()、</code><code>rotateX</code><code>()、</code><code>rotateY</code><code>()、</code><code>rotateZ()、</code><code>perspective()</code> によっていずれかの要素に適用される 2 次元変形のサポート。</li>
    </ul>

    <p><em><strong>ノート：</strong> この仕様は CSS 2D-Transforms と CSS 3D-Transforms、SVG transforms のマージです。 </em></p>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Fragmentation") }}</td>
  </tr>
  <tr>
   <td colspan="2">ページや改行、ウィンド、orphans のハンドリングにおいて Web ページのパーティションで発生すべきことを定義します。
    <p>追加：</p>

    <ul>
     <li>ボックスが崩されたとき（ページ、または 列、改行）、 {{ cssxref("box-decoration-break") }} プロパティを使用した枠線と背景色やイメージなどの装飾の動作の定義をサポート.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Text") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>拡張：</p>

    <ul>
     <li>{{ cssxref("text-transform") }} プロパティの value <code>full-width</code> 値。</li>
     <li>テキストが複数の方向性を持つドキュメントのために、{{ cssxref("text-align") }} プロパティの <code>start</code> と <code>end、</code><code>start end</code>、<code>match-parent</code> 値のサポート</li>
     <li>文字を整列させる {{ cssxref("text-align") }} プロパティと {{cssxref("&lt;string&gt;")}} 値。 小数点数を揃えるのに有益。</li>
     <li>揃えを柔軟性を制御する範囲制約を持つ {{ cssxref("word-spacing") }} と {{ cssxref("letter-spacing") }} プロパティ</li>
    </ul>

    <p>追加：</p>

    <ul>
     <li>{{ cssxref("text-space-collapse") }} と {{ cssxref("tab-size") }} プロパティを使用したホワイトスペースの表示方法の制御。</li>
     <li>{{ cssxref("line-break") }} と {{ cssxref("word-break") }}、{{ cssxref("hyphens") }}、{{ cssxref("text-wrap") }}、{{ cssxref("overflow-wrap") }}、{{ cssxref("text-align-last") }} プロパティを使用した改行と単語の制御。</li>
     <li>より多くのスクリプトの種類をサポートするための、{{ cssxref("text-justify") }} プロパティを使用した揃えの発生方法の制御。</li>
     <li>{{ cssxref("text-indent") }} と {{ cssxref("hanging-punctuation") }} プロパティを使用した縁の効果の制御。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>初期の CSS Text Level 3 draft のいくつかの機能は、<a class="external" href="https://dev.w3.org/csswg/css3-text/#recent-changes" title="https://dev.w3.org/csswg/css3-text/#recent-changes">このモジュールの次のイテレーションに延期されました</a>。</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Variables") }}</td>
  </tr>
  <tr>
   <td colspan="2">CSS で変数を定義するメカニズムを定義します。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td>
   <td>{{ Spec2("Compositing") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<h3 id="修正フェーズのモジュール">修正フェーズのモジュール</h3>

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

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Basic UI") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>追加：</p>

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

<p>CSS Basic User Interface Module&nbsp;の次のイテレーションに追加されるもの初期リストが <a class="external" href="https://wiki.csswg.org/spec/css4-ui" title="https://wiki.csswg.org/spec/css4-ui">利用可能</a> です。</p>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Grid") }}</td>
  </tr>
  <tr>
   <td colspan="2"><a href="https://developer.mozilla.org/ja/docs/Web/CSS/display"><code>display</code></a> プロパティにグリッドレイアウトとこれを制御するいくつかの新しいプロパティの追加：{{cssxref("grid")}}、{{cssxref("grid-area")}}、{{cssxref("grid-auto-columns")}}、{{cssxref("grid-auto-flow")}}、{{cssxref("grid-auto-position")}}、{{cssxref("grid-auto-rows")}}、{{cssxref("grid-column")}}、{{cssxref("grid-column-start")}}、{{cssxref("grid-column-end")}}、{{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}、{{cssxref("grid-row-end")}}、{{cssxref("grid-template")}}、{{cssxref("grid-template-areas")}}、{{cssxref("grid-template-rows")}}、{{cssxref("grid-template-columns")}}。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Box Alignment") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Paged Media") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td>
   <td>{{ Spec2("CSSOM View") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 160, 100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td>
   <td>{{ Spec2("CSS4 Selectors") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<h3 id="探求フェースのモジュール">探求フェースのモジュール</h3>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td>
   <td>{{ Spec2("CSS4 Images") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>拡張：</p>

    <ul>
     <li>双方向感応イメージを許可する画像の方向<code>（rtl</code> か <code>ltr</code>）を提供する <code>image()</code> 関数表記。</li>
     <li>{{ cssxref("image-orientation") }} プロパティに、<span class="short_text" lang="ja"><span>画像に</span><span>保存されている</span><span> EXIF </span><span>データ</span><span>への追従</span><span>を</span><span>考慮できる</span></span><code> from-image</code> の追加。</li>
    </ul>

    <p>追加：</p>

    <ul>
     <li><span class="short_text" id="result_box" lang="ja"><span>画像の解像度</span><span>ネゴシエーション</span><span>選択を可能にして</span><span>、異なる</span><span>解像度で</span><span>同等の</span><span>画像の</span><span>定義を</span><span>許可する</span></span> <code>image-set()</code> 関数表記。</li>
     <li>画像のようにページの一部を使用できる <code>element()</code> 関数表記。</li>
     <li>2 つの画像間を遷移して、それらの間に挿入を定義するとき、中間画像を参照できる <code>cross-fade()</code> 関数表記。</li>
     <li>グラデーションの新しいタイプを表現する <code>conic-gradient()</code> と <code>repeating-conic-gradient()</code> 関数表記。</li>
     <li>オブジェクトのサイズ変更をどのように行うか定義する {{cssxref("image-rendering")}} プロパティ。</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Device") }}</td>
  </tr>
  <tr>
   <td colspan="2">初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が {{ cssxref("@viewport") }} に追加されます。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 GCPM") }}</td>
  </tr>
  <tr>
   <td colspan="2">ヘッダーやフッターだけでなく、インデックスやテーブルコンテンツのようなテーブルを制御できる様になることで、ドキュメントの印刷バージョンを調整する機能が追加されます。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Exclusions") }}</td>
  </tr>
  <tr>
   <td colspan="2">いずれかのポジションスキームで除外領域を定義するフロートを拡張します。コンテンツがフローすべき形態の概念を追加します。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Lists") }}</td>
  </tr>
  <tr>
   <td colspan="2">リスト作成者がスタイリングでき、Web 開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Regions") }}</td>
  </tr>
  <tr>
   <td colspan="2">コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Device") }}</td>
  </tr>
  <tr>
   <td colspan="2">初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が {{ cssxref("@viewport") }} に追加されます。</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td>
   <td>{{ Spec2("Filters 1.0") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Template") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Sizing") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Line Grid") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Positioning") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Ruby") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td>
   <td>{{ Spec2("CSSOM") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Overflow") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Font Loading") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Display") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Scope") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td>
   <td>{{ Spec2("CSS4 Media Queries") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td>
   <td>{{ Spec2("CSS Non-element Selectors") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td>
   <td>{{ Spec2("Geometry Interfaces") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 102, 102);"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Inline") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<h3 id="リライティングフェーズのモジュール">リライティングフェーズのモジュール</h3>

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

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 51, 51);"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Box") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 51, 51);"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Content") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width:100%">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255, 51, 51);"><strong>{{ SpecName("CSS3 Inline Layout", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Inline Layout") }}</td>
  </tr>
  <tr>
   <td colspan="2">&nbsp;</td>
  </tr>
 </tbody>
</table>

<p>&nbsp;</p>

このリビジョンへ戻す