Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

この記事は技術レビューを必要としています。ぜひご協力ください

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 コンソーシアムは、20072010 のように、定期的にそのようなスナップショットを公開しています。

現在のところ、レベル 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 勧告 since June 7th, 2011

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

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

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

Selectors Level 3 勧告 since September 29th, 2011

追加:

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

CSS Namespaces Module 勧告 since September 29th, 2011

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

Media Queries 勧告 since June 19th, 2012

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

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

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

CSS Style Attributes 勧告 since November 7th, 2013
正式に HTML style グローバル属性のコンテンツの構文が定義されました。
CSS Backgrounds and Borders Module Level 3 勧告候補

追加:

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

CSS Multi-column Layout Module 勧告候補
columnscolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthbreak-afterbreak-beforebreak-inside を使用した簡単な複数列レイアウトのサポートを追加。
CSS Speech Module 勧告候補
speech メディアタイプや聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。
CSS Image Values and Replaced Content 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 勧告候補

flexbox レイアウトに CSS display プロパティとそれを制御するいくつかの新しい CSS プロパティがついかされました:flexflex-alignflex-directionflex-flow, flex-item-alignflex-line-packflex-orderflex-packflex-wrap

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

拡張:

追加:

明確化:

  • decoration のペイント順序。

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

CSS Fonts Module Level 3 勧告候補

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

追加:

CSS Cascading and Inheritance Level 3 勧告候補

追加:

  • initial と unset 値。
  • all プロパティ。
  • スコープメカニズム。

明確化:

  • メディア依存の@import 文とスタイルシートのロード要件の相互作用。
CSS Writing Modes Module Level 3 勧告候補
水平と垂直スクリプトの書き込みモードの定義と、新しい text-orientation プロパティと必要な機能の拡張をすることで CSS directionunicode-bidi プロパティの動作方法の明確化をしました。
CSS Shapes Module Level 1 勧告候補
フロートに適用することができる geometric shapes が定義されました。これらの shapes は、バウンディングボックスがラップする代わりに、インラインコンテンツが周囲をラップする領域を提供します。
CSS Masking 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 草案
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function プロパティの追加により、 2 つのプロパティ値の間に作用する transition の定義を許可しました。
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 勧告候補
ページや改行、ウィンド、orphans のハンドリングにおいて Web ページのパーティションで発生すべきことを定義します。

追加:

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

拡張:

  • text-transform プロパティの value full-width 値。
  • テキストが複数の方向性を持つドキュメントのために、text-align プロパティの startend、start 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 プロパティにグリッドレイアウトとこれを制御するいくつかの新しいプロパティの追加:gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-positiongrid-auto-rowsgrid-columngrid-column-startgrid-column-endgrid-row, grid-row-startgrid-row-endgrid-templategrid-template-areasgrid-template-rowsgrid-template-columns
CSS Box Alignment Module 草案
 
CSS Paged Media Module Level 3 草案
 
CSS Object Model (CSSOM) View Module 草案
 
Selectors Level 4 草案
 

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

CSS Image Values and Replaced Content 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 and Counters Module Level 3 草案
リスト作成者がスタイリングでき、Web 開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。
CSS Regions Module Level 1 草案
コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。
CSS Device Adaptation 草案
初期のコンテナブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が @viewport に追加されます。
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 不明
 

 

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

 このページの貢献者: takahashim, momdo, YuichiNukiyama, lv7777
 最終更新者: takahashim,