CSS3各モジュールの現況(2015年8月)
内容
CSS3モジュール一覧表
またしても半年以上、更新を怠っていた「CSS3モジュール一覧」ですが、今年は9月にCSS3の講義を行うことになったので、夏休み中に仕様の現況をチェックしてみました。すると、新しいモジュールや分類項目が結構増えていたので、一覧表を作り直すことにしました。
それに伴い、表の「状況」欄には、前バージョンの仕様書と比較した状態を記してあります。初出のものが「新規」、策定レベルが同じで更新されたものが「改訂」、策定レベルが変更されたものが「昇格」もしくは「降格」です。また、作業草案段階の「Level 1」と「Level 4」は、いわゆる「Level 3」とは分けてあります。
- W3C「CSS Current Status」ページを参照して作成。2015年8月25日段階での策定状況です。
- W3Cの仕様策定(標準化)の過程は、①「作業草案(Working Draft)」、②「勧告候補(Candidate Recommendation)」、③「勧告案(Proposed Recommendation)」の段階を順に経て、最終的に「W3C勧告(W3C Recommendation)」として決定されます。
- 「編集者草案(Editor’s Draft)」は、実装の準備ができていない、作業草案以前の段階。もしくは、作業草案に対する実装準備ができていない変更提案。作業草案~W3C勧告がwww.w3.orgに掲載されるのに対し、編集者草案はdev.w3.orgの下に文書が掲示される場合があります。
- 「W3C作業グループノート」(Working Group Note)は、仕様としての策定が放棄された参照文献です。さらに、廃止となったものが「引退」(Retired)です。
各モジュールの概要
各モジュールでは、CSS Level 2までの概念やスタイルを再定義するとともに、プロパティや値、セレクターなどが新たに追加されているものがあります。また、CSS Animations(アニメーション)のように、これまでは無かったスタイルを定義するものもあります。
各モジュールの概要は、次のとおりです。
W3C勧告(確定仕様)
CSS Namespaces Module Level 3
@namespace構文で、名前空間を指定できるようになっています。
CSS Style Attributes
HTMLの要素の開始タグに、style属性を書き込む方法を定義しています。
Media Queries
@media等で使う、表示デバイスのメディア特性を指定する方法を定義しています。画面等のサイズを使った条件も指定できるようになっています。
Selectors Level 3
セレクターを定義しています。新しい属性セレクター、擬似クラス、セレクターの組み合わせが追加されたほか、擬似要素の書式が「要素::擬似クラス名」に変更されています。
CSS Color Module Level 3
色の値を定義しています。対象要素全体の透明度や色毎の透明度、そしてHSLカラーモードなどが追加されています。
勧告候補
CSS Basic User Interface Module Level 3 (CSS3 UI)
div要素等で表示させる「ボックス」の構造や、マウス・キーボード等の操作を、ユーザーインターフェイスとして制御する指定を定義しています。ボックス構造では、paddingの扱いを標準/互換モードのように制御するbox-sizingプロパティや、ユーザーの操作でボックスサイズを変えられるresizeプロパティ等が追加されています。
CSS Values and Units Module Level 3
プロパティ値の型と単位を定義しています。
CSS Counter Styles Level 3
@counter-style構文による、連番記号の指定方法が定義されています。
CSS Cascading and Inheritance Level 3
@importと@media構文が定義されています。
Compositing and Blending Level 1
mix-blend-mode等のプロパティにより、HTMLやSVGの要素に対して、乗算、覆い焼きカラー、オーバーレイといった「描画モード」を定義します。
CorelDRAW、Corel PHOTO-PAINT等の画像編集アプリケーションで使われているものと、同様の効果です。
Geometry Interfaces Module Level 1
オブジェクトの幾何学的変形を定義する、DOMインターフェイスの仕様ですが、CSS Transformsとの関連で、CSS仕様の一部として提起されています。
Encoding
CSSのモジュールに直接関わるものではありませんが、関連技術として文字コード(エンコーディング)の概念を定義しています。
CSS Backgrounds & Borders Module Level 3
背景色や背景画像と、境界線(border)の指定を定義しています。注目度が高いものとしては、背景画像の複数指定やサイズ指定、コーナーの角丸、ボックスに対するドロップシャドウなどが追加されています。
CSS Masking Module Level 1
HTMLの要素やSVG画像に対し、輝度マスク(luminance mask)画像を指定することによって、マスキング効果を与える新しいプロパティが定義されています。
CSS Writing Modes Level 3
テキストの表示方向の指定を定義しています。縦書きテキストが、正式にサポートされています。
CSS Shapes Module Level 1
インライン表示のフローコンテンツ(基本的には文字列)を回り込ませるための形状を、定義します。円形や不定形での回り込みを、実現させます。
CSS Syntax Module Level 3
CSSの構文全般を定義しています。
CSS Fonts Module Level 3
書体や文字サイズ等の指定を定義しています。文字の変形(長体/平体)や異体字、字詰指定のほか、サーバー上に置いたフォントを表示させるWebフォントの指定が追加されています。
CSS Text Decoration Module Level 3
下線、傍点といった文字装飾を制御する指定を定義しています。また、文字にドロップシャドウを付けるスタイルも追加されています。
文字のドロップシャドウ(text-shadowプロパティ)は、当初CSS Text Level 3で定義されていましたが、このプロパティを含め、文字装飾に関わるものは2012年11月13日にCSS Text Decoration Module Level 3に移されました。
CSS Conditional Rules Module Level 3
@構文の入れ子ルール、@media構文の条件式、@document構文が定義されています。
CSS Image Values and Replaced Content Module Level 3
値として使う(たとえばbackground-imageの値)画像や、画像に置き換わる内容の指定を定義しています。“画像に置き換わる内容”として最も注目度が高いものは、グラデーションでしょう。
勧告候補になってはいますが、グラデーションの向きを指定する引数が変更されているため、以前の方法で指定している場合は注意してください。
また、フォールバックコンテンツ(表示できない場合の代替コンテンツ)として複数の値を指定できるようにしているほか、ビットマップ画像に解像度の指定が可能になっています。
CSS Speech Module
音声ブラウザーでの、音声コントロールを定義しています。
CSS Multi-column Layout Module
テキストの段組みを指定する、新しいプロパティが定義されています。
最終作業草案
CSS Flexible Box Layout Module Level1
フロートに替わる、ボックス要素の横並び方法(フレックスボックス)を定義します。横並びにさせるボックスの表示順序も指定できます。
CSS Font Loading Module Level 3
ブラウザー(ユーザー エージェント)に、Webフォントを読み込む際の挙動が定義されています。
CSS Custom Properties for Cascading Variables Module Level 1
ユーザー定義のスタイル(変数)を値として使用できるようにします。
:root擬似クラスで–red-color:rgb(255,0,0)のようにスタイル定義をしたうえで、プロパティ値にvar関数の引数としてユーザー定義スタイルを使用します。
:root {
--red-color:rgb(255,0,0);
}
h1 {
color:var(--red-color);
}
CSS Text Module Level 3
テキストの揃えと改行や行末の表示処理、インデント等を制御する指定を定義しています。text-justifyプロパティは、ここで正式に定義されています。
作業草案
CSS Page Floats
テキストの回り込み処理をするfloatプロパティの機能を拡張し、float-reference、float-defer、float-offset等のプロパティが追加されています。
Priorities for CSS from the Digital Publishing Interest Group
電子出版において、組版に援用されるCSSの概念とプロパティを集約した参考仕様です。
Requirements for Chinese Text Layout |中文排版需求
中国語の組版概念を集約した参考仕様です。
Requirements for Hangul Text Layout and Typography | 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항
ハングルの組版概念を集約した参考仕様です。
なお、日本語の組版概念に関しては、“参考文献”である「W3C作業グループノート」に分類された「Requirements for Japanese Text Layout」があります。
CSS Display Module Level 3
displayプロパティによる、拡張されたボックス表示の方法を定義しています。また、display:noneに代わる、DOMツリーに影響を与えない表示/非表示の切り替え方法として、box-suppressプロパティが定義されています。
Timed Text Markup Language 2 (TTML2)
動的なテキスト表示を指定する言語、「TTML」バージョン2の仕様です。動画のキャプションなどでの利用が想定されるため、CSS関連仕様として提起されています。
CSS Positioned Layout Module Level 3
positionプロパティの機能強化(新プロパティの追加)等が定義されています。
Predefined Counter Styles
「CSS Counter Styles Level 3」に関連し、多言語の連番記号が定義されています。
CSS Fragmentation Module Level 3
改ページ、改段等の、ページや段組みレイアウトの表示を制御するプロパティが定義されています。
CSS Box Alignment Module Level 3
ブロックレベル表示、テーブル、フレキシブルボックスレイアウト、グリッドレイアウトにおける、ボックスの配置方法を制御するプロパティが定義されています。
CSS Inline Layout Module Level 3
initial-letterプロパティ等による、ドロップキャップ文字を直接指定する方法が定義されています。
WebVTT: The Web Video Text Tracks Format
ビデオにテキストトラックを入れる書式が定義されています。直接CSSモジュールを定義するものではなく、関連仕様として提起されています。
CSS Generated Content for Paged Media Module
ページ表示における様々な制御方法を定義しています。その中には、リンクのターゲット指定や、垂直方向のフロートなどが含まれています。
SVG Integration
HTML/CSSで、SVGを組み込む方法が定義されています。直接CSSモジュールを定義するものではなく、関連仕様として提起されています。
CSS Lists and Counters Module Level 3
リストの表示スタイルを定義しています。擬似要素としての::markerや、@構文での@counter-styleが追加されています。
CSSOM View Module
CSS オブジェクトモデルの表示を定義しています。プロパティや値ではなく、表示方法の基本概念が定義されています。
CSSOM (CSS Object Model)
CSSオブジェクトモデルを定義しています。これは、プログラム等でCSSを解析する上での概念を提示しています。
CSS Transitions
要素に表示の切り替え効果を指定する、新しいプロパティが定義されています。
DOMMatrix interface
CSS Transformsとの関連で、DOMマトリックス インターフェイスの仕様が提起されています。
CSS Overflow Module Level 3
オーバーフローした要素内容の処理方法を定義しています。
CSS Paged Media Module Level 3
印刷レイアウトを念頭に置いた、ページの制御を定義しています。
CSS Animations
要素にキーフレームを使ったアニメーションを指定する、新しいプロパティが定義されています。
CSS Intrinsic & Extrinsic Sizing Module Level 3
幅や高さのプロパティに対し、要素内容に応じた調整ができるような値が追加されています。
CSS Device Adaptation
ビューポートを制御する@viewport文が定義されています。表示画面に合わせた内容のスケーリングが可能になります。
CSS basic box model
幅、高さ、内側/外側余白といった、CSSによって表示されるボックスの概念を定義しています。
CSS Generated and Replaced Content Module
contentプロパティなどによって生成/追加される内容の概念を定義しています。
CSS3 module: line
line-heightなど、行の表示に関わる指定を定義しています。
Level 1 作業草案
CSS Grid Layout Module Level 1
ページにグリッドを定義し、そのマス目に応じて要素を配置させる「グリッドレイアウト(Grid Layout)」の指定を定義しています。IE11、MS Edgeは、このスタイルを実装しています。
Web Animations
CSS Transitions、CSS AnimationsおよびSVGに関わる、アニメーション制御のモデル(概念)が定義されています。
Motion Path Module Level 1
motion-pathプロパティ等によって、パスに沿ったアニメーションを指定する方法が定義されています。
CSS Scroll Snap Points Module Level 1
scroll-snap-points-x、scroll-snap-points-y、scroll-snap-destinationプロパティ等によって、画面スクロールを表示内容にスナップさせる方法が定義されています。IE11、MS Edgeは、このスタイルを部分的に実装しています。
CSS Exclusions Module Level 1
テキストに対する、ブロックレベル表示要素(グリッドレイアウトを含む)の回り込みを定義します。従来のfloatプロパティよりも、高度な回り込み方法を定義しています。IE11、MS Edgeは、このスタイルを実装しています。
Filter Effects Module Level 1
SVG画像に対する特殊効果(ドロップシャドウやガウスぼかしといったフィルター効果)や、そのレンダリング技術を定義しています。通常のHTMLの要素を対象としたものではありません。MS Edgeは、試験的機能としてこのスタイルを実装しています。
CSS Regions Module Level 1
要素を領域として定義し、それらにiframe要素で読み込んだ別ファイルの内容を、連結された状態で流し込む方法を定義しています。IE11、MS Edgeは、このスタイルを実装しています。
CSS Line Grid Module Level 1
line-grid、line-snapプロパティ等により、テキストを行のグリッドラインで整列させる方法が定義されています。
CorelDRAWの「ベースライングリッド」と、同様の機能です。
CSS3 Ruby Module Level 1
フリガナ(ルビ)の表示に関わる指定を定義しています。
Non-element Selectors Module Level 1
要素ではないノードを特定するセレクターの概念が、定義されています。実際のセレクターは、Selectors Level 4で定義されます。
CSS Will Change Module Level 1
will-changeプロパティによって、CSS 3D Transformsなどで変化させる要素を特定し、他の静的な要素と区別することによって、ブラウザー(ユーザーエージェント)の表示にかかる負荷を最適化する方法を定義しています。
CSS Scoping Module Level 1
@scope構文によって対象要素を特定し、その子孫要素にのみスタイル指定する方法を定義しています。
また、Selectors Level 4で定義されるスコープセレクターや、CSS Cascading and Inheritance Level 3で定義される子孫要素に対する継承の概念も、定義されています。
CSS Transforms Module Level 1
ボックス要素の移動、回転、スケール、斜変形といった変形を指定する、新しいプロパティが定義されています。XY軸方向の二次元変形だけでなく、Z軸方向を加えた三次元変形や遠近効果にも対応しています。
以前は2D Transformationsと3D Transformationsに分かれていましたが、CSS Transformsとして統一され、さらにLevel 1へ再定義されました。
Level 4 作業草案
Level 4は、既にW3C勧告もしくは勧告候補となったLevel 3モジュールの拡張として策定が開始された、後継仕様です。
- CSS Cascading and Inheritance Level 4
- CSS Pseudo-Elements Module Level 4
この名称のモジュールはLevel 3にはありませんが、擬似要素の仕様を定義するものです。 - Media Queries Level 4
- Selectors Level 4
- CSS Image Values and Replaced Content Module Level 4
Level 4 編集者草案
正式な作業草案以前のものですが、以下の2モジュールが提起されています。
- CSS Backgrounds and Borders Module Level 4
- CSS Text Level 4