CSS 封じ込めモジュールレベル 3

1. はじめに

これは CSS 封じ込めレベル 2 に対する差分仕様です。現在、探索的作業草案です: 何かを実装する場合は、レベル 2 を参照してください。 CR に到達した時点で、レベル 2 のテキストをこの草案に統合します。

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

この文書では、以前の仕様には存在しない新しい機能を定義します。また、安定した時点で [CSS-CONTAIN-1] を置き換え、これに優先することを目的としています。

1.2. 値の定義

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

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

2. 強い封じ込め: contain プロパティ

CSS 封じ込め 2 § 2 強い封じ込め: contain プロパティ

名前:	contain
新しい値:	layout \|\| style \|\| paint \|\| [ size \| inline-size ]

inline-size: この値は、要素に対してインラインサイズ封じ込めを有効にします。これにより、そのインラインサイズを持つ主ボックスが、その内容に直接依存することを防ぎます。
注: 間接的な依存関係は依然として存在し得ます。 § 3.1 インラインサイズ封じ込めを参照してください。

3. 封じ込めの種類

CSS 封じ込め 2 § 3 封じ込めの種類

3.1. インラインサイズ封じ込め

要素にインラインサイズ封じ込めを与えると、そのサイズ封じ込めが、インライン軸における主ボックスのサイズ決定に適用されます。これは、主ボックスのインライン軸における内在サイズが、要素に内容がないかのように決定されることを意味します。ただし、内容は通常どおり、ボックスのブロック軸の内在サイズに影響し続け、ボックスはブロック軸で通常どおり断片化できます。

注: 場合によっては、ボックスのブロック軸の内在サイズが、親の整形コンテキストのレイアウトに、ボックスのインラインサイズへ影響する形で作用することがあります（たとえば、祖先要素にスクロールバーを発生させる場合）。これにより、ボックスのインラインサイズが自身の内容に依存することになります。この変更されたインラインサイズによって異なるブロックサイズが生じる場合、その新しいブロックサイズがさらに親の整形コンテキストへ影響する循環に入る可能性がありますが、以前の問題のあるレイアウトへ戻すような形ではありません。

たとえば、スクロールバーが導入された場合、その後、それらが不要になるほど結果として生じたブロックサイズが小さくなったとしても、スクロールバーは削除されません。または、ボックスの論理的な高さが、より下に配置された float と衝突し、clear によって下へ移動して、より多くのインライン空間も利用できる場所へ移動した結果、衝突しないほど短くなったとしても、以前の問題のあるサイズと位置へ戻されることはありません。

したがって、インラインサイズ封じ込めは、ボックスの内容が、そのインラインサイズに、インライン軸の内在サイズを通じて直接影響することを防ぎますが、そのインラインサイズは、内容がブロックサイズに与える影響を通じて、依然として間接的に内容へ依存する場合があります。

一般に、要素のインラインサイズとそのブロックサイズの関係は予測不能かつ非単調であり、インラインサイズが変更されるにつれて、ブロックサイズは任意に増減し得ます。無限循環は、制約を単純に解析すればそのような状態が許容される場合であっても、レイアウトが以前の（問題があることが既知の）状態へ戻らないようにすることで防止されます。言い換えれば、レイアウトは常に「前進」します。現在の CSS レイアウト仕様にはこのような規則が組み込まれていると考えていますが、そうなっていない部分がある場合は、これらの誤りを修正できるよう CSSWG にお知らせください。

次の例を考えてみます。ここでは、float の配置によりブロックサイズがインラインサイズに依存する関係が生じます:

<section style="width: 200px; border: solid; display: flow-root;">
  <div style="float: left; width: 50px; height: 80px; background: blue;"></div>
  <div style="float: right; width: 50px; height: 80px; background: blue;"></div>
  <div style="float: left; width: 160px; height: 80px; background: navy;"></div>

  <article style="border: solid orangered; display: flow-root; min-width: min-content">
    <div style="background: orange; aspect-ratio: 1/1;">
      記事
    </div>
  </article>
</section>

記事

ブロックレイアウトアルゴリズムは、まず浮動ボックスを配置します。最初の 2 つはコンテナーの左隅と右隅に配置され、 3 つ目はその間に収まるには幅が広すぎるため、それらの下へ押し下げられます。

続いて article がレイアウトされます。これは display: flow-root であるため、どの float とも交差できず、自身のサイズと位置を決定するときにそれらを考慮しなければなりません。

レイアウトエンジンはまず、article をコンテナーの上端に揃えて配置しようとします。その結果、幅は 100px となり、その最小内容サイズを収めるには十分な幅があります。しかし、子の aspect-ratio により、この場合 article の高さも 100px となり、 80px 下にある 3 つ目の float と交差してしまうため、このレイアウト機会は破棄されます。

次に、article を 3 つ目の float の上端に揃え、その右側にある幅 40px の狭い空間へ配置しようとします。しかし、article の min-width により、 3 つ目の float の横にある幅 40px の空間に収まるには大きすぎるため、これもその下へ移動し、すべての浮動ボックスの下に 200px の正方形を形成します。

記事

article から min-width を削除するか、または article か header のいずれかにインラインサイズ封じ込めを追加すると（min-width: min-content がゼロに解決されるため）、 article は最終的な浮動 div の横に 40px の正方形として収まります（内容の一部がオーバーフローする可能性があります）。

この時点では、article の幅と高さ（それぞれ 40px）は、最初に検討された空間へ、コンテナーの上端に揃えて 収まるはずです。しかし、ボックスは以前の位置には戻されません。レイアウトエンジンはすでに、その位置では無効なレイアウトになることを把握しているためです。

要素にインラインサイズ封じ込めを与えても、次のいずれかが true の場合は効果がありません:

要素が主ボックスを生成しない場合（display: contents や display: none の場合など）
その内部表示型が table の場合
その主ボックスが内部テーブルボックスである場合
その主ボックスが内部ルビボックス、または非アトミックなインラインレベルボックスである場合

4. コンテナークエリー

メディアクエリーは、文書が表示されているユーザーエージェントやデバイス環境の側面（ビューポートの寸法やユーザー設定など）を問い合わせる方法を提供する一方で、コンテナークエリーは文書内の要素の側面（ボックスの寸法や算出スタイルなど）を検査できます。

デフォルトでは、すべての要素はクエリーコンテナーであり、コンテナースタイルクエリーのために使用できます。また、コンテナーサイズクエリー用のクエリーコンテナーとして確立するには、 container-type プロパティ（または container 一括指定）を使用して追加のクエリー型を指定します。クエリーコンテナーのシャドウを含む子孫に適用されるスタイル規則は、 @container 条件付きグループ規則を使用して、そのコンテナーへの問い合わせを条件として適用できます。

たとえば、メインコンテンツ領域とサイドバーをコンテナーとして定義し、そのコンテナーのサイズに応じて垂直レイアウトから水平レイアウトへ変化する .media-object を記述できます:

main, aside {
  container: my-layout / inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container my-layout (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

メイン領域とサイドバー領域のメディアオブジェクトは、それぞれ自身のコンテナーコンテキストに応答します。

疑似要素を含むセレクターでは、シャドウを含む包括的祖先である最終発生元要素によってクエリーコンテナーを確立できます。

したがって、次のことが成り立ちます:

疑似要素自体をクエリーコンテナーにすることはできません
::before、::after、::marker、および ::backdrop は、それぞれの発生元要素を問い合わせます
::first-letter と ::first-line は、それぞれの発生元要素を問い合わせます。仮想タグ列によって、継承およびレンダリングのために ::first-line が他の要素を越えて移動する場合でも同様です
複数の疑似要素があっても、ある疑似要素を別の疑似要素のクエリーコンテナーにすることはできません。たとえば、host::part()::before における ::before のクエリーコンテナーには、::part() ではなくホストを使用できます。同様に、 div::before::marker における ::marker のクエリーコンテナーとして ::before を使用することはできません
::slotted() セレクターは、シャドウツリー内のクエリーコンテナーを問い合わせることができ、スロット自体も含まれます
::part() セレクターは、その発生元ホストを問い合わせることはできますが、シャドウツリー内部のクエリーコンテナーを問い合わせることはできません
::placeholder と ::file-selector-button は input 要素を問い合わせることができますが、input 要素がシャドウツリーを使用して実装されている場合、内部コンテナーは公開されません

発生元要素のサイズを問い合わせる ::before セレクター:

<style>
  #container {
    width: 100px;
    container-type: inline-size;
  }
  @container (inline-size < 150px) {
    #inner::before {
      content: "前";
    }
  }
</style>
<div id=container>
  <span id=inner></span>
</div>

シャドウホストの子をスタイル設定する ::slotted() セレクターは、シャドウツリー内のコンテナーを問い合わせることができます:

<div id=host style="width:200px">
  <template shadowroot=open>
    <style>
      #container {
        width: 100px;
        container-type: inline-size;
      }
      @container (inline-size < 150px) {
        ::slotted(span) {
          color: green;
        }
      }
    </style>
    <div id=container>
      <slot />
    </div>
  </template>
  <span id=slotted>緑</span>
</div>

4.1. クエリーコンテナーの作成: container-type プロパティ

名前:	container-type
値:	normal \|\| [ size \| inline-size ]
初期値:	normal
適用対象:	すべての要素
継承:	しない
パーセンテージ:	該当なし
算出値:	キーワード normal、または size、inline-size の 1 つ以上
正規順序:	文法に従う
アニメーション型:	アニメーション不可

container-type プロパティは、明示的な封じ込めを必要とするコンテナークエリー（コンテナーサイズクエリーなど）のために、要素をクエリーコンテナーとして確立し、その子孫をスタイル設定するスタイル規則がそのサイズ決定やレイアウトのさまざまな側面を問い合わせ、それに応じて応答できるようにします。

特に記載がない限り、すべての要素は、明示的な封じ込めを必要としないコンテナークエリー（コンテナースタイルクエリーなど）のためのクエリーコンテナーであり、指定された container-type に関係なくそうなります。

各値の意味は次のとおりです:

size: クエリーコンテナーを、コンテナーサイズクエリーのために、インラインおよびブロック軸の両方で確立します。レイアウト封じ込め、スタイル封じ込め、およびサイズ封じ込めを主ボックスに適用します。
inline-size: コンテナー自身のインライン軸上のコンテナーサイズクエリー用にクエリーコンテナーを確立します。レイアウト封じ込め、スタイル封じ込め、およびインラインサイズ封じ込めを主ボックスに適用します。
normal: 要素は、いかなるコンテナーサイズクエリーについてもクエリーコンテナーではありませんが、コンテナースタイルクエリーについては引き続きクエリーコンテナーです。

たとえば、作者はコンテナーに応答するタイポグラフィを作成し、コンテナーのサイズに基づいて font-size、line-height、その他のタイポグラフィ上の要素を調整できます:

aside, main {
  container-type: inline-size;
}

h2 { font-size: 1.2em; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

クエリー条件で使用される 40em の値は、関連するクエリーコンテナー上の font-size の算出値を基準とします。

コンテナーは、問い合わせ対象として算出スタイル値を公開することもできます。これは複数のプロパティにわたる動作を切り替える場合に便利です:

section {
  container-type: style;
}

@container (--cards: small) {
  article {
    border: thin solid silver;
    border-radius: 0.5em;
    padding: 1em;
  }
}

4.2. クエリーコンテナーの命名: container-name プロパティ

名前:	container-name
値:	none \| <custom-ident>+
初期値:	none
適用対象:	すべての要素
継承:	しない
パーセンテージ:	該当なし
算出値:	キーワード none、または順序付きの識別子のリスト
正規順序:	文法に従う
アニメーション型:	アニメーション不可

container-name プロパティは、クエリーコンテナー名のリストを指定します。これらの名前は @container 規則によって使用され、どのクエリーコンテナーを対象とするかを絞り込めます。

none: クエリーコンテナーはクエリーコンテナー名を持ちません。
<custom-ident>: クエリーコンテナー名を識別子として指定します。キーワード none、and、not、および or は、この <custom-ident> から除外されます。

場合によっては、最も近い祖先コンテナーでなくても、特定のコンテナーの側面を問い合わせたいことがあります。たとえば、メインコンテンツ領域の高さと、より深く入れ子になったインラインコンテナーの幅を問い合わせたい場合があります。

main {
  container-type: size;
  container-name: my-page-layout;
}

.my-component {
  container-type: inline-size;
  container-name: my-component-library;
}

@container my-page-layout (block-size > 12em) {
  .card { margin-block: 2em; }
}

@container my-component-library (inline-size > 30em) {
  .card { margin-inline: 2em; }
}

4.3. 名前付きコンテナーの作成: container 一括指定

名前:	container
値:	<'container-name'> [ / <'container-type'> ]?
初期値:	各プロパティを参照
適用対象:	各プロパティを参照
継承:	各プロパティを参照
パーセンテージ:	各プロパティを参照
算出値:	各プロパティを参照
アニメーション型:	各プロパティを参照
正規順序:	文法に従う

container 一括指定プロパティは、 container-type と container-name の両方を同じ宣言で設定します。 <'container-type'> が省略された場合、その初期値にリセットされます。

一括指定構文を使用して container-type と container-name の両方を定義できます:

main {
  container: my-layout / size;
}

.grid-item {
  container: my-component / inline-size;
}

4.4. コンテナークエリー: @container 規則

@container 規則は、条件がコンテナークエリーである条件付きグループ規則です。コンテナークエリーは、コンテナーサイズクエリーおよび/またはコンテナースタイルクエリーのブール結合です。 @container 規則の <stylesheet> ブロック内のスタイル宣言は、その条件によってフィルター処理され、それらの要素のクエリーコンテナーに対してコンテナークエリーが true の場合にのみ一致します。

@container 規則の構文は次のとおりです:

@container [ <container-name> ]? <container-condition> {
  <stylesheet>
}

ここで:

<container-name> = <custom-ident>
<container-condition> = not <query-in-parens>
                      | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]
<query-in-parens>     = ( <container-condition> )
                      | ( <size-feature> )
                      | style( <style-query> )
                      | <general-enclosed>

<style-query>         = <style-condition> | <style-feature>
<style-condition>     = not <style-in-parens>
                      | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
<style-in-parens>     = ( <style-condition> )
                      | ( <style-feature> )
                      | <general-enclosed>

キーワード none、and、not、および or は、上記の <custom-ident> から除外されます。

各要素について、問い合わせ対象となるクエリーコンテナーは、要素の祖先にあるクエリーコンテナーのうち、 <container-condition> 内のすべてのコンテナー機能について有効なクエリーコンテナーとして確立されているものから選択されます。オプションの <container-name> は、考慮されるクエリーコンテナーの集合を、一致するクエリーコンテナー名を持つものだけに絞り込みます。

要素について適格なクエリーコンテナーが選択されると、 <container-condition> 内の各コンテナー機能は、そのクエリーコンテナーに対して評価されます。適格なクエリーコンテナーとなる祖先が存在しない場合、その要素に対するコンテナークエリーは unknown です。

メディアクエリーと同様に、単一のクエリーリスト内で複数の条件を連結できます:

@container card (inline-size > 30em) and style(--responsive: true) {
  /* スタイル */
}

上記のスタイルは、 "card" という名前の祖先コンテナーが存在し、 inline-size 条件とスタイル条件の両方を満たす場合にのみ適用されます。

複数の入れ子になったコンテナークエリー内の要素に定義されたスタイル規則は、それを囲むすべてのコンテナークエリーがその要素について true の場合に適用されます。

注: 入れ子になったコンテナークエリーは、異なるコンテナーとの関係で評価されることがあるため、個々の <container-condition> を単一のクエリーへまとめられるとは限りません。

単一のコンテナークエリーで複数のコンテナーを問い合わせることはできませんが、複数のクエリーを入れ子にすることで実現できます:

@container card (inline-size > 30em) {
  @container style(--responsive: true) {
    /* スタイル */
  }
}

上記のスタイルは、 "card" という名前の祖先コンテナーが存在し、 inline-size 条件を満たし、さらにスタイル条件を満たす祖先コンテナーが存在する場合にのみ適用されます。

@keyframes、@font-face、または @layer のような、グローバルで名前を定義するat 規則がコンテナークエリー内で定義されても、コンテナークエリー条件による制約は受けません。

4.5. アニメーションするコンテナー

コンテナークエリーの評価の変化は、その変化がアニメーション効果によって生じた場合でも、スタイル変更イベントの一部でなければなりません。

兄弟要素上のトランジションは、間接的にコンテナーのサイズへ影響し、その結果コンテナークエリーの評価が変化するたびにスタイル変更イベントを発生させることがあります:

main {
  display: flex;
  width: 300px;
}

#container {
  container-type: inline-size;
  flex: 1;
}

/* 解決された幅は最初 200px だが、#sibling 上の
   トランジションが進行するにつれて変化する。 */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* このコンテナークエリーの適用が開始（または停止）されたとき、
   #inner の background-color 上でトランジションを開始しなければならない。 */
@container (width <= 150px) {
  #inner {
    background-color: skyblue;
  }
}

#sibling {
  width: 100px;
  transition: width 1s;
}

#sibling:hover {
  width: 200px;
}

<main>
  <div id=container>
    <div id=inner>内部</div>
  </div>
  <div id=sibling>兄弟</div>
</main>

コンテナークエリー長単位によって生じる算出値の変更も、スタイル変更イベントの一部でなければなりません。

5. コンテナー機能

コンテナー機能は、クエリーコンテナーの特定の側面を問い合わせます。

5.1. サイズコンテナー機能

コンテナーサイズクエリーは、クエリーコンテナーの主ボックスのサイズを問い合わせることができます。これは、それぞれクエリーコンテナーの単一の特定の寸法機能を問い合わせる個々のサイズ機能（<size-feature>）のブール結合です。 <size-feature> の構文は、メディア機能と同じです: 機能名、比較演算子、および値です。[mediaqueries-5] サイズ機能をサイズクエリーへ結合するブール構文と論理は、 CSS 機能クエリーの場合と同じです。（@supports を参照。[CSS-CONDITIONAL-3]）

クエリーコンテナーが主ボックスを持たない場合、または主ボックスがレイアウト封じ込めボックスではない場合、またはクエリーコンテナーが関連する軸上のコンテナーサイズクエリーをサポートしていない場合、サイズ機能の評価結果は unknown です。

相対長単位（コンテナークエリー長単位を含む）は、コンテナークエリー条件内では、クエリーコンテナーの算出値に基づいて評価されます。

注: これはメディアクエリーにおける相対単位の扱いとは異なります。

たとえば、font-size が異なるクエリーコンテナーは、 em に基づくクエリーをそれぞれ自身のフォントサイズに対して評価します:

aside, main {
  container-type: inline-size;
}

aside { font-size: 16px; }
main { font-size: 24px; }

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

クエリー条件で使用される 40em の値は、関連するクエリーコンテナー上の font-size の算出値を基準とします:

aside 内の任意の h2 では、クエリー条件は 640px を超えると true になります。
main 内の任意の h2 では、クエリー条件は 960px を超えると true になります。

5.1.1. 幅: width 機能

名前:	width
対象:	@container
値:	<length>
型:	範囲

width コンテナー機能は、クエリーコンテナーのコンテンツボックスの幅を問い合わせます。

5.1.2. 高さ: height 機能

名前:	height
対象:	@container
値:	<length>
型:	範囲

height コンテナー機能は、クエリーコンテナーのコンテンツボックスの高さを問い合わせます。

5.1.3. インラインサイズ: inline-size 機能

名前:	inline-size
対象:	@container
値:	<length>
型:	範囲

inline-size コンテナー機能は、クエリーコンテナーのインライン軸における、クエリーコンテナーのコンテンツボックスのサイズを問い合わせます。

5.1.4. ブロックサイズ: block-size 機能

名前:	block-size
対象:	@container
値:	<length>
型:	範囲

block-size コンテナー機能は、クエリーコンテナーのブロック軸における、クエリーコンテナーのコンテンツボックスのサイズを問い合わせます。

5.1.5. アスペクト比: aspect-ratio 機能

名前:	aspect-ratio
対象:	@container
値:	<ratio>
型:	範囲

aspect-ratio コンテナー機能は、 width コンテナー機能の値と、height コンテナー機能の値との比として定義されます。

5.1.6. 向き: orientation 機能

名前:	orientation
対象:	@container
値:	portrait \| landscape
型:	離散

portrait: height コンテナー機能の値が width コンテナー機能の値以上の場合、 orientation コンテナー機能は portrait です。
landscape: それ以外の場合、orientation は landscape です。

5.2. スタイルコンテナー機能

コンテナースタイルクエリーは、クエリーコンテナーの算出値を問い合わせることができます。これは、それぞれクエリーコンテナーの単一の特定のプロパティを問い合わせる個々のスタイル機能（<style-feature>）のブール結合です。 <style-feature> の構文は、宣言 [CSS-SYNTAX-3] と同じであり、指定されたプロパティのクエリーコンテナー上の算出値が指定された値（これもクエリーコンテナーを基準に算出される）と一致する場合、そのクエリーは true、プロパティまたはその値が無効あるいはサポートされていない場合は unknown、それ以外の場合は false です。スタイル機能をスタイルクエリーへ結合するブール構文と論理は、 CSS 機能クエリーの場合と同じです。（@supports を参照。[CSS-CONDITIONAL-3]）

スタイル機能が一括指定プロパティを問い合わせる場合、その各ロングハンドプロパティについて算出値が一致すれば true、それ以外の場合は false です。

カスケード依存キーワード（revert や revert-layer など）は、スタイル機能内の値としては無効であり、コンテナースタイルクエリーを false にします。

注: 残りのカスケードに依存しないCSS 全体キーワードは、他の値と同様に、クエリーコンテナーを基準に算出されます。

6. コンテナー相対長: cqw、cqh、cqi、cqb、cqmin、cqmax 単位

コンテナークエリー長単位は、クエリーコンテナーの寸法に対する相対的な長さを指定します。コンテナークエリー長単位を使用するスタイルシートでは、コンポーネントをあるクエリーコンテナーから別のコンテナーへより簡単に移動できます。

コンテナークエリー長単位は次のとおりです:

コンテナー単位の参考要約
単位	基準
cqw	クエリーコンテナーの幅の 1%
cqh	クエリーコンテナーの高さの 1%
cqi	クエリーコンテナーのインラインサイズの 1%
cqb	クエリーコンテナーのブロックサイズの 1%
cqmin	cqi または cqb の小さい方の値
cqmax	cqi または cqb の大きい方の値

各要素について、コンテナークエリー長単位は、その単位によって記述される関連する軸（または複数の軸）上のコンテナーサイズクエリーとして評価されます。各軸のクエリーコンテナーは、その軸上のコンテナーサイズクエリーを受け入れる最も近い祖先コンテナーです。適格なクエリーコンテナーが利用できない場合、その軸には小ビューポートサイズを使用します。

注: 場合によっては、同じ要素上の cqi と cqb 単位が、異なるクエリーコンテナーを基準に評価されることがあります。同様に、cqmin と cqmax 単位は、 cqi と cqb 単位の大きい方または小さい方を表します。これらの寸法が異なるクエリーコンテナーから得られる場合でも同様です。

子要素は、親に指定された相対値を継承するのではなく、算出値を継承します。

作者は、同じ container-type に依存するコンテナークエリー内でコンテナークエリー長単位を使用することで、適切なクエリーコンテナーを確実に持たせることができます。カスタムのフォールバック値は、コンテナークエリーの外側で定義できます:

/* フォールバック値は封じ込めに依存しない */
h2 { font-size: 1.2em; }

@container (inline-size >= 0px) {
  /* inline-size コンテナーが利用可能な場合にのみ適用される */
  h2 { font-size: calc(1.2em + 1cqi); }
}

7. API

7.1. `CSSContainerRule` インターフェイス

CSSContainerRule インターフェイスは @container 規則を表します。

[Exposed=Window]
interface CSSContainerRule : CSSConditionRule {
};

型 CSSOMString の conditionText（CSSConditionRule 上の属性に対する CSSContainerRule 固有の定義）: conditionText 属性（親規則 CSSConditionRule 上で定義）は、取得時に、指定された条件を、論理的な簡略化を行わずに返さなければなりません。これにより、返された条件は、この仕様に適合する任意の実装において、指定された条件と同じ結果へ評価されます。（この仕様の <general-enclosed> 拡張性機構によって許可される将来の拡張を実装する実装を含みます）。言い換えると、トークンストリームの簡略化は許可されます（空白を 1 個のスペースへ減らす、または省略可能であることが既知の場合に省略するなど）が、論理的な簡略化（不要な括弧の削除や、評価結果に基づく簡略化など）は許可されません。

CSSContainerRule 用の CSSOM API を追加する [Issue #7033]

コンテナークエリーには matchContainer メソッドがあるべきです。これは matchMedia() および MediaQueryList インターフェイスをモデルとしますが、 Window ではなく Element に適用されます。レイアウトサイズを測定するときは resizeObserver と同様に動作しますが、追加のコンテナークエリー構文と機能を提供します。[Issue #6205]

8. 要素の内容を完全に抑制する: content-visibility プロパティ

CSS 封じ込め 2 § 4 要素の内容を完全に抑制する: content-visibility プロパティ

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

CSS 封じ込め 2 § 5 プライバシーとセキュリティに関する考慮事項

付録 A. 変更点

この付録は参考情報です。

2021年12月21日の最初の公開作業草案以降の変更点

2021年12月21日の最初の公開作業草案以降の主な変更点は次のとおりです:

container-name の算出値に重複する識別子を含めることを許可しました。（Issue 7181）
container 一括指定内の <'container-name'> を必須にしました。（Issue 7142）
コンテナースタイルクエリーにおける一括指定プロパティの扱いを明確化しました。（Issue 7095）
カスケード依存キーワードをスタイル機能の値として使用することを禁止し、使用した場合はコンテナースタイルクエリーが false になるようにしました。（Issue 7080）
container-type の初期値を style に変更しました。（Issue 6393）
単一軸のブロックサイズ封じ込めは現在不可能なため、 container-type から block-size 値を削除しました。（Issue 1031）
container-name 構文から <string> オプションを削除しました。コンテナー名は <custom-ident> でなければなりません。（Issue 6405）
container 一括指定プロパティ内の <'container-name'> と <'container-type'> の順序を逆にし、両方を省略可能にしました。（Issue 6393）
前方互換性のため、 <container-condition> 内で <general-enclosed> 構文を許可しました。（Issue 6396）
<size-feature> クエリーから size 関数構文を削除しました。（Issue 6870）
クエリーコンテナーの選択処理を、必要な container-type を考慮するよう更新し、明示的な型選択構文を削除しました。（Issue 6644）
延期された状態クエリー機能を削除しました。（Issue 6402）
疑似要素および Shadow DOM 周辺のコンテナー選択を明確化しました。（Issue 5984 および Issue 6711）

CSS 封じ込めレベル 2 からの変更点

インラインサイズ封じ込めを導入しました。
コンテナークエリーに必要な用語、プロパティ、単位、および at 規則を定義しました

CSS 封じ込め 2 § 変更点

謝辞

Adam Argyle、 Amelia Bellamy-Royds、 Anders Hartvoll Ruud、 Brian Kardell、 Chris Coyier、 Christopher Kirk-Nielsen、 David Herron、 Elika J. Etemad (fantasai)、 Eric Portis、 Ethan Marcotte、 Geoff Graham、 Gregory Wild-Smith、 Ian Kilpatrick、 Jen Simmons、 Kenneth Rohde Christiansen、 L. David Baron、 Lea Verou、 Martin Auswöger、 Martine Dowden、 Mike Riethmuller、 Morten Stenshorne、 Nicole Sullivan、 Rune Lillesveen、 Scott Jehl Scott Kellum、 Stacy Kvernmo、 Theresa O’Connor、 Una Kravets、およびその他多くの方々からのコメントや以前の成果が、この仕様に貢献しました。

適合性

文書の表記規約

適合要件は、説明的な表明と RFC 2119 の用語を組み合わせて表現されます。この文書の規範的な部分にあるキーワード “MUST”、 “MUST NOT”、 “REQUIRED”、 “SHALL”、 “SHALL NOT”、 “SHOULD”、 “SHOULD NOT”、 “RECOMMENDED”、 “MAY”、および “OPTIONAL” は、RFC 2119 に記載されているとおりに解釈されるものとします。ただし、読みやすさのため、この仕様ではこれらの語がすべて大文字で表記されるとは限りません。

明示的に非規範的と記されたセクション、例、および注記を除き、この仕様のすべてのテキストは規範的です。 [RFC2119]

この仕様の例は、“たとえば” という語で導入されるか、 class="example" によって規範的なテキストから分離され、次のように示されます:

参考注記は “注” という語で始まり、 class="note" によって規範的なテキストから分離され、次のように示されます:

勧告事項は、特別な注意を促すようにスタイル設定された規範的なセクションであり、 <strong class="advisement"> によって他の規範的なテキストから分離され、次のように示されます: UA はアクセシブルな代替手段を提供しなければなりません。

適合クラス

この仕様への適合性は、 3 つの適合クラスについて定義されます:

このモジュールで定義される構文を使用するすべての記述が、一般的な CSS 文法およびこのモジュールで定義される各機能の個別の文法に従って妥当である場合、そのスタイルシートはこの仕様に適合します。

レンダラーは、適切な仕様で定義されたとおりにスタイルシートを解釈することに加えて、この仕様で定義されるすべての機能を正しく解析し、それに応じて文書をレンダリングすることでサポートする場合、この仕様に適合します。ただし、デバイスの制限により UA が文書を正しくレンダリングできないことによって、 UA が不適合になることはありません。（たとえば、UA はモノクロモニターで色をレンダリングする必要はありません。）

オーサリングツールは、一般的な CSS 文法およびこのモジュール内の各機能の個別の文法に従って構文的に正しいスタイルシートを作成し、このモジュールで説明されているスタイルシートのその他すべての適合要件を満たす場合、この仕様に適合します。

部分的な実装

作者が前方互換の解析規則を利用してフォールバック値を割り当てられるようにするため、CSS レンダラーは、使用可能なレベルのサポートを持たない at 規則、プロパティ、プロパティ値、キーワード、およびその他の構文構造を無効として扱い（かつ適切に無視し）なければなりません。特に、ユーザーエージェントは、単一の複数値プロパティ宣言において、サポートされないコンポーネント値を選択的に無視しながら、サポートされる値を有効にしてはなりません: いずれかの値が無効と見なされる場合（サポートされない値はそう見なされなければなりません）、CSS は宣言全体を無視することを要求します。

不安定な機能およびプロプライエタリ機能の実装

非実験的な実装

仕様が勧告候補段階に達すると、非実験的な実装が可能になり、実装者は、仕様に従って正しく実装されていることを実証できる CR レベルの機能について、接頭辞なしの実装を公開するべきです。

実装間での CSS の相互運用性を確立し維持するため、 CSS ワーキンググループは、非実験的な CSS レンダラーに対して、CSS 機能の接頭辞なし実装を公開する前に、実装報告書（必要な場合は、その実装報告書で使用したテストケースも）を W3C に提出するよう求めています。 W3C に提出されたテストケースは、CSS ワーキンググループによるレビューおよび修正の対象となります。

テストケースおよび実装報告書の提出に関する詳細情報は、 CSS ワーキンググループの Web サイト https://www.w3.org/Style/CSS/Test/ で確認できます。質問は public-css-testsuite@w3.org メーリングリストに送ってください。