CSS Conditional Rules Module Level 5 （日本語訳）

◎要約

この~moduleは、 ~CSSによる［適用されている~stylesheetを成す各部に対する［処理器／環境］の能力に基づく条件付き処理］用の特能を包含する — それは：

~level 4 `css-conditional-4$r の機能性を含み，それを拡張する
一般~化された条件付き規則 `when$at を追加する。
連鎖された条件付き規則 `else$at を追加する。
`supports$at 規則~内で利用される`~supports~query$の構文に対する~font処理~queryを導入する。
`容器~query$を導入する。

◎ This module contains the features of CSS for conditional processing of parts of style sheets, based on capabilities of the processor or the environment the style sheet is being applied in. It includes and extends the functionality of CSS Conditional 4 [css-conditional-4], adding the generalized conditional rule @when and the chained conditional rule @else, as well as introducing font processing queries to the supports query syntax used in @supports rules, and container queries.

~CSSisaLANG

1. 序論

この~level 5 は、現時点では，`新たなもの^emからなる早期~草案である。以前の~level `css-conditional-3$r, `css-conditional-4$r にて定義される特能は、まだ，ここには複製されていない。 ◎ This is currently an early draft of the things that are new in level 5. The features in Level 3 and Level 4 are still defined in [css-conditional-3] and [css-conditional-4] and have not yet been copied here.

この~level 5 は： ◎ ↓

~supportされる~font技術を~testすることを許容するため，［ `supports$at 規則, `~supports~query$の構文］を拡張する。 ◎ CSS Conditional Level 5 extends the @supports rule and supports query syntax to allow testing for supported font technologies.
`when$at 規則を追加する。それは、条件付き規則の概念を一般~化する。既存の条件付き規則において表出できるものは、 `when$at においても，条件の種類を宣言する適切な関数で包装することにより表出できる。これは、単独の真偽-式~内に異なる種別の~queryたち — `媒体~query$, `~supports~query$など — を容易に組合せることを作者に許容する。これが無い下では、作者は別々な条件付き規則を入子にすることに依拠しなければならず，読むのも書くのも難しくなり，各~条件は論理積で~~結合されるものと予め想定され（他を指示する容易な仕方は無い），提案された`条件付き規則の連鎖$における有用性も制約される。 ◎ It also adds an @when rule, which generalizes the concept of a conditional rule. Anything that can be expressed in an existing conditional rule can be expressed in @when by wrapping it in an appropriate function to declare what kind of condition it is. This allow authors to easily combine multiple types of queries, such as media queries and supports queries, in a single boolean expression. Without this, authors must rely on nesting separate conditional rules, which is harder to read and write, presupposes the conditions are to be conjoined with the “and” boolean relation (with no easy way to indicate anything else), and restricts their utility in the proposed conditional rule chains.
`else$at 規則を追加する。それは、他の条件付き規則の直後に後続する。それは、自身の条件を［直前に先行する各~規則の条件が満たされないときに限り `真^i になる］よう自動的に修飾する — それにより、 `条件付き規則の連鎖$を成す規則のうち最初に合致した【条件が `真^i に評価された】ものに限り適用されるようにする。 ◎ It also adds @else rules, which immediately follow other conditional rules and automatically qualify their conditions as the inverse of the immediately preceding rule’s conditions, such that only the first matching rule in a conditional rule chain is applied.
`容器~query$を追加する。それは，概念的には媒体~queryに類似するが、【媒体としての】文書~全体ではなく，文書の中の【個々の】要素の側面（~boxの寸法や算出された~styleなど）を~testすることを許容する。 ◎ It also adds Container Queries. They are conceptually similar to Media Queries, but allow testing aspects of elements within the document (such as box dimensions or computed styles), rather than on the document as a whole.

2. `supports$at 規則に対する拡張

この~levelは、 `supports-feature$t 構文を次に従って拡張する： ◎ This level of the specification extends the <supports-feature> syntax as follows:

`supports-feature@t
	= `supports-selector-fn$t
	| `supports-font-tech-fn$t
	| `supports-font-format-fn$t
	| `supports-decl$t
`supports-font-tech-fn@t
	= font-tech( `font-tech$t )
`supports-font-format-fn@t
	= font-format( `font-format$t )

`supports-font-tech-fn$t: ~UAが引数として供された`~font技術を~supportする$ならば `真^i に評価される†。 ◎ The result is true if the UA supports the font tech provided as an argument to the function.
`supports-font-format-fn$t: ~UAが引数として供された`~font形式を~supportする$ならば `真^i に評価される†。 ◎ The result is true if the UA supports the font format provided as an argument to the function.

【† 他の場合は `偽^i に評価される。 `supports$at 規則~用の条件は、 `未知^i に評価されることはないので。】

2.1. ~supportの定義に対する拡張

~CSS処理器は、次を満たすとき， `~font技術を~supportする@ ものと見なされる ⇒ `font-tech$t として指定された `CSS-FONTS-4$r `§ ~font技術＠~CSSFONT#font-tech-definitions$ を［ ~layout, 描画］において用立てる能力がある。 ◎ A CSS processor is considered to support a font tech when it is capable of utilizing the specified CSS Fonts 4 § 11.1 Font tech in layout and rendering.

~CSS処理器は、次を満たすとき， `~font形式を~supportする@ ものと見なされる ⇒ `font-format$t として指定された `CSS-FONTS-4$r `§ ~font形式＠~CSSFONT#font-format-definitions$ — ただし， `string$t として指定されたものは除く — を［ ~layout, 描画］において用立てる能力がある。 ◎ A CSS processor is considered to support a font format when it is capable of utilizing the specified CSS Fonts 4 § 11.2 Font formats in layout and rendering, and this format is not specified as a <string>.

3. 一般~化された条件付き規則： `when^at 規則

`when@at ~at-規則は、個々の`条件付き~group規則$ — `media$at や `supports$at など — を一般~化する`条件付き~group規則$である。それは、次で定義される： ◎ The @when at-rule is a conditional group rule that generalizes the individual conditional group rules such as @media and @supports. It is defined as:

@when `boolean-condition^t {
  `rule-list$t
}

`boolean-condition^t は、 `MEDIAQUERIES-5$r `§ 構文＠~MQ5#mq-syntax$ に似た真偽-代数であるが，［ `media$f, `supports$f ］関数を葉として伴う。 ◎ Where <boolean-condition> is a boolean algebra a la Media Queries 4 § 3 Syntax, but with media() and supports() functions as leaves.

“真偽-代数”, “〜を葉として伴う” を汎用な仕方で定義する。すべての条件付き規則が — 自前の真偽-代数を定義し直す必要なく — それを直に参照できるよう。【おそらく、 `boolean-expr$t `CSS-VALUES-5^r を参照することになろう。】 ◎ Define "boolean algebra, with X as leaves" in a generic way in Conditional, so all the conditional rules can reference it directly, rather than having to redefine boolean algebra on their own.

`media$f 関数, `supports$f 関数は、次で定義される： ◎ The media() and supports() functions are defined as:

`media@f
	= media( [ `mf-plain$t | `mf-boolean$t | `mf-range$t ] )
`supports@f
	= supports( `declaration^t )

これらの関数は、その名前を伴う~at-規則 — `media^f 用には `media$at ／ `supports^f 用には `supports$at — に則って，その引数を評価した結果に評価される。 ◎ A media() or supports() function is associated the boolean result that its contained condition is associated with.

4. 連鎖された条件付き規則： `else^at 規則

`条件付き~group規則$は、通例的には，互いに独立である — 各自が有する条件は，他の規則への直な参照を伴うことなく別々に評価され、もっぱら自身の条件に基づいて，包含している規則を適用するかどうかを裁定する。 ◎ Usually, conditional group rules are independent; each one has a separate condition evaluated without direct reference to any other rule, and decides whether or not to apply its contained rules based solely on its condition.

これは、単純な条件~用には事足りるが，［相互に排他的になることが意味された一連の条件付き］を書くことは困難である。作者は、それらの条件を注意深く細工する必要がある — ［他の規則が意味されるときには、作動化しない］よう，および［一連の条件付きが`すべて^emが不用意に除外されて，一部の状況では~styleされなくなる］ことはないよう。 ◎ This is fine for simple conditions, but makes it difficult to write a collection of conditionals that are meant to be mutually exclusive: authors have to very carefully craft their conditions to not activate when the other rules are meant to, and make sure the collection of conditionals don’t accidentally all exclude some situation which is then left unstyled.

`else@at 規則は、 `条件付き規則の連鎖$を形成するために利用される`条件付き~group規則$である — それは、複数の`条件付き~group規則$どうしを結付けて，［最初に合致するものに限り，その条件が `真^i として評価されるようになる］ことを保証する。それは、次で定義される： ◎ The @else rule is a conditional group rule used to form conditional rule chains, which associate multiple conditional rules and guarantee that only the first one that matches will evaluate its condition as true. It is defined as:

@else `boolean-condition^t? {
  `rule-list$t
}

`else$at は、 `when$at と同じに解釈される。その `boolean-condition^t が省略された場合、［常に `真^i に評価される条件］が在るものとして扱われる。 ◎ @else is interpreted identically to @when. If its <boolean-condition> is omitted, it’s treated as having a condition that’s always true.

`条件付き規則の連鎖@ とは、［ `else$at 以外の`条件付き~group規則$から開始され， 0 個以上の `else^at 規則が後続する］ような，連続する一連の`条件付き~group規則$である。これら各`条件付き~group規則$どうしの合間には、空白や~comment以外の~tokenは生じ得ない — そのような~tokenは、当の連鎖を “分断する” 。 ◎ A conditional rule chain is a series of consecutive conditional group rules, starting with a conditional group rule other than @else, followed by zero or more @else rules. There cannot be anything between the successive conditional group rules other than whitespace and/or comments; any other token “breaks” the chain.

条件を省略できるのは，連鎖を成す最後の `else$at に限られるものと要求するべきか？ ~code内の `if^c … `else^c が成す連鎖に対し［ ~debugするために，どれか 1 つに `true^c を設定して連鎖を短絡する］ことは、人にもよろうが，共通的にあろう。 ~CSSにおいても，それは類似に有用になりそうだ — 不用意に条件を省略した場合でも、何か間違ったことは，~~大体は容易に~~判明するであろう。 ◎ Should we require that only the last @else in a chain can have an omitted condition? It’s not uncommon for me, when debugging code, to short-circuit an if-else chain by setting one of them to "true"; I presume that would be similarly useful in CSS? It’s still pretty easy to see you’ve done something wrong if you omit the condition accidentally.

`条件付き規則の連鎖$の中では、順に，各`条件付き~group規則$を成す条件が評価される。それらのうちいずれかが `真^i に評価される場合、 `後続して^emいるどの`条件付き~group規則$に対しても，その条件は — 何が言明されようが — `偽^i に評価される。 ◎ Within a conditional rule chain, the conditions of each conditional group rule are evaluated in order. If one of them is true, the conditions of all following conditional group rules in the chain evaluate to false, regardless of their stated condition.

`条件付き規則の連鎖$の一部を成していない `else$at 規則は、無効であり，無視するモノトスル。 ◎ An @else rule that is not part of a conditional rule chain is invalid and must be ignored.

（いくぶん作為的な）条件付き連鎖の例： ◎ For example, here’s a (somewhat silly) conditional chain:

@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 */
}

これらの規則のうち選ばれるものは、一つだけになる — 最初の 2 つに指定された条件はまったく独立で排他的でないし， 3 個目の規則は何も指定しない【すなわち，無条件】が、それでも。 ◎ Exactly one of the preceding rules will be chosen, even though the second rule doesn’t exclude large widths, fine points, or flexbox support, and the last rule doesn’t specify anything at all.

`条件付き規則の連鎖$を用いずに同じ結果を達成するためには、次のように書く必要があろう： ◎ To achieve the same result without conditional rule chains, you’d need to write:

@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 */
  }
}

これは、読むのが難しいことに加え，条件, 内容どちらにも有意な重複が要求され、正しく書くのが`とても困難^emである。条件がもっと複雑な場合（~~現実の内容においては珍しくない）、 `有意^emに悪化する。 ◎ This is simultaneously hard to read, requires significant duplication of both conditions and contents, and is very difficult to write correctly. If the conditions got any more complicated (which is not unusual in real-world content), the example would get significantly worse.

この例では、 3 種の異なる色~font技術が選好される順序で~testされる — 最も能力があるものから順に：［ `color-COLRv1^v, `variations^v ］は［ ~gradient, ~font異体］どちらも~supportする。 `color-SVG^v は~gradientを~supportする。 `color-COLRv0^v は色~fontだけを~supportする。 ◎ In this example, three different color font technologies are tested, in order of preference, plus a monochrome fallback. The most capable, COLRv1, supports both gradients and font variations; the next best choice, SVG, supports gradients while the least capable, COLRv0, supports flat color fill only.

また、最後に~fallbackとして単彩色もある — それには~test条件は無いので、他が選ばれない場合には，常に選ばれる。 ◎ The fallback has no test condition, so will always be chosen unless one of the earlier conditions succeeds.

@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【 `icons-gradient-var.woff2^v 】は，［ `color-COLRv1^v, ~font異体］どちらも~supportされる場合に限り~downloadされることに注意。 ◎ Notice that in this example, the variable color font is only downloaded if COLRv1 is supported and font variations are also supported.

可用な~optionのうち 1 つだけが~downloadされることにも注意。 `when$at, `else$at を伴わない事例では、次の例が示すとおり，そうならない。 ◎ Notice too that only one of the available options will be downloaded; this would not be the case without @when and @else, as the next example shows.

この例では、［ `color-COLRv1^v が~supportされる場合は，~fallbackは利用されなくなる］ように現れるが、事実においては，どちらの~fontも~downloadされ、利用されない~fontは帯域幅を浪費することになる。 ◎ In this example, although it appears that the fallback will not be used if COLRv1 is supported, in fact both fonts will be downloaded, which wastes bandwidth if it is not used.

それでも、一部の文字~用には，~fallbackが利用されるかもしれない — 例えば、当の色~fontは~Latinしか~supportしないが， ~fallbackは~Latinと~Greekを~supportする場合。 ◎ The fallback might still be used for some characters; for example, if the color font supports only Latin, while the fallback supports Latin and Greek.

@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. 容器~query

`媒体~query$は，当の文書を表示している~UAや機器~環境を成すある種の側面（表示域~寸法や利用者~選好など）を~queryするための~methodを供するが、 `容器~query$は，当の文書の中で要素を成すある種の側面（~box寸法や算出された~styleなど）を~testすることを許容する。 ◎ While media queries provide a method to query aspects of the user agent or device environment that a document is being displayed in (such as viewport dimensions or user preferences), container queries allow testing aspects of elements within the document (such as box dimensions or computed styles).

`容器~style~query$の目的においては、すべての要素は，既定では `~query容器@ （ `query container^en ）になる。さらには、［ `container-type$p ~prop（または `container$p `略式~prop$）を利用して，追加的な~query種別を指定する］ことにより，要素は［ `容器~size~query$／ `容器~scroll状態~query$ ］用の`~query容器$も確立し得る。 `~query容器$の`平坦~tree$における子孫に適用される~style規則は、［当の容器に対し， `container$at `条件付き~group規則$を利用して~queryする］ことにより，条件付けられ得る。 ◎ By default, all elements are query containers for the purpose of container style queries, and can be established as query containers for container size queries and container scroll-state queries by specifying the additional query types using the container-type property (or the container shorthand). Style rules applying to a query container’s flat tree descendants can be conditioned by querying against it, using the @container conditional group rule.

例えば、 `main^e や `aside^e 用の区画を容器として定義してから， `.media-object^css を［自身が属する容器の~sizeに依存して~layoutを縦方向から横方向へ変更する］ものとして記述できる： ◎ For example, we can define the main content area and sidebar as containers, and then describe a .media-object that changes from vertical to horizontal layout depending on the size of its 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;
  }
}

［ `main^e ／ `aside^e ］用の区画~内の各 `.media-object^css は、各自の自前の容器~文脈に応答することになる。 ◎ Media objects in the main and sidebar areas will each respond to their own container context.

`疑似要素$選択子~用には、 `~query容器$は，次により確立され得る：

［ `part()$pe ／ `slotted()$pe ］用には、［それが表現する~DOM~tree内の本物の要素］の`平坦~tree$における先祖
他の疑似要素~用には、その`出自の要素$†の`平坦~tree$における`広義-先祖$

【† より精確には`最終的な出自の要素$ （次の注記に現れる “出自の要素” も同様）。】

◎ For the ::part() and ::slotted() pseudo-element selectors, which represent real elements in the DOM tree, query containers can be established by flat tree ancestors of those elements. For other pseudo-elements, query containers can be established by inclusive flat tree ancestors of their originating element.

注記：従って： ◎ It follows that:

［ `before$pe, `after$pe, `marker$pe, `backdrop$pe ］は、各自の出自の要素を~queryする。 ◎ ::before, ::after, ::marker, and ::backdrop query their originating elements
［ `first-letter$pe, `first-line$pe ］は、各自の出自の要素を~queryする — 継承と描画の目的において， `仮想の~tag列$が `first-line$pe を他の要素を過ぎるよう押出す場合でも。 ◎ ::first-letter and ::first-line query their originating elements, even if the fictional tag sequence may push the ::first-line past other elements for the purpose of inheritance and rendering
選択子 `slotted()$pe は、 `~shadow~tree$の内側にある容器たち（~slot自身も含む）を~queryできる。 ◎ ::slotted() selectors can query containers inside the shadow tree, including the slot itself
選択子 `::slotted()::before^css は、 `~shadow~host$の~slotされる子【 `slotted()$pe に合致する要素】を~queryできる ◎ ::slotted()::before selectors can query the slotted shadow host child
選択子 `part()$pe は、 `~shadow~tree$の内側にある容器を~queryできる。 ◎ ::part() selectors can query containers inside the shadow tree
［ `placeholder$pe, `file-selector-button$pe ］は，入力~要素を~queryできるが、当の入力~要素が`~shadow~tree$を利用して実装された場合，それは内部の容器を公開しない。 ◎ ::placeholder and ::file-selector-button can query the input element, but do not expose any internal containers if the input element is implemented using a shadow tree

次の `before^pe 選択子は、出自の要素の~sizeを~queryしている： ◎ A ::before selector querying the size of the originating element:

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

`~shadow~host$（この例では `id=host^c ）の【ある~slot（ `slot^e ）にアテガわれることになる】子（ `id=slotted^c ）を~styleするための `slotted()$pe 選択子は、当の`~shadow~tree$内の容器（ `id=container^c ）を~queryできる： ◎ A ::slotted() selector for styling a shadow host child can query a container in the shadow tree:

<div id=host style="width:200px">
  <template `shadowrootmode＠~HEscripting#attr-template-shadowrootmode$【！shadowroot】=open>
    <style>
      #container {
        width: 100px;
        container-type: inline-size;
      }
      @container (inline-size < 150px) {
        ::slotted(span) {
          color: green;
        }
      }
    </style>
    <div id=container>
      <slot></slot>【！<slot />】
    </div>
  </template>
  <span id=slotted>Green</span>
</div>

5.1. ~query容器の作成-法： `container-type^p ~prop

◎名 `container-type@p ◎値 `normal$v | [ [ `size$v | `inline-size$v ] || `scroll-state$v ] ◎初 `normal^v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定された~keyword ◎順文法に従う ◎ア ~animate不可 ◎表終

`container-type$p ~propは、ある種別の`容器~query$ — `容器~size~query$【！~size`容器~query$】【／`容器~scroll状態~query$】 — 用に，明示的に要素を`~query容器$として確立させる。 `容器~size~query$用には、いくつかの種別の`封込め$も適用される【！要求する】。他の種別の`容器~query$ — `容器~style~query$など — 用には、どの要素も`~query容器$になれる。 ◎ The container-type property establishes the element as a query container for certain types of queries. For size container queries, which require certain types of containment, elements are explicitly made query containers through this property. For other types of query containers any element can be a query container, such as for container style queries.

各種~値の意味は： ◎ Values have the following meanings:

`size@v: 要素は、［ `行内-軸$, `塊-軸$ ］どちらに対しても，`容器~size~query$用に`~query容器$を確立する。 ◎ Establishes a query container for container size queries on both the inline and block axis.＼; 要素の`首要~box$に［ `~layout封込め$, `~style封込め$, `~size封込め$ ］を適用する。 ◎ Applies layout containment, style containment, and size containment to the principal box.
`inline-size@v: 要素は、【！container’s】自前の`行内-軸$に対し，`容器~size~query$用に`~query容器$を確立する。 ◎ Establishes a query container for container size queries on the container’s own inline axis.＼; 要素の`首要~box$に［ `~layout封込め$, `~style封込め$, `行内-~size封込め$ ］を適用する。 ◎ Applies layout containment, style containment, and inline-size containment to the principal box.
`scroll-state@v: 要素は、 `容器~scroll状態~query$【！`~scroll状態~query^】用に`~query容器$を確立する。 ◎ Establishes a query container for scroll-state queries
`normal@v: 要素は、［ `容器~size~query$／`容器~scroll状態~query$ ］用の`~query容器$にはならないが， `容器~style~query$用の`~query容器$であり続ける。 ◎ The element is not a query container for any container size queries or scroll-state queries, but remains a query container for container style queries.

例えば，作者は、容器の~sizeに応答-可能な~typographyを作成できる — ~sizeに基づいて，［ `font-size$p や `line-height$p その他の~typographic~style ］を調整するような： ◎ For example, authors can create container-responsive typography, adjusting font-size, line-height, and other typographic concerns based on the size of a container:

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

h2 { font-size: 1.2em; }

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

~query条件~内で利用される値 `40em^v は、関連な`~query容器$†の `font-size$p の`算出d値$に相対的になる。【† この例では `aside^e または `main^e が選定されるものと想定されている。】 ◎ The 40em value used in the query condition is relative to the computed value of font-size on the relevant query container.

容器は、 ~queryされる~styleの算出d値も公開できる。これは、複数の~propにわたって挙動を~toggleするときに有用になり得る： ◎ Containers can also expose computed style values for querying. This can be useful for toggling behavior across multiple properties:

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

容器は、 ~scroll~offsetに依存する状態も公開し得る。この例では、 `張付きに位置され$た要素【 `#sticky^css 】が上端~辺に張付なとき，その子孫【 `#sticky-child^css 】を~styleする： ◎ Containers can also expose state that depends on scroll offset. This example styles a descendant of a sticky positioned element when it is stuck to the top edge:

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

5.2. ~query容器の命名-法： `container-name^p ~prop

◎名 `container-name@p ◎値 `none^v | `custom-ident$t+ ◎初 `none^v ◎適すべての要素 ◎継されない ◎百受容しない ◎算 ~keyword `none$v ／ `~CSS識別子$たちが成す有順序~list ◎順文法に従う ◎ア ~animate不可 ◎表終

`container-name$p ~propは、 `~query容器~名@ （ `container query name^en ）たちが成す~listを指定する。これらの名前は、 `container$at 規則により，どの`~query容器$を~targetにするか~filterするために利用できる。 ◎ The container-name property specifies a list of query container names. These names can be used by @container rules to filter which query containers are targeted.

`none@v: 当の`~query容器$には`~query容器~名$は無い。 ◎ The query container has no query container name.
`custom-ident$t: `~query容器~名$を`~CSS識別子$として指定する。この `custom-ident$t からは、 ~keyword［ `none$v, `and^v, `not$v, `or^v ］は除外される。 ◎ Specifies a query container name as an identifier. The keywords none, and, not, and or are excluded from this <custom-ident>.

一部の事例では、特定の容器を成す側面を~queryすることが求まれる — それが【この例では `.card^css の】最も近い先祖~容器でない場合でも。例えば、［ `main^e 内容~区画の塊~size／より入子にされた `.my-component^css の行内~size ］を~queryするよう求まれるかもしれない。 ◎ In some cases, we want to query aspects of a specific container, even if it’s not the nearest ancestor container. For example, we might want to query the height of a main content area, and the width of a more nested inline-container.

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

容器をその名前のみに基づいて~queryすることもアリである。 ◎ It is also possible to query for a container only based on its name.

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

5.3. 有名~容器の作成-法： `container^p 略式~prop

◎名 `container@p ◎値 `container-name$tp [ / `container-type$tp ]? ◎初個々の~propを見よ ◎適個々の~propを見よ ◎継個々の~propを見よ ◎百個々の~propを見よ ◎算個々の~propを見よ ◎ア個々の~propを見よ ◎順文法に従う ◎表終

`container$p `略式~prop$は、同じ宣言で［ `container-type$p, `container-name$p ］両者を設定する。 `container-type$tp が省略された場合、 `container-type$p は，その`初期~値$に設定し直される。 ◎ The container shorthand property sets both container-type and container-name in the same declaration. If <'container-type'> is omitted, it is reset to its initial value.

略式~構文を利用して，［ `container-type$p, `container-name$p ］両者を定義できる： ◎ We can define both a container-type and container-name using the shorthand syntax:

main {
  container: my-layout / size;
}

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

5.4. 容器~query： `container^at 規則

`container@at 規則は，`条件付き~group規則$であり、その条件は `容器~query@ （ `container query^en ）を包含する。 `容器~query$は、［個々の［ `容器~size~query$／`容器~style~query$ ］【 `container-query$t 】による真偽-条件］たちが成す組合nである。 `container$at 規則の `block-contents$t ~blockの中の~style宣言たちは、規則の条件により，［所与の要素~用の`~query容器$に対し`容器~query$を評価した結果が `真^i になるときに限り，要素に適用される【！match】］よう`~filterされる＠~CASCADE#filtering$。 ◎ The @container rule is a conditional group rule whose condition contains a container query, which is a boolean combination of container size queries and/or container style queries. Style declarations within the <block-contents> block of an @container rule are filtered by its condition to only match when the container query is true for their element’s query container.

【 `容器~query$は、一般には［当の規則の条件~全体］を指すが，当の規則を成す個々の `container-query$t を指すこともある。】

`container$at 規則の構文は： ◎ The syntax of the @container rule is:

@container `container-condition$t# {
  `block-contents$t
}

ここで： ◎ where:

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

この構文を成す `custom-ident$t においては、 ~keyword［ `none$v, `and^v, `not$v, `or^v ］は除外される。 ◎ The keywords none, and, not, and or are excluded from the <custom-ident> above.

各~要素に対し、所与の `container-condition$t %条件用に~queryされることになる`~query容器$は，当の要素の先祖のうち［ %条件を成す `container-query$t を成すどの`容器~特能$用にも妥当である］ものとして確立された`~query容器$から選定される。 `container-query$t が［未知な／~supportされない］`容器~特能$を包含する場合、 %条件用に選定される`~query容器$は無い。 `container-name$t は、 `~query容器$たちが成す集合を［合致している`~query容器~名$を伴うもの］だけが考慮されるよう~filterする。 ◎ For each element, the query container to be queried is selected from among the element’s ancestor query containers that are established as a valid query container for all the container features in the <container-query>. If the <container-query> contains unknown or unsupported container features, no query container will be selected for that <container-condition>. The <container-name> filters the set of query containers considered to just those with a matching query container name.

【該当する`~query容器$が複数ある場合に，どれが選定されるのか指定する記述が無い — 普通に考えれば、それらのうち当の要素に最も近い先祖？（原文の `query container^en は、多くの箇所で単数形なので，すべてが選定されることはないであろう）。】

要素~用に適格な`~query容器$が選定されたなら、 `container-query$t 内の各`容器~特能$は，その`~query容器$に対し評価される。どの先祖も適格な`~query容器$でない場合、当の要素に対しては，`容器~query$の結果は `未知^i になる。媒体~queryと同じく、 `general-enclosed$t を評価した結果は `未知^i になる。 `container-query$t が省略された場合、 `~query容器$は， `container-name$t が合致する限り適格になる。 ◎ Once an eligible query container has been selected for an element, each container feature in the <container-query> is evaluated against that query container. If no ancestor is an eligible query container, then the container query is unknown for that element. As with media queries, <general-enclosed> evaluates to unknown. If the <container-query> is omitted, the query container is eligible as long as the <container-name> matches.

`容器~query$が複数の `container-condition$t を含む場合、各~条件ごとに自前の`~query容器$が選定され，それらは独立に評価されることになる。 `容器~query$を評価した結果は、［次が満たされるならば `真^i ／ ~ELSE_ `偽^i ］になる ⇒ `いずれか^emの `container-condition$t 成分を評価した結果は `真^i になる ◎ If a container query includes multiple <container-condition>s, each condition will select it’s own query container, and evaluate independently. A container query is true if any of its component <container-condition>s are true, and false only if all of its component <container-condition>s are false.

`媒体~query$と同じく、単独の条件~内に複数の~queryを一緒につなげれる： ◎ As with media queries, we can string together multiple queries in a single condition:

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

上の~style群は、 ~AND↓ を満たす先祖~容器が在る場合に限り，適用されることになる：

【`container-name$p により】 "`card^v" と命名された
`inline-size$d 条件を満たす
`style()$css 条件を満たす

◎ The styles above will only be applied if there is an ancestor container named "card" that meets both the inline-size and style conditions.

複数の条件を~listを成すよう【すなわち，~commaで分離して】組合せることにより、条件ごとに異なる容器に対し評価させることもできる： ◎ We can also combine multiple conditions into a list, with each condition evaluating against a different container:

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

上の~styleは、 ~OR↓ が満たされる場合に適用されることになる：

次を満たす先祖~容器が在る ⇒ ［ "`card^v" と命名された］~AND［ `inline-size$d 条件を満たす］
最も近い~style容器は `style()$css 条件を満たす【なぜ，ここだけが他の例と違って “最も近い” を伴うのか不明。】

◎ The styles above will be applied if there is an ancestor container named "card" that meets the inline-size condition or the nearest style container meets the style condition.

複数に【複数の `container^at を通して】入子にされた`容器~query$の内側に在る［ある要素に対し定義された~style規則］は、次が満たされるとき適用される ⇒ それを包装しているどの【 `container^at の】`容器~query$に対しても，次が満たされる ⇒ それを当の要素~用に評価した結果は `真^i になる ◎ Style rules defined on an element inside multiple nested container queries apply when all of the wrapping container queries are true for that element.

注記：入子な`容器~query$は，［その親とは異なる容器］との関係において評価されることもあるので、複数の `container-condition$t を単独の~queryの中へ併合することは，常にアリになるとは限らない。 ◎ Note: Nested container queries can evaluate in relation to different containers, so it is not always possible to merge the individual <container-condition>s into a single query.

単独の［ ~commaで分離された`容器~query$ ］を利用すれば、複数の容器を~queryできる： ◎ Using a single comma-separated container query, we can query multiple containers:

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

上の~style群は、 ~OR↓ を満たす容器の内側にある要素に適用されることになる：

［ "`card^v" と命名された］~AND［ `inline-size$d 条件を満たす］
`style()$css 条件を満たす

◎ The styles above will apply for an element inside either a container named "card" that meets the inline-size condition, or a container meeting the style condition.

複数の容器を~queryしつつ， `すべての^em 条件を満たすよう要求するためには、複数の`容器~query$を入子にする必要がある： ◎ In order to require that all conditions are met while querying multiple containers, we would need to nest multiple queries:

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

上の~style群は、 ~AND↓ を満たす要素に限り，適用されることになる：

次を満たす先祖~容器が在る ⇒ ［ "`card^v" と命名された］~AND［ `inline-size$d 条件を満たす］
`style()$css 条件を満たす先祖~容器が在る

◎ The styles above will only be applied if there is both an ancestor container named "card" that meets the inline-size condition, and an ancestor container meeting the style condition.

大域的な名前を定義している`~at-規則$ — `keyframes$at／ `font-face$at ／ `layer$at など — は、 `容器~query$の内側で定義された場合でも，当の~query条件により拘束されない。 ◎ Global, name-defining at-rules such as @keyframes or @font-face or @layer that are defined inside container queries are not constrained by the container query conditions.

5.5. ~animateされる容器

`容器~query$の評価における変化は、 `~style変化~event$の一部を成すモノトスル — 当の変化が`~animation効果により生じた＠~WANIM#effect-value$ときでも。 ◎ A change in the evaluation of a container query must be part of a style change event, even when the change occurred because of animation effects.

容器【この例では `#container^css 】の同胞である要素【この例では `#sibling^css 】に対する遷移は、当の容器の~sizeに間接的に影響し得る — その結果，容器~queryの評価が変化すると、【容器~内の要素（この例では `#inner^css ）に対し】 `~style変化~event$を誘発する： ◎ A transition on a sibling element can indirectly affect the size of a container, triggering style change events whenever container queries change their evaluation as a result:

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

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

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

/* 
`width^p の解決d値は初期~時は 200px になるが、
`#sibling^css に対する遷移が進捗するに伴い変化する。
◎
Resolved width is initially 200px, but changes as the transition on #sibling progresses.
 */
#inner {
  transition: 1s background-color;
  background-color: tomato;
}

/* 
この容器~queryの評価が変化したときは、
`#inner^css の `background-color^p に対する遷移を開始させる【！must】。
◎
When this container query starts (or stops) applying, a transition must start on background-color on #inner.
 */
@container (width <= 150px) {
  #inner {
    background-color: skyblue;
  }
}

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

#sibling:hover {
  width: 200px;
}

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

`容器~query長さ単位$に~~起因する`算出d値$における変化も， `~style変化~event$の一部を成すモノトスル。 ◎ Changes in computed values caused by container query length units must also be part of a style change event.

6. 容器~特能

`容器~特能@ （ `container feature^en ）は、 `~query容器$を成す特有な側面を~queryする。 ◎ A container feature queries a specific aspect of a query container.

`容器~特能$は、 `真偽-文脈$において評価するときは，`媒体~特能$と同じ規則を利用する。 ◎ Container features use the same rules as media features when evaluating in a boolean context.

6.1. ~size容器~特能

`容器~size~query@ （ `container size query^en ）は、 `~query容器$の`首要~box$の~sizeを~queryすることを許容する。それは、［個々の`~size特能$による真偽-条件］たちが成す組合nである。個々の `~size特能@ （ `size-feature$t ）は、当の`~query容器$を成す単独の［特定の［寸法に関する特能］］を~queryする。 `size-feature@t の構文は、 `媒体~特能$ `mediaqueries-5$r 用のそれと同じであり，［特能~名, 比較子, 値］からなる。各`~size特能$を`容器~size~query$に組合せる真偽-［構文, 論理］は、 `~CSS特能~query$用のそれと同じである。（ `supports$at を見よ。 `css-conditional-3$r ） ◎ A container size query allows querying the size of the query container’s principal box. It is a boolean combination of individual size features (<size-feature>) that each query a single, specific dimensional feature of the query container. The syntax of a <size-feature> is the same as for a media feature: a feature name, a comparator, and a value. [mediaqueries-5] The boolean syntax and logic combining size features into a size query is the same as for CSS feature queries. (See @supports. [css-conditional-3])

所与の`~query容器$ %容器用に`~size特能$ %特能を評価した結果は、 %容器が ~AND↓ を満たさない場合には， `未知^i になる：

%容器の`首要~box$は、 `~layout封込め~box$である
%容器は、 %特能【！`容器~size~query$】に関連な軸において %特能【が~queryする寸法】を~supportする

◎ If the query container does not have a principal box, or the principal box is not a layout containment box, or the query container does not support container size queries on the relevant axes, then the result of evaluating the size feature is unknown.

`容器~query$を成す各~条件~内の［ `相対~長さ単位$（`容器~query長さ単位$を含む）／【 `var$f により参照される】`~custom~prop$ ］は、当の`~query容器$における［当の単位を伴う値／当の~prop ］の`算出d値$に基づいて評価される。 ◎ Relative length units (including container query length units) and custom properties in container query conditions are evaluated based on the computed values of the query container.

注記：これは、 `媒体~query$内の相対~単位に対する取扱いとは異なる。 ◎ Note: This is different from the handling of relative units in media queries.

注記： `~custom~prop$による`代入＠~CSSVAL5#substitute-arbitrary-substitution-function$の結果が当の`~size特能$用には妥当でない値になる場合、他の妥当でない特能~値と同じに取扱われ，当の~size特能を評価した結果は `未知^i になる。 ◎ Note: If custom property substitution results in an invalid value for the size feature, it is handled the same as other invalid feature values, and the result of the size feature is unknown.

例えば， `font-size^p が互いに異なる`~query容器$たちは、 `em$u 単位に基づく~queryを各自の自前の `font-size^p に相対的に評価することになる： ◎ For example, query containers with different font-sizes will evaluate em-based queries relative to their own font sizes:

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

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

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

この~query条件~内で利用された値 `40em^v は、関連な`~query容器$の `font-size$p の`算出d値$に相対的になる — この~query条件は： ◎ The 40em value used in the query condition is relative to the computed value of font-size on the relevant query container:

`aside^e の内側にある `h2^e 用には、容器の `width$d が `640px^v を上回るとき `真^i になる。 ◎ For any h2 inside aside, the query condition will be true above 640px.
`main^e の内側にある `h2^e 用には、容器の `width$d が `960px^v を上回るとき `真^i になる。 ◎ For any h2 inside main, the query condition will be true above 960px.

類似に，`~query容器$は、 `var$f に基づく~queryを自前の`~custom~prop$の`算出d値$に相対的に評価することになる： ◎ Similarly, query containers will evaluate var()-based queries relative to their own computed value of the custom property:

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

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

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

この~query条件に利用された `var(--query)^v には、関連な`~query容器$の `--query^p `~custom~prop$の`算出d値$が代入される — この~query条件は： ◎ The var(--query) value used in the query condition is substituted with the computed value of the --query custom property on the relevant query container:

`aside^e の内側にある `h2^e 用には、算出d値が `300px^v を上回るとき `真^i になる。 ◎ For any h2 inside aside, the query condition will be true above 300px.
`main^e の内側にある `h2^e 用には、算出d値が `500px^v を上回るとき `真^i になる。 ◎ For any h2 inside main, the query condition will be true above 500px.

6.1.1. 横幅： `width^d 特能

◎述 `width@d ◎用 `container$at ◎値 `length$t ◎型範囲 ◎表終

`容器~特能$ `width$d は、 `~query容器$の`内容~box$の`横幅$を~queryする。 ◎ The width container feature queries the width of the query container’s content box.

6.1.2. 縦幅： `height^d 特能

◎述 `height@d ◎用 `container$at ◎値 `length$t ◎型範囲 ◎表終

`容器~特能$ `height$d は、 `~query容器$の`内容~box$の`縦幅$を~queryする。 ◎ The height container feature queries the height of the query container’s content box.

6.1.3. 行内-~size： `inline-size^d 特能

◎述 `inline-size@d ◎用 `container$at ◎値 `length$t ◎型範囲 ◎表終

`容器~特能$ `inline-size$d は、［ `~query容器$の`行内-軸$における， `~query容器$の`内容~box$の`~size$ ］を~queryする。 ◎ The inline-size container feature queries the size of the query container’s content box in the query container’s inline axis.

6.1.4. 塊~size： `block-size^d 特能

◎述 `block-size@d ◎用 `container$at ◎値 `length$t ◎型範囲 ◎表終

`容器~特能$ `block-size$d は、［ `~query容器$の`塊-軸$における，`~query容器$の`内容~box$の`~size$ ］を~queryする。 ◎ The block-size container feature queries the size of the query container’s content box in the query container’s block axis.

6.1.5. 縦横比： `aspect-ratio^d 特能

◎述 `aspect-ratio@d ◎用 `container$at ◎値 `ratio$t ◎型範囲 ◎表終

`容器~特能$ `aspect-ratio$d は、［ `容器~特能$ `width$d の値］が成す［ `容器~特能$ `height$d の値］に対する比率†を~queryする【！is defined as】。 ◎ The aspect-ratio container feature is defined as the ratio of the value of the width container feature to the value of the height container feature.

【† `範囲~文脈$においては、 ~CSSの`比率$と同様に，前者を後者で除算した結果に基づいて比較されよう。】

6.1.6. 方位： `orientation^d 特能

◎述 `orientation@d ◎用 `container$at ◎値 `portrait$vd | `landscape$vd ◎型離散的 ◎表終

`容器~特能$ `orientation$d は、［次が満たされるならば `portrait@vd ／ ~ELSE_ `landscape@vd ］になる ⇒ `容器~特能$ `height$d の値 ~GTE `容器~特能$ `width$d の値 ◎ portrait • The orientation container feature is portrait when the value of the height container feature is greater than or equal to the value of the width container feature. ◎ landscape • Otherwise orientation is landscape.

6.2. ~style容器~特能

`容器~style~query@ （ `container style query^en ）は、 `~query容器$の`算出d値$を~queryすることを許容する。それは、［個々の`~style特能$による真偽-条件］たちが成す組合nである。各 `~style特能@ （ `style-feature$t ）は、 `~query容器$の単独の特定の~propを~queryする。 `style-feature@t の構文は、次に挙げるいずれかと同じになる ⇒＃妥当な`宣言$ `CSS-SYNTAX-3$r 用のそれ／ `~supportされる~CSS~prop$／ `custom-property-name$t ◎ A container style query allows querying the computed values of the query container. It is a boolean combination of individual style features (<style-feature>) that each query a single, specific property of the query container. The syntax of a <style-feature> is either the same as for a valid declaration [CSS-SYNTAX-3], a supported CSS property, or a <custom-property-name>.

各`~style特能$による【！Its】~queryを評価した結果は、［次が満たされるならば `真^i ／ ~ELSE_ `偽^i ］になる ⇒ `~query容器$の［所与の~prop ］の`算出d値$ （それも，`~query容器$を~~基準に`算出-$される）は、所与の値に合致する ◎ Its query evaluates to true if the computed value of the given property on the query container matches the given value (which is also computed with respect to the query container), and false otherwise.

値を伴わない`~style特能$を評価した結果は、［次が満たされるならば `真^i 【／~ELSE_ `偽^i】］になる ⇒ 所与の`~prop$用の`算出d値$は，それ用の`初期~値$とは異なる ◎ A style feature without a value evaluates to true if the computed value is different from the initial value for the given property.

`容器~style~query$の中で組合された`~style特能$たちに対する真偽-［構文, 論理］は、 `~CSS特能~query$用のそれと同じである。（ `supports$at を見よ。 `css-conditional-3$r ） ◎ The boolean syntax and logic combining style features into a style query is the same as for CSS feature queries. (See @supports. [css-conditional-3])

`略式~prop$を~queryする`~style特能$を評価した結果は、［次が満たされるならば `真^i ／ ~ELSE_ `偽^i ］になる ⇒ 各`下位prop$に対し，その`算出d値$は【所与の値から導出される各~下位prop用の算出d値に】合致する ◎ Style features that query a shorthand property are true if the computed values match for each of its longhand properties, and false otherwise.

`~cascadeに依存する~keyword$ — `revert$v, `revert-layer$v など — は、 `~style特能$内の値としては妥当でなく， `容器~style~query$は `偽^i になる。 ◎ Cascade-dependent keywords, such as revert and revert-layer, are invalid as values in a style feature, and cause the container style query to be false.

注記：上に挙げたものでない，`~cascadeに依存する~keyword$ではない`~CSS全域~keyword$は、他の値と同じく，当の`~query容器$を~~基準に`算出d値$される。 ◎ Note: The remaining non-cascade-dependent CSS-wide keywords are computed with respect to the query container, the same as other values.

6.3. ~scroll状態~容器~特能

`容器~scroll状態~query@ は、 ~scroll位置に依存する状態~用に容器を~queryすることを許容する。それは、［個々の`~scroll状態~特能$による真偽-条件］たちが成す組合nである。個々の `~scroll状態~特能@ （ `scroll-state-feature$t ）は、当の`~query容器$を成す単独の特能を~queryする。 `scroll-state-feature@t の構文は、 `媒体~特能$用のそれと同じであり，［特能~名, 比較子, 値］からなる。 ◎ A container scroll-state query allows querying a container for state that depends on scroll position. It is a boolean combination of individual scroll-state features (<scroll-state-feature>) that each query a single feature of the query container. The syntax of a <scroll-state-feature> is the same as for a media feature: a feature name, a comparator, and a value.

`~scroll状態~特能$には、 `~scroll容器$の状態に合致するもの（例： `scrollable$d 特能）も，［要素のうち，その先祖`~scroll容器$の`~scrollport$の~scroll位置により影響されるもの］の状態に合致すもの（例： `snapped$d ）もある。 ◎ Scroll-state features can either match state of the scroller itself, or an element that is affected by the scroll position of an ancestor scroll container’s scrollport. An example of the former is the scrollable feature, snapped the latter.

6.3.1. ~scroll状態の更新-法

~scroll状態は、 ~layoutにおける循環依存を生じさせ得る — ~scroll状態を~queryした結果に応じて~styleが変化して，それに伴い~layoutが変化すると~scroll状態~変化へ至らせ得るので。 ◎ Scroll state may cause layout cycles since queried scroll state may cause style changes, which may lead to scroll state changes as a result of layout.

そのような循環依存を避けるため、 `~layout後の状態を~snapshotする手続き$ %手続きを次に従うように走らすとする： ◎ To avoid such layout cycles, scroll-state query containers update their current state as part of run snapshot post-layout state steps＼

%手続きは、 ~HTMLの`~event~loop処理~model$における特定の箇所たち†に限り，走らす。 ◎ which is only run at specific points in the HTML event loop processing model.

【† 一箇所とは限らず，正確な箇所も指定されていないが、少なくとも一箇所は［ `描画を更新する段＠~WAPI#update-the-rendering$の中の`文書の~scroll手続き＠~CSSOMVIEW#document-run-the-scroll-steps$を走らす段］に近いどこかになろう。】
%手続きを成す一部として、各 ( `容器~scroll状態~query$用の【！`scroll-state$v 】`~query容器$ %容器 ) に対し， %容器の現在の~scroll状態を更新する。 ◎ When asked to run snapshot post-layout state steps, update the current state of every scroll-state query container.＼
%手続きにより~snapshotされた状態は、次回に %手続きが走るまで，どの［ ~style, ~layout ］更新にも利用されることになる。 ◎ This snapshotted state will be used for any style and layout updates until the next time these steps are run.

6.3.2. 張付き位置決め： `stuck^d 特能

`容器~特能$ `stuck$d は、 `張付きに位置され$た【！`sticky$v な有位置な】容器が，所与の辺に関して［ `張付き~view矩形$の内側に居続けるよう視覚的にズラされたかどうか］を~queryする。論理-~keyword【！辺】は、当の`~query容器$ — 以下 %容器 — の［ `direction$p, `writing-mode$p ］に基づいて，物理-~keyword【！辺】へ対応付けられる。 %容器は`張付きに位置され$ていない場合，合致する値は無い。 ◎ The stuck container feature queries whether a sticky positioned container is visually shifted to stay inside the sticky view rectangle for the given edge. The logical edges map to physical based on the direction and writing-mode of the query container. None of the values match if the query container is not sticky positioned.

2 個の値に同時に合致することは、それらが異なる軸に対応する場合はアリだが，それらが同じ軸の対~辺どうしに対応する場合にはアリでない。 ◎ It is possible for two values from opposite axes to match at the same time, but not for opposite edges along the same axis.

次は合致し得る： ◎ May match:

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

次は決して合致しない： ◎ Will never match:

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

`none@vd: %容器は、どの方向へもズラされていない。 ◎ The sticky container is not shifted in any direction.
`top@vd: %容器は、上端~辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the top edge.
`right@vd: %容器は、右端~辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the right edge.
`bottom@vd: %容器は、下端~辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the bottom edge.
`left@vd: %容器は、左端~辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the left edge.
`block-start@vd: %容器は、 `塊-始端$辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the block-start edge.
`inline-start@vd: %容器は、 `行内-始端$辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the inline-start edge.
`block-end@vd: %容器は、 `塊-終端$辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the block-end edge.
`inline-end@vd: %容器は、 `行内-終端$辺の内側に居続けるようズラされた。 ◎ The sticky container is shifted to stay inside the inline-end edge.

6.3.3. ~scroll留ng： `snapped^d 特能

`容器~特能$ `snapped$d は、所与の軸において，［ `留め~target$は、その`留め容器$に`留められ$るように【当の`~query容器$ — 以下 %容器 — は、その`留め容器$である`~scroll容器$ — 以下 %~scroll容器 — に`留められ$る`留め~target$に】［なる／なり得る］かどうか］を~queryする。すなわち、 `留め~target$のうち【 `scrollsnapchange$et ではなく】 `scrollsnapchanging$et ~eventが発火されるものに合致する。 ◎ The snapped container feature queries whether a snap target is, or would be, snapped to its snap container, in the given axis. That is, it matches any snap target that the scrollsnapchanging event is fired for.

`none@vd: %容器は、【 %~scroll容器用の】`留め~target$でない。 ◎ The query container is not a snap target.
`x@vd: %容器は、 %~scroll容器用の横方向における`留め~target$である。 ◎ snapped container feature matches x if the query container is a horizontal snap target for its scroll container.
`y@vd: %容器は、 %~scroll容器用の縦方向における`留め~target$である。 ◎ snapped container feature matches y if the query container is a vertical snap target for its scroll container.
`block@vd: %容器は、 %~scroll容器用の［ %~scroll容器の`塊-軸$方向］における`留め~target$である。 ◎ snapped container feature matches block if the query container is a snap target for its scroll container. in the block direction of the snap container.
`inline@vd: %容器は、 %~scroll容器用の［ %~scroll容器の`行内-軸$方向］における`留め~target$である。 ◎ snapped container feature matches inline if the query container is a snap target for its scroll container in the inline direction of the snap container.
`both@vd: %容器は、 %~scroll容器用の［横方向かつ縦方向］における`留め~target$である。 ◎ snapped container feature matches both if the query container is a snap target for its scroll container in both directions of the snap container.

6.3.4. ~scroll可能： `scrollable^d 特能

`容器~特能$ `scrollable$d は、 `~scroll容器$を成すある内容のうち［ `~scroll可能な~overflow矩形$の一部を成す］かつ［利用者が~scrollすることにより到達-可能である］ものが，所与の方向において切取られた【~overflowした】かどうかを~queryする。すなわち、 `scrollable$d は［ `hidden$v な容器／ `~scroll不能な~overflow領域$ ］用には合致しない。 ◎ The scrollable container feature queries whether a scroll container has clipped scrollable overflow rectangle content in the given direction which is reachable through user initiated scrolling. That is, scrollable does not match for a hidden container, nor for a negative scrollable overflow region.

論理-~keyword【！値】は、当の`~query容器$ — 以下 %容器 — の［ `direction$p, `writing-mode$p ］に基づいて物理-~keyword【！値】へ対応付けられる。 %容器は`~scroll容器$でない場合，合致する値は無い。 ◎ The logical values map to physical based on the direction and writing-mode of the query container. None of the values match if the container is not a scroll container.

`none@vd: %容器には、どの方向にも`~scroll可能な~overflow$は無い。 ◎ The scroll container does not have scrollable overflow in any direction.
`top@vd: %容器には、上端~辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the top edge.
`right@vd: %容器には、右端~辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the right edge.
`bottom@vd: %容器には、下端~辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the bottom edge.
`left@vd: %容器には、右端~辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the left edge.
`block-start@vd: %容器には、 `塊-始端$辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the block-start edge.
`inline-start@vd: %容器には、 `行内-始端$辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the inline-start edge.
`block-end@vd: %容器には、 `塊-終端$辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the block-end edge.
`inline-end@vd: %容器には、 `行内-終端$辺を過ぎた`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow past the inline-end edge.
`x@vd: %容器には、横方向に`~scroll可能な~overflow$が有る。 ◎ The scroll container has horizontally scrollable overflow.
`y@vd: %容器には、縦方向に`~scroll可能な~overflow$が有る。 ◎ The scroll container has vertically scrollable overflow.
`block@vd: %容器には、 `塊-軸$方向に`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow in its block direction.
`inline@vd: %容器には、 `行内-軸$方向に`~scroll可能な~overflow$が有る。 ◎ The scroll container has scrollable overflow in its inline direction

7. 容器に相対的な長さ単位： `cqw^u, `cqh^u, `cqi^u, `cqb^u, `cqmin^u, `cqmax^u

`容器~query長さ単位@ （ `container query length unit^en ）は、 `~query容器$の寸法に相対的な長さを指定する。 ~stylesheetにて`容器~query長さ単位$を利用すれば、 ~componentをある`~query容器$から別のそれへ移動するのも容易になる。 ◎ Container query length units specify a length relative to the dimensions of a query container. Style sheets that use container query length units can more easily move components from one query container to another.

`容器~query長さ単位$は： ◎ The container query length units are:

容器~単位たちの規範的でない要約
単位	何に相対的か
`cqw^u	`~query容器$の`横幅$の 1%
`cqh^u	`~query容器$の`縦幅$の 1%
`cqi^u	`~query容器$の`行内~size$の 1%
`cqb^u	`~query容器$の`塊~size$の 1%
`cqmin^u	`cqi^u, `cqb^u のうち小さい方の値
`cqmax^u	`cqi^u, `cqb^u のうち大きい方の値

◎ Informative Summary of Container Units unit relative to cqw 1% of a query container’s width cqh 1% of a query container’s height cqi 1% of a query container’s inline size cqb 1% of a query container’s block size cqmin The smaller value of cqi or cqb cqmax The larger value of cqi or cqb

各~要素に対し， `容器~query長さ単位$は、当の単位に関連な軸（たち）に対する`容器~size~query$として評価される。各~軸に対し、 `~query容器$は，当の軸において当の`容器~size~query$を受容する先祖~容器のうち最も近いものになる。適格な`~query容器$として可用なものは無い場合、当の軸~用には`小さい表示域~size$を利用する。 ◎ For each element, container query length units are evaluated as container size queries on the relevant axis (or axes) described by the unit. The query container for each axis is the nearest ancestor container that accepts container size queries on that axis. If no eligible query container is available, then use the small viewport size for that axis.

注記：事例によっては、同じ要素~上の［ `cqi^u 単位, `cqb^u 単位］は，異なる関係にある`~query容器$に対し評価されることになる。類似に，［ `cqmin^u 単位／ `cqmax^u 単位］は、［ `cqi^u, `cqb^u ］単位が異なる`~query容器$から来ているときでも，それらの寸法のうち［小さい方／大きい方］を表現する。 ◎ Note: In some cases cqi and cqb units on the same element will evaluate in relation to different query containers. Similarly, cqmin and cqmax units represent the larger or smaller of the cqi and cqb units, even when those dimensions come from different query containers.

子~要素が継承するのは、その親に指定されたとおりの相対的な値ではなく，`算出d値$である。 ◎ Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.

作者は、 `容器~query長さ単位$に対し適切な`~query容器$が有ることを確保できる — それを［同じ `container-type$p に依拠する`容器~query$ ］の内側で適用することにより。 ~customな~fallback値は、 `容器~query$の外側で定義できる： ◎ Authors can ensure that container query length units have an appropriate query container by applying them inside a container query that relies on the same container-type. Custom fallback values can be defined outside the container query:

/* 
~fallback値は、
封込めには依拠しない
◎
The fallback value does not rely on containment
 */
h2 { font-size: 1.2em; }

@container (inline-size >= 0px) {
  /* 
`inline-size$d 容器が可用なときに限り適用する
◎
only applies when an inline-size container is available
 */
  h2 { font-size: calc(1.2em + 1cqi); }
}

8. ~API

8.1. `CSSContainerRule^I ~interface

`CSSContainerRule$I ~interfaceは、ある `container$at 規則を表現する。 ◎ The CSSContainerRule interface represents a @container rule.

[`Exposed$=Window]
interface `CSSContainerRule@I : `CSSConditionRule$I {
    readonly attribute `CSSOMString$ `containerName$m;
    readonly attribute `CSSOMString$ `containerQuery$m;
};

`CSSContainerRule$I に特有な［ `CSSConditionRule^I の `conditionText$m 取得子~手続き］は、次に従うものと定義される：

%名前 ~LET コレの `containerName$m 属性の値
%~query ~LET コレの `containerQuery$m 属性の値
~IF［ %名前 ~EQ 空~文字列］ ⇒ ~RET %~query
~RET « %名前, %~query » を~spaceで`連結する$

◎ conditionText of type CSSOMString (CSSContainerRule-specific definition for attribute on CSSConditionRule) • The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return a value as follows: •• The @container rule has an associated <container-name> ••• The result of getting the containerName and containerQuery attributes, joined by a single whitespace. •• Otherwise ••• The result of getting the containerQuery attribute.

`containerName@m 取得子~手続き ⇒ ~RET ［コレが表現する `container$at 規則に `container-name$t は指定されたならばそれを直列化した結果／ ~ELSE_ 空~文字列］ ◎ containerName of type CSSOMString • The containerName attribute, on getting, must return a value as follows: • The @container rule has an associated <container-name> •• The result of serializing that <container-name>. • Otherwise •• An empty string.

`containerQuery@m 取得子~手続きは ⇒ ~RET コレが表現する `container$at 規則に指定された `container-query$t — この結果は、［この仕様の適合t実装（［この仕様~内の `general-enclosed$t 拡張能の仕組みにより許容される将来の拡張］を実装する実装も含む）において，指定された~queryと同じ結果に評価される］よう，論理的な単純~化を伴わないとする — 言い換えれば、 ~token~streamの単純~化は許容されるが（空白~列は［省略可能であることが既知な事例では省略する／他の場合は 1 個の~spaceに~~縮約する］），論理的な単純~化（不要な括弧の除去, 評価-時の結果に基づく単純~化など）は、許容されない。 ◎ containerQuery of type CSSOMString • The containerQuery attribute, on getting, must return the <container-query> that was specified, without any logical simplifications, so that the returned query will evaluate to the same result as the specified query in any conformant implementation of this specification (including implementations that implement future extensions allowed by the <general-enclosed> extensibility mechanism in this specification). In other words, token stream simplifications are allowed (such as reducing whitespace to a single space or omitting it in cases where it is known to be optional), but logical simplifications (such as removal of unneeded parentheses, or simplification based on evaluating results) are not allowed.

容器~queryは、 `matchContainer()^m ~methodを有するべきである。これは、［ `matchMedia()$m, `MediaQueryList$I ~interface ］上で~model化されることになるが、 `Window^I ではなく `Element^I に適用される。それは、 ~layout~sizeを測定するときは `ResizeObserver＠~CSSWG/resize-observer-1/#resizeobserver$I と類似に挙動するが，追加的な容器~query構文と特能を供する。 `6205$issue ◎ Container Queries should have a matchContainer method. This will be modeled on matchMedia() and the MediaQueryList interface, but applied to Elements rather than the Window. When measuring layout sizes, it behaves Similar to resizeObserver, but it provides the additional Container Query syntax and features. [Issue #6205]

~securityの考慮点

この文書に対し提起された~securityの課題は無い。 ◎ No security issues have been raised against this document

~privacyの考慮点

［ `font-tech^f, `font-format^f ］関数は、利用者の~softwareについての情報を供し得る — その~versionや［ある種の特能を可能化するか不能化する既定でない設定の下で稼働しているかどうか］など。この情報は： ◎ The font-tech() and font-format() functions may provide information about the user’s software such as its version and whether it is running with non-default settings that enable or disable certain features.

他の~APIを通しても決定され得る。しかしながら、この仕様における特能は，この情報が~Web上に公開される仕方の一つを成す。 ◎ This information can also be determined through other APIs. However, the features in this specification are one of the ways this information is exposed on the Web.
集成した上で利用者の`指紋収集＠https://www.w3.org/2001/tag/doc/unsanctioned-tracking/$の正確度を改善するためにも利用され得る。 ◎ This information can also, in aggregate, be used to improve the accuracy of fingerprinting of the user.

変更点

`2024 年 7月 23日作業草案＠~TR/2021/WD-css-conditional-5-20240723/$ からの変更点 ◎ Changes since the Working Draft of 23 July 2024: ［ `stuck$d, `snapped$d, `scrollable$d ］特能~用の値として【！scroll-state() features】~keyword `none^v を追加した。（ `pull #10874＠https://github.com/w3c/csswg-drafts/pull/10874$ ） ◎ Add none-keywords to scroll-state() features (#10874); `container-type$p 用の値として `scroll-state$v を追加した。［ `stuck$d, `snapped$d, `scrollable$d ］特能~用の~queryとして `scroll-state^f を追加した。（ `6402$issue, `10784$issue, `10796$issue ） ◎ Added container-type:scroll-state, and scroll-state() queries for stuck, snapped, and scrollable features (#6402, #10784, #10796); 例を正した（~~存在しない `container-type:style^p を利用していた）。 ◎ Corrected example (there is no container-type:style); `容器~query$は`平坦~tree$を利用するものと指定した。（ `5984＠~CSSissue/5984#issuecomment-2112977366$issue ） ◎ Specified that container queries use the flat tree (#5984)
`2021 年 12月 21日最初の公な作業草案＠~TR/2021/WD-css-conditional-5-20211221/$ からの変更点 ◎ Changes since the First Public Working Draft of 21 December 2021: `容器~query$を `CSS-CONTAIN-3$r からこの仕様へ移動した。（ `10433$issue ） ◎ Moved container queries to this specification, from CSS Contain 3 (#10433); 重複していた［ `font-format$t, `font-tech$t ］の定義を除去して， `CSS-FONTS-4$r から取込むようにした。（ `8110$issue ） ◎ Imported the definitions of <font-format> and <font-tech> from CSS Fonts 4, rather than duplicating them in this specification (#8110); ［構文解析~algo, ~block生成規則］に新たな名前を利用するよう更新した。 ◎ Updated to use the new parsing algorithm names and block production names; `font-format^t の文法~内の誤記を正した。 ◎ Corrected a typo in the grammar of <font-format>; ［ `font-tech^t, `font-format^t ］生成規則~内の余分な~spaceを正した。（ `7369$issue ） ◎ Corrected extra spaces in the font-tech and font-format productions (#7369 )
~level 4 からの追加 ◎ Additions since Level 4: ［ `when$at, `else$at ］を追加した。 ◎ Added @when and @else.; `~supports~query$を［ `font-tech^f, `font-format^f ］を介する~font能力を表出するよう拡張した。 ◎ Extended supports queries to express font capabilities via font-tech() and font-format().; `容器~query$を `CSS-CONTAIN-3$r からこの仕様へ移動した。（この特能の発展に関するさらなる情報は `CSS-CONTAIN-3$r の `§ 変更点＠~CSSWG/css-contain-3/#changes$も見よ。） ◎ Moved Container Queries from [CSS-CONTAIN-3] to this specification. (See also the CSS Containment 3 § A Changes for more information on the evolution of this feature.)

謝辞

［ `when$at, `else$at ］規則は、 `Tab Atkins^en 氏による提案に基づく。 ◎ The @when and @else rules are based on a proposal by Tab Atkins.

次に挙げる方々からの~commentやこれまでの作業に，および，この仕様に貢献された他の多くの方々に。 ◎

Comments and previous work from 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, and many others have contributed to this specification.