CSS条件付きルールモジュール レベル5

1. はじめに

これは現在、レベル5で新しく追加された内容の初期ドラフトです。 レベル3およびレベル4の機能は引き続き [css-conditional-3] と [css-conditional-4] で定義されており、まだここにはコピーされていません。

CSS Conditional Level 5 は、 @supports ルールおよび supports query 構文を拡張して、 カスタムのサポート条件に加え、サポートされている アットルールやフォント技術のテストを可能にします。

また、@when ルールを追加し、 条件付きルールの概念を一般化します。 既存の条件付きルールで表現できることはすべて、 適切な関数でラップしてどの種類の条件かを宣言することで @when で表現できます。 これにより、メディアクエリやサポートクエリなど複数種類のクエリを 1つのブール式で簡単に組み合わせられます。 これがなければ、 別々の条件付きルールをネストする必要があり、 読み書きが難しくなるうえ、 条件は「and」というブール関係で結合されることが前提となり（他の関係を示すのは容易ではなく）、 提案されている 条件付きルールチェーン における有用性も制限されます。

さらに @else ルールも追加されます。 これは他の条件付きルールの直後に続き、 直前のルールの条件の否定を自動的に条件として扱うため、 条件付きルールチェーン において最初にマッチしたルールだけが適用されます。

また、コンテナクエリも追加されます。 これは概念的にはメディアクエリに似ていますが、 文書全体ではなく文書内の要素（ボックスの寸法や計算済みスタイルなど）の特性をテストできます。

2. @supports ルールの拡張

この仕様レベルでは、<supports-feature> 構文を次のように拡張します。

<supports-feature> = <supports-selector-fn>
                   | <supports-font-tech-fn> | <supports-font-format-fn>
                   | <supports-at-rule-fn>
           | <supports-decl>
<supports-decl> = ( [ <declaration> | <supports-condition-name> ] )
<supports-font-tech-fn> = font-tech( <font-tech> )
<supports-font-format-fn> = font-format( <font-format> )
<supports-at-rule-fn> = at-rule( <at-keyword-token> )

<supports-condition-name>

UA が指定された名前付き条件をサポートしていれば結果は真になります。 名前が認識されない場合、結果は偽です。

<supports-font-tech-fn>

関数の引数として与えられたフォント技術を UA がサポートしていれば結果は真になります。

<supports-font-format-fn>

関数の引数として与えられたフォントフォーマットを UA がサポートしていれば結果は真になります。

<supports-at-rule-fn>

関数の引数として与えられたアットルールを UA がサポートしていれば結果は真になります。

2.1. サポートの定義の拡張

2.1.1. フォント技術とフォーマット

CSS プロセッサは、レイアウトおよび描画において指定された CSS Fonts 4 § 11.1 Font tech を利用できる場合、フォント技術をサポートしていると見なされます。

CSS プロセッサは、レイアウトおよび描画において指定された CSS Fonts 4 § 11.2 Font formats を利用でき、かつそのフォーマットが <string> として指定されていない場合、 フォントフォーマットをサポートしていると見なされます。

2.1.2. アットルール

CSS プロセッサは、任意の文脈で指定された at-keyword で始まる アットルールを受理する場合、 アットルールをサポートしていると見なされます。

注記: @charset は有効な アットルールではないため、 この定義の下ではサポートされているとは見なされません。

2.1.3. 名前付き条件

関連する 名前付き supports 条件が true を返すとき、 CSS プロセッサは名前付き条件をサポートしていると見なされます。

3. 一般化条件付きルール: @when ルール

@when アットルールは、 条件付きグループルールであり、@media や @supports などの個々の条件付きグループルールを一般化したものです。 定義は次のとおりです。

@when <boolean-condition> {
  <rule-list>
}

ここで、<boolean-condition> は Media Queries 4 § 3 構文に準じたブール代数ですが、 葉として media() および supports() 関数を用います。

「ブール代数（X を葉とする）」を Conditional で一般的に定義し、 すべての条件付きルールがそれを直接参照できるようにすべきです。 各自でブール代数を再定義しなくて済むように。

media() および supports() 関数は次のように定義されます。

media() = media( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
supports() = supports( <declaration> )

media() または supports() 関数は、 その内部の条件に対応するブール結果と関連付けられます。

4. 連鎖条件付き: @else ルール

通常、条件付きグループルールは独立しており、 それぞれが他のルールを直接参照することなく個別の条件を評価し、 自身の条件のみに基づいて内包するルールを適用するかどうかを決定します。

これは単純な条件には問題ありませんが、 相互に排他的であるべき条件付きルールの集合を書くのは困難になります。 作者は他のルールが適用される場合に自身が有効化されないよう、 条件を非常に注意深く作成しなければならず、 さらに条件付きルールの集合が誤ってすべてのケースを除外してしまい、 スタイル未適用の状況を残さないようにする必要があります。

@else ルールは 条件付きグループルールであり、条件付きルールチェーンを形成するために使用されます。 これは複数の条件付きグループルールを関連付け、 最初にマッチしたものだけが条件を true と評価することを保証します。 定義は次のとおりです。

@else <boolean-condition>? {
  <rule-list>
}

@else は @when と同一の解釈です。 <boolean-condition> が省略された場合は、 常に true の条件を持つものとして扱われます。

条件付きルールチェーンとは、 連続した 条件付きグループルールの並びであり、 @else 以外の条件付きグループルールで始まり、 その後に 0 個以上の @else ルールが続くものです。 連続する条件付きグループルールの間には空白やコメント以外を置けず、 それ以外のトークンはチェーンを「分断」します。

チェーン内で条件を省略できるのは最後の @else のみとするべきでしょうか？ 私はデバッグ時に if-else チェーンの一部を "true" にしてショートサーキットすることがよくありますが、 CSS でも同様に有用だと推測します。 条件を誤って省略した場合でも、何かおかしいことに気付くのは比較的容易です。

条件付きルールチェーン内では、 各条件付きグループルールの条件が順に評価されます。 いずれかが true になった場合、 チェーン内のその後続の条件付きグループルールの条件は、 明示された条件内容に関わらず false と評価されます。

@else ルールが 条件付きルールチェーンの一部でない場合は無効であり、無視されなければなりません。

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

@media (width >= 400px) and (pointer: fine) {
  @supports (display: flex) {
  /* A */
  }
  @supports not (display: flex) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
    /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
    /* C */
  }
  }
}
@media not ((width >= 400px) and (pointer: fine)) {
  @supports (caret-color: pink) and (background: double-rainbow()) {
  /* B */
  }
  @supports not ((caret-color: pink) and (background: double-rainbow())) {
  /* C */
  }
}

@when font-tech(color-COLRv1) and font-tech(variations) {
  @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}
@else font-tech(color-SVG) {
  @font-face { font-family: icons; src: url(icons-gradient.woff2); }
}
@else font-tech(color-COLRv0) {
  @font-face { font-family: icons; src: url(icons-flat.woff2); }
}
@else {
  @font-face { font-family: icons; src: url(icons-fallback.woff2); }
}

@font-face { font-family: icons; src: url(icons-fallback.woff2);
@supports font-tech(color-COLRv1) {
  @font-face { font-family: icons; src: url(icons-gradient-var.woff2); }
}

5. コンテナクエリ

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

既定では、すべての要素は コンテナスタイルクエリの目的のために クエリコンテナです。 また、コンテナサイズクエリおよび コンテナスクロール状態クエリのための クエリコンテナとして確立するには、 container-type プロパティ （または container のショートハンド）を使って追加のクエリ種別を指定します。 クエリコンテナの フラットツリーの子孫に適用されるスタイルルールは、 @container の条件付きグループルールを用いて、それに対するクエリにより条件付けできます。

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;
  }
}

::part() および ::slotted() の 疑似要素セレクタは DOM ツリー内の実際の要素を表し、 それらの要素の フラットツリーの先祖によって クエリコンテナを確立できます。 その他の疑似要素については、 その起点要素の包含するフラットツリー先祖によって クエリコンテナを確立できます。

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

<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>Green</span>
</div>

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

container-type プロパティは、要素を特定の種類のクエリに対する クエリコンテナとして確立します。 特定の種類のコンテインメントを必要とするサイズの コンテナクエリに対しては、 このプロパティによって要素を明示的にクエリコンテナにします。 その他の種類のクエリコンテナについては、 例えば コンテナスタイルクエリにおいて 任意の要素がクエリコンテナになり得ます。

値の意味は次のとおりです。

size

クエリコンテナを、 コンテナサイズクエリに対して インライン軸と ブロック軸の両方で確立します。 style containment と size containment を principal box に適用し、 独立したフォーマッティングコンテキストを確立します。

inline-size

コンテナ自身の インライン軸における コンテナサイズクエリのための クエリコンテナを確立します。 style containment と inline-size containment を principal box に適用し、 独立したフォーマッティングコンテキストを確立します。

scroll-state

コンテナスクロール状態クエリのための クエリコンテナを確立します

normal

要素は コンテナサイズクエリや コンテナスクロール状態クエリに対する クエリコンテナではありませんが、 コンテナスタイルクエリに対する クエリコンテナであることは変わりません。

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

h2 { font-size: 1.2em; }

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

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

#sticky {
  container-type: scroll-state;
  position: sticky;
}
@container scroll-state(stuck: top) {
  #sticky-child {
  background-color: lime;
  }
}

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

container-name プロパティは クエリコンテナ名のリストを指定します。 これらの名前は @container ルールで使用し、 どの クエリコンテナを対象とするかを絞り込むことができます。 コンテナ名は ツリースコープ名ではありません。

none

この クエリコンテナには クエリコンテナ名がありません。

<custom-ident>

クエリコンテナ名を identifier として指定します。 キーワード 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; }
}

@container my-page-layout {
  .card { padding: 1em; }
}

5.3. 名前付きコンテナの作成: container ショートハンド

container ショートハンドプロパティは、 container-type と container-name の両方を同時に設定します。 <'container-type'> が省略された場合、 その値は初期値にリセットされます。

main {
  container: my-layout / size;
}

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

5.4. コンテナクエリ: @container ルール

@container ルールは 条件付きグループルールであり、 その条件部には コンテナクエリ （コンテナサイズクエリや コンテナスタイルクエリ のブール結合）が入ります。 <block-contents> ブロック内のスタイル宣言は @container ルールの 条件によってフィルタされ、 その要素の コンテナクエリ が真となる クエリコンテナ に対してのみ適用されます。

@container ルールの構文は次のとおりです:

@container <container-condition># {
  <block-contents>
}

ここで:

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

<style-query>     = not <style-in-parens>
          | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]
          | <style-feature>
<style-in-parens> = ( <style-query> )
          | ( <style-feature> )
          | <general-enclosed>
<style-feature> = <style-feature-plain> | <style-feature-boolean> | <style-range>
<style-feature-plain> = <style-feature-name> : <style-feature-value>
<style-feature-boolean> = <style-feature-name>
<style-range> = <style-range-value> <mf-comparison> <style-range-value>
    | <style-range-value> <mf-lt> <style-range-value> <mf-lt> <style-range-value>
    | <style-range-value> <mf-gt> <style-range-value> <mf-gt> <style-range-value>
<style-range-value> = <custom-property-name> | <style-feature-value>

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

none、and、not、or は 上記 <custom-ident> から除外されます。

各要素について、 クエリ対象となる クエリコンテナ は、 その要素の先祖クエリコンテナのうち、 <container-query> 内の すべての コンテナ機能に対して有効な クエリコンテナとして確立されているものから選ばれます。 <container-query> に 未知または未サポートの コンテナ機能が含まれる場合、 その <container-condition> については クエリコンテナ は選択されません。 <container-name> は、 対象となる クエリコンテナの集合を 一致する クエリコンテナ名を持つものに絞り込みます。

要素に対して有効な クエリコンテナ が選択されると、 <container-query> 内の各 コンテナ機能 が その クエリコンテナ に対して評価されます。 有効な クエリコンテナ が先祖に存在しない場合、 その要素に対する コンテナクエリ は unknown となります。 メディアクエリと同様に、<general-enclosed> は unknown となります。 <container-query> が省略された場合は、 <container-name> が一致すれば クエリコンテナは有効となります。

コンテナクエリ が 複数の <container-condition> を含む場合、 各条件は独自に クエリコンテナ を選び、独立して評価されます。 コンテナクエリは、 構成要素 <container-condition> のうち いずれか が true であれば true となり、 全てが false の場合のみ false となります。

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

@container card (inline-size > 30em), style(--large: true) {
  /* styles */
}

複数のネストした コンテナクエリ 内の要素に定義されたスタイルルールは、 その要素に対してすべてのラップされた コンテナクエリ が 真である場合に適用されます。

注記: ネストされた コンテナクエリ は 異なるコンテナに対して評価される場合があるため、 個々の <container-condition> を 1つのクエリにまとめることが常に可能とは限りません。

@container card (inline-size > 30em), style(--responsive: true) {
  /* styles */
}

@container card (inline-size > 30em) {
  @container style(--responsive: true) {
  /* styles */
  }
}

グローバルな名前定義 アットルール（例: @keyframes、@font-face、@layer など） が コンテナクエリ 内で定義されていても、 コンテナクエリ条件の影響は受けません。

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

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

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

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

/* Resolved width is initially 200px, but changes as the transition
   on #sibling progresses. */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* When this container query starts (or stops) applying, a transition
   must start on background-color on #inner. */
@container (width <= 150px) {
  #inner {
  background-color: skyblue;
  }
}

<main>
  <div id=container>
  <div id=inner>Inner</div>
  </div>
  <div id=sibling>Sibling</div>
</main>

computed value が コンテナクエリ長さ単位によって変化した場合も、 スタイル変更イベントの一部でなければなりません。

6. コンテナ機能

コンテナ機能は、クエリコンテナの特定の側面をクエリします。

コンテナ機能は、メディア機能と同じルールでブールコンテキストで評価されます。

6.1. サイズコンテナ機能

コンテナサイズクエリは、クエリコンテナのprincipal boxのサイズをクエリできます。 これは個別のサイズ機能 (<size-feature>) のブール結合であり、それぞれがクエリコンテナの単一かつ特定の寸法機能をクエリします。 <size-feature>の構文はメディア機能と同じで、 機能名、比較演算子、値からなります。[mediaqueries-5] サイズ機能をサイズクエリとしてブール構文・ロジックで結合する方法も CSS機能クエリと同じです。 （@supportsを参照。[css-conditional-3]）

クエリコンテナがprincipal boxを持たない場合や、 principal boxがレイアウトコンテインメントボックスでない場合、 またはクエリコンテナが関連軸でコンテナサイズクエリをサポートしない場合、 サイズ機能の評価結果は unknown となります。

相対長さ単位（コンテナクエリ長さ単位を含む）およびカスタムプロパティはコンテナクエリ条件内で computed value が クエリコンテナの値を基準に評価されます。

ツリーカウント関数（CSS Values 5 § 9 Tree Counting Functions: sibling-count() および sibling-index() 記法）は コンテナ要素に対して評価されます。

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

注記: カスタムプロパティの置換によってサイズ機能の値が無効になった場合、 他の無効な機能値と同様に扱われ、 サイズ機能の評価結果はunknownとなります。

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

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

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

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

aside { --query: 300px; }
main { --query: 500px; }

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

6.1.1. 幅: width 機能

width コンテナ機能は、幅をクエリコンテナのcontent boxについてクエリします。

6.1.2. 高さ: height 機能

height コンテナ機能は、高さをクエリコンテナのcontent boxについてクエリします。

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

inline-size コンテナ機能は、サイズを クエリコンテナのcontent boxのクエリコンテナのインライン軸についてクエリします。

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

block-size コンテナ機能は、サイズを クエリコンテナのcontent boxのクエリコンテナのブロック軸についてクエリします。

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

aspect-ratio コンテナ機能は、 width コンテナ機能の値を height コンテナ機能の値で割った比率として定義されます。

6.1.6. 向き: orientation 機能

portrait

orientation コンテナ機能は、 height コンテナ機能の値が width コンテナ機能の値以上である場合に portrait となります。

landscape

それ以外の場合、orientationは landscape となります。

6.2. スタイルコンテナ機能

コンテナスタイルクエリは、 computed value をクエリコンテナに対してクエリできます。 これは個別のスタイル機能（<style-feature>）のブール結合であり、 それぞれがクエリコンテナの単一かつ特定のプロパティをクエリします。 <style-feature>の構文は 有効な宣言 [CSS-SYNTAX-3]と同じか、 <style-feature-name> または有効なスタイル範囲（<style-range>）です。 <style-feature-name>は、 サポートされているCSSプロパティまたは有効な<custom-property-name>です。 <style-feature-value>の生成規則は、 <declaration-value>であり、 <mf-lt>、<mf-gt> および <mf-eq> トークンを含まない限り有効です。

<style-feature-plain>は、 computed valueが クエリコンテナで指定されたプロパティについて 指定された値（これもクエリコンテナに関して計算される）と一致する場合はtrue、 そうでない場合はfalseとなります。

値を持たないスタイル機能 （<style-feature-boolean>）は、 computed valueが 指定されたプロパティの 初期値と異なる場合にtrueとなります。

スタイル機能をスタイルクエリとしてブール構文・ロジックで結合する方法も CSS機能クエリと同じです。 （@supportsを参照。[css-conditional-3]）

スタイル機能で ショートハンドプロパティをクエリする場合は、 そのcomputed valueが すべてのロングハンドプロパティで一致すればtrue、 一致しなければfalseとなります。

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

注記: 残りの非カスケード依存CSSワイドキーワードは、 他の値と同様にクエリコンテナに関して計算されます。

6.3. スクロール状態コンテナ機能

コンテナスクロール状態クエリは、 スクロール位置に依存する状態をコンテナに対してクエリできるようにします。これは、 個々のスクロール状態機能（<scroll-state-feature>）のブール結合で構成され、 それぞれがクエリコンテナの単一の機能をクエリします。 <scroll-state-feature>の構文は メディア機能と同様で、機能名、比較子、値から成ります。

スクロール状態機能は、 スクロール要素（スクローラ）自体の状態に一致させることも、 先祖のスクロールコンテナの スクロールポートのスクロール位置によって影響を受ける要素の状態に一致させることもできます。前者の例は scrollable 機能、後者は snapped です。

6.3.1. スクロール状態の更新

スクロール状態は、クエリされたスクロール状態がスタイル変更を引き起こし、 レイアウトの結果としてスクロール状態が変化し得るため、レイアウトサイクルを引き起こす可能性があります。

このようなレイアウトサイクルを避けるために、scroll-state のクエリコンテナは、 スナップショット後レイアウト状態ステップを実行する処理の一部として現在の状態を更新します。これは HTML のイベントループ処理モデルの特定のタイミングでのみ実行されます。

スナップショット後レイアウト状態ステップを実行するよう要求されたときは、 すべてのscroll-state のクエリコンテナの現在の状態を更新します。スナップショットされたこの状態は、 次にこれらのステップが実行されるまでの間に行われるすべてのスタイルおよびレイアウトの更新に利用されます。

6.3.2. スティッキー配置: stuck 機能

stuck コンテナ機能は、与えられたエッジに対して sticky に配置されたコンテナが、sticky ビュー矩形内に留まるよう視覚的にシフトされているかどうかをクエリします。 論理エッジは、クエリコンテナの direction と writing-mode に基づいて物理エッジに対応付けられます。 クエリコンテナがsticky 位置指定でない場合、いずれの値にも一致しません。

互いに直交する軸に属する2つの値が同時に一致することはあり得ますが、 同一軸上の反対側エッジが同時に一致することはありません。

@container scroll-state((stuck: top) and (stuck: left)) { ... }

@container scroll-state((stuck: left) and (stuck: right)) { ... }

none

sticky コンテナはどの方向にもシフトされていません。

top

sticky コンテナは上端内に留まるようシフトされています。

right

sticky コンテナは右端内に留まるようシフトされています。

bottom

sticky コンテナは下端内に留まるようシフトされています。

left

sticky コンテナは左端内に留まるようシフトされています。

block-start

sticky コンテナは block-start エッジ内に留まるようシフトされています。

inline-start

sticky コンテナは inline-start エッジ内に留まるようシフトされています。

block-end

sticky コンテナは block-end エッジ内に留まるようシフトされています。

inline-end

sticky コンテナは inline-end エッジ内に留まるようシフトされています。

6.3.3. スクロールスナップ: snapped 機能

snapped コンテナ機能は、スナップターゲットが 与えられた軸において、そのスクロールスナップコンテナにスナップしているか（またはスナップし得るか）をクエリします。すなわち、 scrollsnapchanging イベントが発火するスナップターゲットに一致します。

none

クエリコンテナは スナップターゲットではありません。

x

snapped コンテナ機能は、 x に対して、 クエリコンテナがそのスクロールコンテナの 水平のスナップターゲットである場合に一致します。

y

snapped コンテナ機能は、 y に対して、 クエリコンテナがそのスクロールコンテナの 垂直のスナップターゲットである場合に一致します。

block

snapped コンテナ機能は、 block に対して、 クエリコンテナが スナップターゲットであり、 そのスクロールスナップコンテナのブロック方向において該当する場合に一致します。

inline

snapped コンテナ機能は、 inline に対して、 クエリコンテナが そのスナップターゲットであり、 スクロールスナップコンテナのインライン方向において該当する場合に一致します。

both

snapped コンテナ機能は、 both に対して、 クエリコンテナが そのスナップターゲットであり、 スクロールスナップコンテナの両方向において該当する場合に一致します。

6.3.4. スクロール可能: scrollable 機能

scrollable コンテナ機能は、スクロールコンテナが、ユーザー操作によるスクロールで到達可能な方向に、 クリップされたscrollable overflow rectangleを持つコンテンツを有しているかどうかをクエリします。 つまり、scrollable は hidden なコンテナや、負の scrollable overflow 領域には一致しません。

論理値は、クエリコンテナの direction と writing-mode に基づいて物理方向に対応付けられます。 コンテナがスクロールコンテナでない場合、いずれの値にも一致しません。

none

スクロールコンテナはいずれの方向にもscrollable overflowを持ちません。

top

スクロールコンテナは上端を越えるscrollable overflowを持ちます。

right

スクロールコンテナは右端を越えるscrollable overflowを持ちます。

bottom

スクロールコンテナは下端を越えるscrollable overflowを持ちます。

left

スクロールコンテナは左端を越えるscrollable overflowを持ちます。

block-start

スクロールコンテナは block-start 側にscrollable overflowを持ちます。

inline-start

スクロールコンテナは inline-start 側にscrollable overflowを持ちます。

block-end

スクロールコンテナは block-end 側に scrollable overflowを持ちます。

inline-end

スクロールコンテナは inline-end 側に scrollable overflowを持ちます。

x

スクロールコンテナは水平方向にscrollable overflowを持ちます。

y

スクロールコンテナは垂直方向にscrollable overflowを持ちます。

block

スクロールコンテナはブロック方向にscrollable overflowを持ちます。

inline

スクロールコンテナはインライン方向にscrollable overflowを持ちます。

6.3.5. スクロール済み: scrolled 機能

クエリコンテナがスクロールコンテナである場合、 scrolled コンテナ機能は、その直近の相対スクロールの方向をクエリします。 論理値は、クエリコンテナの direction と writing-mode に基づいて物理方向に対応付けられます。 コンテナがスクロールコンテナでない場合、いずれの値にも一致しません。

none

クエリコンテナはまだ相対スクロールを行っていません。

top

直近の相対スクロールは上方向でした。

right

直近の相対スクロールは右方向でした。

bottom

直近の相対スクロールは下方向でした。

left

直近の相対スクロールは左方向でした。

block-start

直近の相対スクロールは block-start 方向でした。

inline-start

直近の相対スクロールは inline-start 方向でした。

block-end

直近の相対スクロールは block-end 方向でした。

inline-end

直近の相対スクロールは inline-end 方向でした。

x

直近の相対スクロールは水平方向でした。

y

直近の相対スクロールは垂直方向でした。

block

直近の相対スクロールはブロック方向でした。

inline

直近の相対スクロールはインライン方向でした。

7. コンテナ相対長さ： cqw、cqh、cqi、cqb、cqmin、cqmax 単位

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

コンテナクエリ長さ単位は以下のとおりです：

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

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

子要素は、親に指定された相対値を継承せず、 算出値を継承します。

/* フォールバック値はコンテインメントに依存しません */
h2 { font-size: 1.2em; }

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

8. カスタムサポートクエリの定義：@supports-condition規則

@supports-condition at-ruleは、著者がサポートクエリを定義して名前を付け、後で再利用できるようにする条件付きグループ規則です。 これにより、複雑または頻繁に使用するフィーチャークエリを名前で参照できるようになり、 保守性と可読性が向上します。

@supports-condition <supports-condition-name> {
  <block-contents>
}

ここで、<supports-condition-name> は、サポートクエリ名を定義する<extension-name>です。

ブロック内の内容は、ユーザーエージェントが使用されている機能をサポートしているかどうかを判定するために評価されます。 内容はドキュメントのレンダリングには影響しません。

一度定義された名前付きサポート条件は、その後の@supportsまたは@when条件で使用できます。

同じ名前で複数の@supports-condition規則が定義された場合、 ドキュメント順で最後のものが有効となり、それ以前のものは無視されます。

@supports-condition --thicker-underlines {
  text-decoration-thickness: 0.2em;
  text-underline-offset: 0.3em;
}

/* (text-decoration-thickness: 0.2em) および (text-underline-offset: 0.3em) と同等 */
@supports (--thicker-underlines) {
  a {
    text-decoration: underline;
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.3em;
  }
}

@supports-condition規則は@importや@namespace規則の前に記述できます（@charset規則がある場合はその後）。

@supports-condition --nesting {
  & { }
}

@import url("nested-styles.css") supports(--nesting);

@supports-condition --stuck-container-feature {
  @container scroll-state(stuck: top) { }
}

@supports (--stuck-container-feature) {
  div { border-color: navy; }
}

at-rule の名前は議論中です。 他の候補には @supports-query、@supports-test、@custom-supports などがあります。 この名前はカスタムメディアクエリで選択されたものと一貫性があるべきです。

9. API

9.1. CSSContainerRule インターフェイス

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

[Exposed=Window]
interface CSSContainerRule : CSSConditionRule {
  readonly attribute CSSOMString containerName;
  readonly attribute CSSOMString containerQuery;
};

conditionText 型 CSSOMString （CSSContainerRule専用のCSSConditionRule上の属性定義）

conditionText属性（親のCSSConditionRule規則上で定義）は、 次の値を返さなければなりません：

@container規則に<container-name>が関連付けられている場合

containerName属性とcontainerQuery属性の値を単一の空白で結合したもの。

それ以外の場合

containerQuery属性の値。

containerName 型 CSSOMString

containerName属性は、取得時に次の値を返さなければなりません：

@container規則に<container-name>が関連付けられている場合

その<container-name>をシリアライズした結果。

それ以外の場合

空文字列。

containerQuery 型 CSSOMString

containerQuery属性は、 取得時に、指定された<container-query>を 論理的な単純化をせずに返さなければなりません。 これにより、返されるクエリは、この仕様のあらゆる準拠実装 （将来の拡張も含む）で 指定されたクエリと同じ結果になるはずです。 つまり、トークンストリームの単純化（空白の削減や省略など）は許されますが、 論理的な単純化（不要な括弧の削除や評価結果による単純化など）は許されません。

コンテナクエリにはmatchContainerメソッドを持たせるべきです。 これはmatchMedia() やMediaQueryList インターフェイスをモデルにしつつ、 Window ではなく Element に適用されます。 レイアウトサイズの計測時には resizeObserver と似た挙動をしますが、 追加でコンテナクエリ構文と機能も提供します。[Issue #6205]

9.2. CSSSupportsConditionRule インターフェイス

CSSSupportsConditionRule インターフェイスは、@supports-condition規則を表します。

[Exposed=Window]
interface CSSSupportsConditionRule : CSSGroupingRule {
  readonly attribute CSSOMString name;
};

name 型 CSSOMString

この属性は名前付きサポート条件の名前です。

セキュリティに関する考慮事項

このドキュメントに対してセキュリティ上の問題は報告されていません

プライバシーに関する考慮事項

font-tech()およびfont-format()関数は ユーザーのソフトウェアに関する情報（バージョンや、特定機能の有効・無効などの非標準設定）を 提供する場合があります。

この情報は他のAPIからも取得可能です。 しかし、この仕様の機能も Web 上でこの情報が公開される手段のひとつです。

また、これらの情報は集約されることで、ユーザーのフィンガープリント精度を高めるためにも利用可能です。

変更点

2024年11月5日ワーキングドラフトからの変更点 Working Draft of 5 November 2024

• ドキュメント順で最後の @supports-condition が有効であることを明確化 (#12973)
• サポートクエリでat-rule()を用いたat-rule機能表現を拡張 (#2463, #6966, #11116, #11117)
• @supports-condition at-rule と関連する CSSSupportsConditionRule インターフェイスを追加。 (#12622)
• コンテナ名がツリースコープでないことを明確化 (#12090)
• scroll-state()クエリのdirection機能を定義 (#6400)
• 条件内で 0 と 0px が等価であることを明確化 (#12236)
• スタイルコンテナクエリの範囲構文を定義 (#8376)
• ツリーカウント関数を明示的に許可 (#10982)
• 次元コンテナはもはやレイアウトコンテインメントを適用しない (#10544)
• snapped クエリに "both" 値を追加 (#11181)
• overflowing 機能に軸キーワードを追加 (#11183)
• overflowing を scrollable に名称変更 (#11182)
• <container-query> をオプションに (#9192)

2024年7月23日ワーキングドラフトからの変更点 Working Draft of 23 July 2024

• none-キーワードをscroll-state()機能に追加 (#10874)
• container-type:scroll-state, stuck/snapped/scrollable 機能の scroll-state() クエリを追加 (#6402, #10784, #10796)
• 例を修正（container-type:style は存在しない）
• コンテナクエリがフラットツリーを使うことを明示 (#5984)

2021年12月21日最初のパブリックワーキングドラフトからの変更点 First Public Working Draft of 21 December 2021

• コンテナクエリを CSS Contain 3 から本仕様へ移動 (#10433)
• <font-format> および <font-tech> の定義をCSS Fonts 4からインポートし、本仕様で重複しないように修正 (#8110)
• 新しい構文解析アルゴリズム名とブロック生成名に更新
• <font-format> の文法の誤記を修正
• font-tech と font-format の生成規則の余分なスペースを修正 (#7369)

Level 4 からの追加

• @when および @else を追加
• サポートクエリで font-tech() および font-format() によるフォント機能表現を拡張
• サポートクエリに at-rule() による at-rule 機能表現を拡張
• コンテナクエリを [CSS-CONTAIN-3] から本仕様へ移動 （進化の詳細は CSS Containment 3 § A 変更点も参照）
• @supports-condition at-rule と関連する CSSSupportsConditionRule インターフェイスを追加。

謝辞

@when および @else 規則は Tab Atkins の提案に基づいています。

本仕様へのコメントや先行研究には Adam Argyle、 Amelia Bellamy-Royds、 Anders Hartvoll Ruud、 Brian Kardell、 Chris Coyier、 Christopher Kirk-Nielsen、 David Herron、 Eric Portis、 Ethan Marcotte、 Florian Rivoal、 Geoff Graham、 Gregory Wild-Smith、 Ian Kilpatrick、 Jen Simmons、 Kenneth Rohde Christiansen、 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、 その他多くの方々が貢献しています。