CSSボックスサイジングモジュール レベル4

1. はじめに

これは CSS Sizing Level 3 との差分仕様です。 現在は探索的ワーキングドラフトです。 実装を行う場合は、Level 3 を参照してください。 この草案が CR に到達したら、Level 3 のテキストをこの草案に統合します。

1.1. モジュール間の相互作用

このモジュールは width, height, min-width, min-height, max-width, max-height, および column-width の機能を [CSS2] 第10章および [CSS3COL] で定義された内容に拡張します。

1.2. 値の定義

本仕様は CSSプロパティ定義の規約（[CSS2]）と、値の定義構文（[CSS-VALUES-3]）に従っています。 本仕様で定義されていない値型は CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

プロパティ固有の値に加えて、 本仕様で定義されるすべてのプロパティは CSS全体キーワード もプロパティ値として受け付けます。 可読性のため、明示的に繰り返し記載していません。

2. 用語

CSS Sizing 3 §2 用語

3. ボックスサイズの指定

CSS Sizing 3 §3 ボックスサイズの指定

3.1. サイズ指定プロパティ

ショートハンドを追加すること。<https://github.com/w3c/csswg-drafts/issues/820>

3.2. 新しいサイズ指定値: stretch, fit-content, contain キーワード

stretch

stretch-fit sizing を適用し、 ボックスの マージンボックス のサイズを 包含ブロック のサイズに合わせることを試みます。 詳細は § 6.1 ストレッチフィットサイズ: 包含ブロックを埋める を参照してください。

fit-content

実質的には fit-content(stretch)、すなわち min(max-content, max(min-content, stretch)) です。

contain

ボックスが 推奨アスペクト比 を持つ場合、 contain-fit sizing を適用し、 できる限り 推奨アスペクト比 を維持しながら ボックスの制約内に収めるようにします。 詳細は § 6.2 コンテインフィットサイズ: アスペクト比を保ちながら伸縮 を参照してください。

ボックスが 推奨アスペクト比 を持たない場合は、 stretch-fit sizing が適用されます。

4. アスペクト比

画像などは 自然なアスペクト比 を持つことが多く、 CSSのレイアウトアルゴリズムは 要素のサイズ変更時にもその比率を維持しようとします。

aspect-ratio プロパティにより、 非置換要素に対してこの挙動を指定することや、 置換要素の有効なアスペクト比を変更することができます。

このセクションの詳細はまだ作業中です。 もしここで定義されている挙動が、 置換要素で 推奨アスペクト比 を持つ場合に CSS2、Flex Layout、 および Grid Layout の仕様（本仕様なしの場合）と 異なる動作になる場合は、それはエラーなので CSSWG へ報告 してください。

4.1. 推奨アスペクト比: aspect-ratio プロパティ

このプロパティはボックスの 推奨アスペクト比 を設定し、 auto サイズや他のレイアウト処理時に利用されます。

auto

置換要素が 自然なアスペクト比 を持つ場合はその比率を使用します。 それ以外の場合は、ボックスは 推奨アスペクト比 を持ちません。 アスペクト比を利用するサイズ計算は常に content box の寸法で行います。

<ratio>

ボックスの 推奨アスペクト比 は指定された width / height の比率です。 アスペクト比を利用するサイズ計算は、box-sizing で指定された寸法で行います。

<ratio> が 特異な比率 の場合、 このプロパティは auto として動作します。

auto && <ratio>

auto と <ratio> の両方が指定された場合、 推奨アスペクト比は 指定された width / height の比率となりますが、 もし 置換要素 かつ 自然なアスペクト比 を持つ場合は、その比率が使われます。 いずれの場合も、アスペクト比を利用するサイズ計算は常に content box の寸法で行います。

<ratio> が 特異な比率 の場合、 このプロパティは auto として動作します。

注: 推奨アスペクト比 を持っていても、ボックスが 置換要素 になるわけではありません。 置換要素 に固有のレイアウトルールは、 非置換ボックスで推奨アスペクト比を持つ場合には、通常は適用されません。 たとえば、非置換の 絶対配置 ボックスは、 justify-self: normal を stretch として扱い、 start とはしません（CSS Box Alignment 3 §6.1.2 絶対配置ボックスを参照）、 たとえ 推奨アスペクト比 を持っていても同様です。

CSS2.1は 置換要素とアスペクト比を持つ要素の区別が明確ではありません。 不明確な具体例を洗い出し、該当するLevel 3仕様またはここで定義する必要があります。

<ul>
  <li>…
  <li>…
  <li>…
  <li>…
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
li {
  aspect-ratio: 1/1;
  overflow: auto;
}

<iframe
  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
  width=560
  height=315
  >

@supports (aspect-ratio: attr(width number) / 1) {
  iframe {
    aspect-ratio: attr(width number) / attr(height number);
    width: 100%;
    height: auto;
  }
}

置換要素の 自然な寸法 が 自然な幅 または 自然な高さ のみである場合、 推奨アスペクト比 を与えることで、 存在しなかった側の 自然な 高さまたは幅も得られます。 これは既存のサイズを 推奨アスペクト比 を通じて変換することで実現されます。

4.2. 推奨アスペクト比が自動サイズに与える効果

ボックスが 推奨アスペクト比 を持つ場合、 その 自動サイズ は 置換要素で 自然なアスペクト比 を持ち、その軸に 自然なサイズ がない場合と同様に計算されます。 詳細は CSS2 § 10 や CSS Flexible Box Model Level 1 § 9.2 などを参照してください。 推奨サイズ の計算で このアスペクト比に依存する軸を 比率依存軸 と呼び、 入力サイズが 確定 していれば結果のサイズも 確定 します。 逆の軸（比率依存軸に依存するサイズを持つ軸）は 比率決定軸 と呼ばれます。

注: 推奨アスペクト比 は、ボックスのサイズの少なくとも一方が 自動 である場合のみ効果があります。 width と height のいずれも 自動サイズ でなければ、 推奨サイズ には影響しません。

すべてのサイズ指定情報をここに移す場合、 2.1に無理やり割り込むより、コアの原則は単純になります。 すなわち、比率決定軸の解決後の 推奨サイズ（min/max適用前）が比率で転送されます。 min/max制約はその後に転送され、 その後はアスペクト比とは関係なく各軸ごとに個別に適用されます。

4.2.1. マージンの折りたたみ

マージンの折りたたみ（CSS 2 §8.3.1 マージンの折りたたみ）の目的では、 ブロック軸 が 比率依存軸 である場合、 算出された block-size が auto であるとは見なされません。

4.3. 自動コンテンツベースの最小サイズ

意図しないオーバーフローを防ぐために、 自動最小サイズは、比率依存軸において、 推奨アスペクト比を持ち、 置換要素でも スクロールコンテナでもないボックスの場合、 そのmin-contentサイズを 最大サイズで上限を設けたものとなります。

div {
  aspect-ratio: 1/1;
  /* 'width' と 'height' の両方の初期値は 'auto' */
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  | ~~~~~~~~ |
                            | ~~~~~~   |
                            +----------+

div {
  overflow: auto;
  aspect-ratio: 1/1;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~v|
+----------+  +----------+  +----------+

div {
  aspect-ratio: 1/1;
  min-height: 0;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  +-~~~~~~~~-+
                              ~~~~~~    

<div style="height: 100px; aspect-ratio: 1/1;">
  <span style="display: inline-block; width: 50px;"></span>
  <span style="display: inline-block; width: 150px;"></span>
</div>

4.4. 最小／最大サイズの伝播

どちらか一方の軸（origin軸）におけるサイズ制約は 推奨アスペクト比を通じて伝播され、 もう一方の軸（destination軸）の 未確定な最小、 最大、あるいは推奨 サイズへ、次のように適用されます：

• まず、確定した最小サイズが originからdestination軸へ変換・伝播されます。 この伝播された最小値は、 確定した推奨または最大サイズ で上限が設けられます。

• 次に、確定した最大サイズが originからdestinationへ変換・伝播されます。 この伝播された最大値は、 確定した推奨または最小サイズ、 さらに伝播された最小値があればそれでも下限が設けられます。

注: このように、確定サイズは伝播した制約によってまったく影響を受けず、 また伝播された最小値によって要素が確定した推奨／最大サイズを超えることはなく、 伝播された最大値によって要素が推奨／最小サイズを下回ることもありません。

注: 基本原則は、サイズ制約がアスペクト比を通して他方の軸に伝播し、 可能な限りアスペクト比を保持しつつ その軸で明示的に指定されたサイズを侵さない範囲で働く、ということです。 （これは、CSS2 セクション10.4の制約表の内容を導いた原則です。）

<div id=container style="height: 100px; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

<div id=container style="height: auto; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

このセクションは正しく書かれていないかもしれません。<https://github.com/w3c/csswg-drafts/issues/6071>

5. 内在サイズの決定

5.1. 内在サイズ

CSS Sizing 3 §5.1 内在サイズ

5.2. 内在サイズの上書き: contain-intrinsic-* プロパティ

これらのプロパティは、サイズコンテインメントを持つ要素が、 明示的な内在インナーサイズ を指定できるようにし、ボックスがフロー内コンテンツの合計幅・高さではなく、 指定された明示的な内在インナーサイズに合わせてサイズ決定される（空の場合のサイズ決定ではなく）ようにします。

注: これは常に 指定サイズの子要素を1つ持つかのようにレイアウトされるのと等価とは限りません。 例えば、指定サイズの子要素を1つ持つグリッドコンテナは、指定グリッドに従ってサイズ決定されるため、 通常は指定サイズより大きな内容サイズになります。

値の定義は以下の通りです：

none

該当軸には明示的な内在インナーサイズがありません。

<length>

該当軸は指定された明示的な内在インナーサイズを持ちます。 値は<length>です。

auto && <length>

該当軸は明示的な内在インナーサイズとして 最後に記憶されたサイズ を持ちます。 まだ最後に記憶されたサイズが存在しない場合は、 代わりに指定された<length>を使用します。

要素のある軸に明示的な内在インナーサイズがある場合、 サイズコンテインメントとして 通常通りレイアウトした後、その軸の内容サイズはレイアウトで計算されたものではなく 明示的な内在インナーサイズとして扱われ、 必要に応じて再レイアウトされます。 （両軸に明示的な内在インナーサイズがある場合は、 最初のレイアウトを省略できることを意味します。）

これら4つのプロパティは論理プロパティグループの一部です。

注: サイズコンテインメントを持つ要素は 内容が存在しないものとしてレイアウトされます[CSS-CONTAIN-1]。 そのため、多くの場合、要素は高さ0に折りたたまれてしまいます。 これは期待される内容を表示できるようにheight を明示的に指定することで修正できますが、 FlexやGridレイアウトのような一部のレイアウトシステムでは、 明示的なheightを コンテンツベースの高さよりも強い指示として扱うため、 結果として本来内容を詰めた場合と大きく異なるレイアウトになることがあります。 要素に明示的な内在インナーサイズを指定することで、 レイアウト時に内容を無視することで得られるパフォーマンス上の利点を保ちつつ、 内容がある場合と同じようにサイズ決定が可能になります。

contain-intrinsic-sizeは contain-intrinsic-widthおよび contain-intrinsic-height プロパティをまとめて設定するショートハンドプロパティです。

最初の値はcontain-intrinsic-widthを、 2番目の値はcontain-intrinsic-heightを表します。 値が1つだけ与えられた場合は両プロパティに同じ値が適用されます。

5.2.1. 最後に記憶されたサイズ

サイズコンテインメントは、ページの効率的なレンダリングを保証するために非常に重要であり、 要素の描画が変更された際に発生しうるレイアウト作業の範囲を制限します。 しかし、これは著者にとっても非常に制限的であり、 要素のサイズがどうなるかを正確に予測する必要があります。 この予測が少しでも間違っていると、 見苦しいスクロールバーや、意図せず内容が隠れてしまうことがあります。

contain-intrinsic-size: auto の値は、 中間的な解決策を提供します。 要素が一度でもサイズコンテインメントされていない状態になった場合、 この値はその時点でのサイズ（レイアウトで通常通り計算される）を記憶します。 その後、要素が サイズコンテインメント を持つようになった場合、 記憶されたサイズを使用し、サイズコンテインメントのパフォーマンス上の利点を享受しつつ おそらく内容に正確にフィットしたサイズにできます。

5.2.2. overflow: auto との相互作用

contain-intrinsic-size プロパティは、 著者が要素の内容がどれくらい大きくなると予想しているかの推定値を与えますが、 この推定値は実際の内容を表すものではなく、 ユーザーに表示する必要のある何かを意味するわけではありません。 したがって、overflow: auto を持つ要素は、 contain-intrinsic-size の結果として スクロールバーを生成してはなりません。

しかし、contain-intrinsic-size が 要素が実際にそのサイズの内容を持っていた場合に スクロールバーが必要になるほど十分に大きなサイズを示している場合は、 要素は仮想的な内容によってスクロールバーが生成されるかのように サイズ決定されなければなりません。

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}

div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

5.3. 内在サイズ寄与

CSS Sizing 3 §5.2 内在寄与

5.4. min-contentサイズ寄与のゼロ化: min-intrinsic-sizing プロパティ

このプロパティの名称はさらなる議論が必要です。

このプロパティは、min-content寄与 が 非置換ボックスにおいて 特定の条件下で「圧縮」されるかどうかを定義します。 各値の意味は次の通りです：

legacy

ボックスのmin-content寄与は通常通り扱われます。

zero-if-scroll

ボックスがスクロールコンテナである場合は min-content寄与が「圧縮」されます。

zero-if-extrinsic

ボックスが外在的な推奨または 最大サイズを持つ場合、 min-content寄与が「圧縮」されます。

注: これは多くの置換要素のデフォルト動作です。

*, ::before, ::after { min-intrinsic-size: zero-if-scroll; }

注: zero-if-scroll の挙動がデフォルトであればより良かったのですが、Web互換性のため初期値にはできません :(

「圧縮された」min-content寄与は、 ボックスが空であるかのように計算されますが、明示的な min-content、max-content、fit-content値の サイズ指定プロパティによるサイズ制約を考慮する場合は例外です。

6. 外在サイズの決定

CSS Sizing 3 §4 外在サイズの決定

6.1. ストレッチフィットサイズ: 包含ブロックを埋める

ストレッチフィットサイズは、min-height/min-width/max-height/max-widthによる制約を尊重しつつ、 ボックスの外側サイズが包含ブロックを できるだけ埋めるように、ボックスの使用サイズを必要な長さに設定しようとします。

厳密には、この挙動は自動サイズと 関連軸で自己整列プロパティ値 stretch を 指定した場合と同じですが、結果として得られるボックスが整列コンテナに 完全には一致しない場合、その後実際の 自己整列プロパティ値で 整列されることができます。

さらに、 フォーマッティングコンテキストや、その軸で 自己整列プロパティが適用されない場合 （例えばブロックレイアウトのブロック軸やフレックスレイアウトの主軸など）で、 その軸のパーセンテージサイズが確定値に解決される場合には、 ストレッチフィットサイズはボックスが包含ブロックを埋めるようにします。 これは100%のように振る舞いますが、そのサイズは box-sizingで示されるボックスではなく マージンボックスに適用されます。 この目的のため、autoマージンはゼロとみなされます。 また、特にブロックレベルボックスにおいては、 ブロック始端／終端のマージンが、親のブロック始端／終端マージンに隣接しうる場合（親のサイズ指定プロパティが すべて初期値の場合）、 そのブロック始端／終端マージンはゼロとして扱われます。

注: その結果、stretch整列が適用されず、 またパーセンテージサイズも解決できない場合は、 ボックスは自動サイズに解決されます。

<div class="outer">
  <div class="inner"></div>
</div>

.outer { height: 200px; border: solid; }
.inner { height: stretch; margin: 10px; }

.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }

<div class="outer">
  <div class="inner">text</div>
</div>
some more text

.outer { float: left; margin: 0; }
.inner { width: stretch; margin: 10px; }

.outer { height: auto; margin: 0; }
.inner { height: stretch; margin: 10px; }

6.2. コンテインフィットサイズ: アスペクト比を保ったまま伸縮

コンテインフィットサイズは本質的にストレッチフィットサイズを適用しますが、 ボックスの推奨アスペクト比を維持するために 一方の軸でサイズを縮小します。 これはcontainキーワードやobject-fit、background-sizeプロパティに似ています。

まずターゲット矩形を決定します：

1. 初期のターゲット矩形はボックスの包含ブロックのサイズです。 未確定なサイズは無限大とみなします。 両方の寸法が未確定な場合は、 初期ターゲット矩形はボックスがストレッチフィットサイズになった場合の外縁に一致します。
2. 次に、ボックスが非noneのmax-widthやmax-heightを持つ場合、 その寸法でターゲット矩形をボックスのマージンボックスの「最大サイズ」以下に制限します。 （これは通常のbox-sizingルールと同じく、 この「最大サイズ」はボックスのmin-width/min-heightの効果で下限が設定されます。）
3. 最後に、ターゲット矩形の一方の寸法を ボックスの推奨アスペクト比に 一致させるために必要最小限だけ縮小します。

各寸法でのコンテインフィットサイズは、 ターゲット矩形にストレッチフィットした場合に得られるサイズです。

マージン折りたたみに関してはストレッチフィットの挙動をコピーすること。

もし一方の寸法の最小サイズがアスペクト比を尊重した場合にターゲット矩形をオーバーフローさせる場合、アスペクト比を優先するか画像を歪めるか？ 前者の場合は#2と同様に関連する最小値を適用するステップが必要。

6.3. パーセンテージサイズ

…

変更点

最近の変更

2020年10月20日 作業草案 以降の主な変更点：

• min-intrinsic-sizing プロパティを策定し、スクロールコンテナのmin-content寄与をより良く制御できるようにした。 (Issue 1865, Issue 4585)

• contain-intrinsic-size に各軸を独立して制御するロングハンドを追加。 (Issue 5432)

• contain-intrinsic-size に auto 値を策定し、以前に計算されたサイズを「記憶」できるようにした。 (Issue 5668, Issue 5815)

• aspect-ratio の特異な比率の扱いを定義した。 (Issue 5557)

• aspect-ratio が置換要素の自然なサイズにどう影響するかを定義した。 (Issue 5306)

• § 4.4 最小／最大サイズの伝播 セクションの誤りを修正し、 振る舞いがCSS2やCSS Flex Layout等で定義されたものと矛盾しないようにした。 (Issue 6071)

2020年5月26日 初公開作業草案 以降の主な変更点：

• 比率決定軸 を用語として定義した。

• min/maxサイズ制約がアスペクト比をまたいで伝播することを定義した。 (Issue 5257)

  また、どちらか一方の軸（origin軸）でのサイズ制約は 推奨アスペクト比 を通じてもう一方の軸（destination軸）に 次のように伝播されます：

  • まず、確定した最小サイズが origin から destination 軸へ変換・伝播されます。 この伝播された最小値は 確定した推奨または最大サイズ で上限が設けられます。

  • 次に、確定した最大サイズが origin から destination へ変換・伝播されます。 この伝播された最大値は 確定した推奨または最小サイズ 、および伝播された最小値があればそれでも下限が設けられます。

  注: 基本原則は、 サイズ制約がアスペクト比を通してもう一方の軸に伝播し、 その軸で明示的に指定されたサイズを侵さない範囲で 可能な限りアスペクト比を保持することです。

• aspect-ratio が 置換要素で自然なサイズが1つだけの場合、 もう一方の寸法も決定することを明確化した。 (Issue 5306)

  置換要素の自然な寸法が自然な幅または自然な高さのみの場合、 推奨アスペクト比 を与えることで 存在しなかった側の自然な高さまたは幅も得られます。 これは既存のサイズを 推奨アスペクト比を通じて変換することで実現されます。

• aspect-ratio がmarginの自己折りたたみを抑制することを定義。 (Issue 5328)

  マージンの折りたたみ（CSS 2 §8.3.1 マージンの折りたたみ）の目的では、 ブロック軸が比率依存軸である場合、 算出されたblock-sizeが autoであるとは見なされません。

Level 3からの追加点

• サイズ指定プロパティにstretch、fit-content、containキーワードを追加。
• aspect-ratio プロパティを追加。
• contain-intrinsic-size プロパティを追加。

謝辞

Aaron Gustafson氏、L. David Baron氏に本モジュールへの貢献を特に感謝します。

プライバシーとセキュリティに関する考慮事項

本仕様は新たなプライバシーまたはセキュリティ上の考慮事項を導入しません。