CSS Snapshot 2020 日本語訳

1. 概論

最初のCSS仕様が公開されたときに、CSSのすべては、CSSレベル1を定義した1つの文書に含まれていました。CSSレベル2はまた、複数の章からなる単独の文書によって定義されていました。しかし、レベル2を超えるCSSに対して、CSSワーキンググループは、単一のモノリシックな仕様​を定義するよりもむしろ、各モジュールがCSSのある部分を定義することで、モジュール式のアプローチを採用することにしました。これは、より管理しやすい塊に仕様を分割し、CSSへのより直接的で、漸進的な改善を可能にします。

種々のCSSモジュールは安定性の異なるレベルにあるため、CSSワーキンググループは、2020年初頭現在でカスケーディングスタイルシートの現在の範囲と状態を定義するために、このプロファイルを公開することを選択しました。このプロファイルは、我々が安定性を検討し、かつ我々がその安定性を保証する十分な実装経験を持つ仕様のみが含まれます。

注：これは、CSSデスクトップブラウザーのプロファイルであることを意図しません。このプロファイルに含まれるものは、機能の安定性にのみ基づき、予想される用途やウェブブラウザーの採用に基づきません。このプロファイルは、最も完全な形でCSSを定義します。

注：我々は、このスナップショットを形成する仕様に大きな変更を予想しませんが、包含する仕様は、仕様が固まっていることを意味するものではありません。CSSワーキンググループは、仕様で見つかる問題に対処し続けます。実装者は、任意の変更、修正、または明確化に対してwww-styleおよび/またはCSS Working Group Blogを監視すべきです。

1.1. 背景：W3CプロセスとCSS

この節は非規範的です。

W3Cプロセスにおいて、勧告トラック文書は以下にまとめられる、安定性の3つのレベルを通過します：

草案（Working Draft: WD）

これは、W3C仕様の設計段階です。ワーキンググループは、内部および外部のフィードバックに応えて仕様を繰り返し発行します。

最初の公式作業草案は、「最初の公開草案」（First Public Working Draft: FPWD）に指定されます。CSSワーキンググループにおいて、FPWDの発行は、ワーキンググループ全体が、編集者草案で大まかに調べられ提案されたように、モジュールで作業することに合意したことを示します。

次の段階への移行は時に「最終作業草案」（Last Call Working Draft: LCWD）段階と呼ばれます。一旦我々がすべての既知の問題を解決してCSSワーキンググループは作業草案を移行し、テストの構築と実装からフィードバックなしにさらにプロセスを進めることができません。

この「コメントに対するラストコール」は、任意の未解決の問題を報告するための期限を設定し、入ってくるフィードバックを特別に追跡して対処することをワーキンググループに要求します。コメント追跡文書は、コメントの処置（Disposition of Comments: DoC）になります。これは、広いレビューと支持を実証するために、ディレクターの承認に対する更新された草案と一緒に提出されます。

勧告候補（Candidate Recommendation: CR）

これは、W3C仕様のテスト段階です。とりわけこの段階は、仕様をテストするために試験と実装を使用するということを意味します。実装をテストすることが目的ではありません。このプロセスは多くの場合、仕様についてより多くの問題を明らかにするので、勧告候補は実装とテストのフィードバックに応じて時間をかけて変化させます。もっとも通常は設計段階（草案）の間よりも少なくなります。

各機能の2つの正しい、独立している実装の実証は、勧告候補を終了するのに必要なので、この段階でワーキンググループはテストスイートを作成して実装のレポートを生成します。

次の段階への移行は、「勧告案」（Proposed Recommendation: PR）です。この段階の間にW3C諮問委員会は、勧告への移行を承認しなければなりません。

勧告（Recommendation: REC）

これは、W3C仕様の完成した状態であり、メンテナンス段階を表します。この時点で草案は、エラッタ文書を維持し、仕様に戻るエラッタを組み込む更新版を折に触れて発行します。

編集者草案（Editor’s Draft）は、効果的に編集者自身の作業コピーのライブコピーです。編集者草案は、ワーキンググループのコンセンサスを反映してもしなくてもよく、折に触れて自己矛盾した状態にすることができます。（W3Cでの公開プロセスは時間がかかり面倒なので、編集者草案は通常、仕様に対する最善の（最新の）基準です。公式草案が定期的に最新でありそして編集者草案がスクラッチスペースとしての本来の機能に戻ることができるように、試みは発行の衝突を低減するために現在進行中です。）

2. CSS仕様の分類

すべてのCSSモジュール、安定か進行中、およびモジュールのステータスのリストは、CSS Current Work pageで見つけることができます。

2.1. Cascading Style Sheets (CSS) — 公式の定義

2020年現在で、カスケーディングスタイルシート（CSS）は、次の仕様によって定義されます。

CSS Level 2、最新のリビジョン（エラッタを含む）[CSS2]

これは、後の仕様によって上書きされる部分の、CSSの中核を定義します。我々は、CSSの基本的な概念とその設計原理の一部を紹介する、2章を読むことを特に推奨します。

CSS Syntax Level 3 [CSS-SYNTAX-3]

CSS2§4.1、CSS2§4.2、CSS2§4.4、およびCSS2§Gを置き換え、CSSの解析方法を再定義します。

CSS Style Attributes [CSS-STYLE-ATTR]

CSS宣言をマークアップ属性に埋め込むことを可能にする方法を定義します。

Media Queries Level 3 [CSS3-MEDIAQUERIES]

CSS2§7.3を置換し、メディア固有のスタイルに対する構文を拡張します。

CSS Conditional Rules Level 3 [CSS-CONDITIONAL-3]

CSS2§7.2を拡張し、ネストを可能にするために@media規則の定義を更新し、機能サポートクエリーのための@supports規則を導入します。

Selectors Level 3 [SELECTORS-3]

拡張されたセレクターの範囲を定義する、CSS2§5とCSS2§6.4.3を置換します。

CSS Namespaces [CSS3-NAMESPACE]

名前空間接頭辞のセレクターを可能にするための@namespace規則を導入します。

CSS Cascading and Inheritance Level 4 [CSS-CASCADE-4]

CSS2§1.4.3およびCSS2§6、そして[CSS-CASCADE-3]を拡張して置換します。スタイル規則を照合し、すべての要素のすべてのプロパティに値を割り当てる方法を説明します。カスケーディングと継承の方法として、すべての要素のすべてのプロパティに対して値は伝播されます。

CSS Values and Units Level 3 [CSS-VALUES-3]

CSS2§1.4.2.1、CSS2§4.3、およびCSS2§A.2.1-3を置換し、CSSのプロパティ定義構文を定義して単位のセットを拡張します。

CSS Custom Properties for Cascading Variables Module Level 1 [CSS-VARIABLES-1]

すべてのCSSプロパティで受け入れられる新しいプリミティブ値の型と、そのCSSプロパティを定義するためのカスタムプロパティとしてカスケード変数を導入します。

CSS Box Model Level 3 [CSS-BOX-3]

Replaces CSS2§8.1, §8.2, §8.3 (but not §8.3.1), and §8.4.

CSS Color Level 3 [CSS-COLOR-3]

CSS2§4.3.6、CSS2§14.1、およびCSS2§18.2を拡張して置き換え、色の値の範囲を拡張します。また、opacityプロパティを導入します。

CSS Backgrounds and Borders Level 3 [CSS-BACKGROUNDS-3]

CSS2§8.5およびCSS2§14.2を拡張して置き換え、層状の背景画像、画像のボーダー、ドロップシャドウなどの背景と境界線をより細かく制御できるようにします。

CSS Images Level 3 [CSS-IMAGES-3]

外部2次元画像値タイプを再定義して組み込み、ネイティブ2次元グラデーションを導入し、置換要素のサイズ設定とレンダリングのための追加のコントロールを追加します。

CSS Fonts Level 3 [CSS-FONTS-3]

CSS2§15を拡張して置き換え、フォントの選択と機能の選択をより細かく制御できるようにします。

CSS Writing Modes Level 3 [CSS-WRITING-MODES-3]

左から右（たとえば、ラテン語またはインド語）、右から左（たとえば、ヘブライ語またはアラビア語）、双方向（たとえば、ラテン語およびアラビア語の混合）および縦（たとえば、アジアの文字）など、さまざまな国際的な書字モードのためのCSSサポートを定義します。CSS2§8.6および§9.10を置換して拡張します。

CSS Multi-column Layout Level 1 [CSS-MULTICOL-1]

CSSレイアウトに多段組みのフローを導入します。

CSS Flexible Box Module Level 1 [CSS-FLEXBOX-1]

CSSに柔軟な直線レイアウトモデルを導入します。

CSS User Interface Module Level 3 [CSS-UI-3]

CSS2§18.1とCSS2§18.4を拡張して置き換え、cursor、outline、そしてさらにユーザーインターフェイスを強化する複数の新しいCSSの機能を定義します。

CSS Containment Module Level 1 [CSS-CONTAIN-1]

containプロパティを導入します。これは、うまく使用されたときにユーザーエージェントによる大幅な最適化を可能にするために、要素のサブツリーの独立したCSS処理を強制するものです。

CSS Transforms Level 1 [CSS-TRANSFORMS-1]

CSSに座標ベースのグラフィカル変換を導入します。

CSS Compositing and Blending Level 1 [COMPOSITING]

オーバーレイされたコンテンツの合成や混合を定義し、それらのモードを制御するための機能を導入します。

CSS Easing Functions Level 1 [CSS-EASING-1].

ある値の変化率を制御する変換を著者が定義する方法について説明します。このような変換をアニメーションに適用すると、運動量などの物理現象を模倣したアニメーションを作成したり、アニメーションを離散的なステップで移動させてロボットのような動きをさせることができます。

2.2. 実装経験が少ないが、かなり安定したモジュール

次のモジュールは、設計作業を完了し、かなり安定していますが、まだ多くのテストと実装経験を受けていません。今後のスナップショットでCSSの公式定義に組み込むことを期待しています。

Media Queries Level 4 [MEDIAQUERIES-4]

構文の拡張、ほとんどのメディアタイプの廃止、新しいメディア機能を導入する、[CSS3-MEDIAQUERIES]を拡張して置き換えます。

CSS Color Level 4 [CSS-COLOR-4]

[CSS-COLOR-3]を拡張して置き換え、CSSで表現できる色の範囲をさらに拡大します。

CSS Display Module Level 3 [CSS-DISPLAY-3]

CSS2§9.1.2、§9.2.1（§9.2.1.1ではない）、§9.2.2（§9.2.2.1ではない）、§9.2.3および§9.2.4を置き換え（そして、§9.7を置き換えるための基礎を築きます ）、CSS整形ボックスツリーが文書要素ツリーからどのように生成されるかを定義し、それを制御する表示プロパティを定義します。

CSS Writing Modes Level 4 [CSS-WRITING-MODES-4]

[CSS-WRITING-MODES-3]を拡張および置き換えて、縦書きのオプションを追加します。

CSS Box Sizing Level 3 [CSS-SIZING-3]

CSS§10を上書きして拡張し、サイジングプロパティの値集合を拡張し、より正確なサイジング用語を導入し、CSS2で漠然と定義されているさまざまな自動サイジングの概念をより正確かつ詳細に定義します。

CSS Fragmentation Module Level 3 [CSS-BREAK-3]

フローをページ、列、または領域に分割し、それを制御するプロパティを定義する断片化モデルについて説明します。 CSS2§13.3を拡張して置き換えます。

CSS Box Alignment Module Level 3 [CSS-ALIGN-3]

さまざまなCSSボックスレイアウトモデル（ブロックレイアウト、テーブルレイアウト、フレックスレイアウト、グリッドレイアウト）でコンテナ内のボックスの配置を制御するプロパティを導入します。

CSS Shapes Module Level 1 [CSS-SHAPES-1]

非矩形を包む形状をもたらすためのフロート（CSS2§9.5)）を拡張します。

CSS Text Module Level 3 [CSS-TEXT-3]

§16.2を除くCSS2§16を拡張して置き換え、テキスト操作のプロパティを定義し、それらの処理モデルを指定します。これは、改行、行端揃えと整列、空白の処理、およびテキスト変換を取り扱います。

CSS Text Decoration Level 3 [CSS-TEXT-DECOR-3]

CSS2§16.3を拡張して置き換え、テキスト装飾線をより細かく制御し、テキスト強調マークとテキストシャドウを指定する機能を追加します。

CSS Counter Styles Level 3 [CSS-COUNTER-STYLES-3]

<counter-style>の可能な値を拡張し、カスタマイズされたカウンタースタイルに@counter-style構文を提供します。

CSS Masking Level 1 [CSS-MASKING-1]

CSS2§11.1.2を置換し、コンテンツの切り抜きやマスキングのより強力な方法を導入します。

CSS Scroll Snap Module Level 1 [CSS-SCROLL-SNAP-1]

「スナップ位置」でのパンとスクロールの動作を制御する機能を含みます。

CSS Speech Module Level 1 [CSS-SPEECH-1]

（非規範的な）音声レンダリングの章を見直し、CSS2§Aを置換します。

2.3. ラフな相互運用性をもつモジュール

以下のモジュールはラフな相互運用性で広く展開されていますが、それらの詳細は完全に決着がつかないか、十分に指定されておらず、さらにテストとバグ修正が必要です。今後のスナップショットでCSSの公式定義に組み込むことを期待しています。

CSS Transitions Level 1 [CSS-TRANSITIONS-1] およびCSS Animations Level 1 [CSS-ANIMATIONS-1].

CSSプロパティの算出値を時間の経過とともに遷移させるメカニズムを導入します。

CSS Grid Layout Module Level 1 [CSS-GRID-1]

ユーザーインターフェイス設計に最適化された、2次元グリッドベースのレイアウトシステムを導入します。グリッドレイアウトモデルにおいて、グリッドコンテナの子は、定義済みのフレキシブルまたは固定サイズのレイアウトグリッド内の任意のスロットに配置することができます。

CSS Grid Layout Module Level 2 [CSS-GRID-2]

[CSS-GRID-1]を拡張して置き換え、共有グリッドフレームワークでネストされたマークアップを管理するための“サブグリッド”を導入します。

CSS Will Change Level 1 [CSS-WILL-CHANGE-1]

will-changeと呼ばれるパフォーマンスヒントのプロパティを導入します。

Filter Effects Module Level 1 [FILTER-EFFECTS-1]

文書に表示される前に要素のレンダリングを処理する方法として、フィルター効果を導入します。

CSS Font Loading Module Level 3 [CSS-FONT-LOADING-3]

フォントリソースを動的にロードするために使用されるイベントとインターフェイスを導入します。

2.4. CSSのレベル

Cascading Style Sheetsは、従来の意味におけるバージョンを持ちません。代わりに、レベルを持ちます。CSSの各レベルは、定義を洗練して機能を追加する、前のレベルに基づきます。各上位レベルの機能セットは、任意の下位レベルのスーパーセットであり、上位レベルで特定の機能を許可される動作は、下位レベルで許可されるもののサブセットです。よってCSSの上位レベルに適合するユーザーエージェントはまた、すべての下位レベルに適合します。

CSS Level 1

CSSワーキンググループは、CSS1仕様が時代遅れであると考えます。CSSレベル1は（プロパティ、値、@規則など）CSS1仕様で定義されるすべての機能として定義されますが、CSS2.1仕様における構文と定義を使用します。CSSスタイル属性は、要素固有のスタイル属性で包含物を定義します。

CSS Level 2

CSS2仕様は技術的にW3C勧告ですが、W3Cが勧告候補の段階を定義する前に、CSS2は勧告段階に移行しました。時間をかけての実装経験とさらなるレビューは、CSS2仕様で多くの問題を表面化させ、既に手に負えないエラッタリストを拡充する代わりに、CSSワーキンググループは、CSS Level 2 Revision 1 （CSS2.1）を定義することにしました。2つの仕様の間に矛盾がある場合にはCSS2.1が最終的な定義を含みます。

CSS2の廃止されたCSS2勧告として正式に安定性の同じレベルでないにもかかわらず、一度CSS2.1が勧告候補になれば効果を持ちます。CSS2.1から削除されたCSS2の機能は、勧告候補の段階にあると考えられますが、これらの多くはCSSレベル3草案にすでに取り入れられているか、将来取り入れられることに注意すべきです。その場合にその仕様が一度勧告候補に到達すれば、CSS2の定義は廃止されます。

CSS2.1仕様はCSSレベル2を定義し、CSSスタイル属性仕様は要素固有のスタイル属性での包含物を定義します。

CSS Level 3

CSSレベル3は、CSS2.1の核としてCSS2.1仕様を使用する、CSSレベル2モジュールごとに基づきます。各モジュールは、機能を追加および/またはCSS2.1仕様の一部を置換します。新しいCSSモジュールがCSS2.1仕様と矛盾しないことをCSSワーキンググループは意図します。モジュールは単に機能を追加して、定義を洗練します。各モジュールが完了するように、以前に完了したモジュールに加えるCSS2.1の既存のシステムに埋め込まれます。

これ以降のモジュールレベルは、独立してレベル付けされます。たとえばSelectors Level 4は、CSS Line Module Level 3の前に完了してもよいです。CSSレベル2と同等なものがないモジュールは、レベル1で開始します。CSSレベル2に存在する機能を更新するモジュールは、レベル3で開始します。

CSS Level 4以降

CSSレベル4は存在しません。独立したモジュールはレベル4以降に到達することができますが、CSS言語はもはやレベルを持ちません。（用語としての「CSSレベル3」は、以前のモノリシックバージョンからレベルを区別するためにのみ使用されます。）

2.5. CSSプロファイル

すべての実装が、CSSで定義されるすべての機能を実装するとは限りません。

これまで、ワーキンググループは、さまざまなクラスのユーザーエージェントがサポートする予定のCSSの最小サブセットを定義するための、いくつかのプロファイルを公開しました。

ワーキンググループは効果的で有用なものと判断せず、以前定義されたプロファイルは維持されていないため、この作業は中止されました。

注：たとえCSSのサブセットが公式プロファイルであっても、CSSの部分的な実装は、部分的実装のための前方互換構文解析規則に従わなければなりません。

3. CSSの責任ある実装に対する要求

以下の節は、現在と将来の相互運用性を促進するような方法で、責任を持ってCSSを実装するための複数の適合性要件を定義します。

3.1. 部分的実装

著者がフォールバックの値を割り当てるための上位互換の解析規則を利用することができるようにするために、CSSレンダラは任意の@規則、プロパティ、プロパティの値、キーワード、その他レンダラが使用可能なサポートのレベルがない構文要素を、無効（そして必要に応じて無視）として扱わなければなりません。特に、ユーザーエージェントはある1つの複数値プロパティ宣言において非サポートのコンポーネントの値を無視し、かつサポートされる値を選択的に履行してはなりません。任意の値が無効と見なされる（サポートされない値はそうでなければならない）場合、CSSは宣言全体が無視される必要があります。

3.2. 不安定な実装とプロパティ機能

将来の安定したCSS機能との衝突を避けるために、CSSワーキンググループは、不安定な機能とCSSへの独自拡張の実装に対する次のベストプラクティスを推奨します。

3.2.1. 実験および不安定な機能

W3C仕様書に記載されるが、相互運用可能でない不安定な機能の実装は、一般的使用に対して広く公開されるべきではありませんが、コントロールされた環境で実験的使用、限定的に公開されてもよいです。

あるCSS機能の仕様がW3Cプロセスにおける勧告候補（CR）の段階に達するまで、そのCSS機能は不安定であると考えられます。例外的なケースとして、CSSWGは追加で、公式に記録される決議により、広い使用のために公開しても安全と考えられるセットにCR前の機能を追加するかもしれません。See § 4 Safe to Release pre-CR Exceptions.

注：しばらくの間で変更されていないCR前の仕様は通常安定版よりも時代遅れであるので、ベンダーは、WGに明示的に相談すべきであり、かつこの点についての仮定を行うべきではありません。

3.2.2. 所有者と非標準機能

将来のCSS機能との衝突を避けるために、CSS2.1仕様は、CSSの独占かつ実験的な拡張のための接頭辞構文 [CSS21]を予約します。あるCSS機能が、単一ベンダーのユーザーエージェントにのみアクセス可能な閉じた環境において使用を意図される場合、独自拡張です。ユーザーエージェントは、ベンダー接頭辞構文を通してのみそのような独自拡張をサポートすべきであり、World Wide Webのようなオープンな（マルチユーザーエージェント）環境に独自拡張を公開すべきではありません。

たとえ機能がウェブで最終的に使用されることを意図されても、その機能がまだ標準化されていない場合、依然としてウェブに公開されるべきではありません。

3.2.3. 市場の圧力とデファクトスタンダード

まだ機能が不安定である（すなわち仕様がまだ安定してない）場合、ただし

• 少なくとも3つのユーザーエージェントは、機能を実装し（またはあるユーザーエージェントが他の規則を破壊しかつ量産リリースで不安定またはその他の非標準的な機能を出荷し）、

• かつ実装がラフな相互運用性を持ち、

• かつCSSワーキンググループがこの機能が存在しかつ公開されるべきであるという合意を記録している場合、

実装者は、広範なリリースビルドで接頭辞なしの機能を出荷してもよいものです。ラフな相互運用性は、差異があるにも関わらず、主観的判断によって満たされ、実装がかなりの数のユースケースに対する量産ウェブサイトで使用されるのと十分に類似します。

しかし、CSSワーキンググループは依然としてベンダー間の連携を確保するために、および各ベンダーからのCSS専門家による一貫性審査を確実にするために相談しなければならないことに注意してください。特に、詳細は標準レビュープロセスを通して解決されていないため、ラフな相互運用性は依然として、通常エッジケース（またはそれほどエッジでないケース）において痛みを伴う相互運用性の欠如を意味することにも注意してください。

3.2.3.1. ベンダー接頭辞の不安定な機能

量産リリースでウェブに標準化過程の不安定な機能として公開する場合、実装は機能に対するベンダー接頭辞ありと接頭辞なしの両方の構文をサポートすべきです。機能が安定しており、かつ実装が相互運用可能な動作と一致するように更新される時点で、ベンダー接頭辞構文に対するサポートは削除されるべきです。

著者に不安定な機能を促進する人は誰でも、標準の接頭辞のない構文を使用してその機能を文書に記録すべきであり、実装の違いに対処する以外の目的でベンダー接頭辞付きの構文の使用を勧めることは避けるべきです。

3.2.3.2. CSSのオープン性の維持

技術としてCSSのオープンな性質を維持するために、ベンダーは、出荷するすべての機能を他の実装者が自由に実装すること可能にすべきです。この目的のために、ベンダーは、そのような機能の標準化を完了するために仕様編集およびテストするリソースを提供すべきであり、そして機能を出荷する競合他社に他の障害物（たとえば、プラットフォーム依存性、ライセンスの制限）を避けるべきです。

3.3. CRレベル機能の実装

仕様が勧告候補の段階に達すると、実装者は、実装者が仕様に従って正しく実装されることを示すことができる任意の勧告候補レベルの機能の接頭辞のない実装を公開すべきであり、接頭辞付きのその機能の変形を公開すべきではありません。

実装を問わずCSSの相互運用性を確立し維持するために、CSSワーキンググループは、非実験的なCSSレンダラが、任意のCSS機能の接頭辞なしの実装を公開する前に、実装レポート(そして、もし必要なら、実装レポートで使用したテストケース)をW3Cへ提出することを要請します。W3Cへ提出されたテストケースは、CSSワーキンググループによるレビューと修正の対象となります。

テストケースと実装レポートの提出に関する詳細情報は、CSSワーキンググループのウェブサイト（https://www.w3.org/Style/CSS/Test/）にあります。質問は直接public-css-testsuite@w3.orgメーリングリストまで。

4. 安全に公開可能なpre-CR例外

候補勧告に達する前に、以下の機能がCSSワーキンググループによって明示的かつ積極的にパスしています：§ 3.2.1 実験および不安定な機能を参照ください。

• サイジングプロパティ（width, heightなど）ボーダープロパティ、マージンおよびパディングプロパティのフロー関連に相当するもの。説明および仕様を参照してください。
• サイジングプロパティのmin-contentおよびmax-contentキーワード。決定および仕様を参照してください。
• conic-gradient()勾配記法。決定を参照してください。
• The aspect-ratio property. [CSS-SIZING-4]

候補勧告に達する前に、以下の機能がCSSワーキンググループによって明示的かつ遡及的にパスしています。

• CSS Animations Level 1、CSS Transitions Level 1、およびCSS Transforms Level 1のすべて。
• [SELECTORS-4]由来の:dir()、:lang()、および:focus-within疑似クラス。

5. 索引

以下の節は非規範的です。

5.1. 用語索引

5.2. セレクター索引

5.3. @規則索引

5.4. プロパティ索引

5.5. 値索引

6. 謝辞

§3.2.1実験および不安定な機能の初期草案を作成してくれたFlorian Rivoalに感謝します。