1. 序論
これは、 `~level 2$ に対する差分~仕様であり, 現時点では探求段階な作業草案である。 実装者は、 `~level 2$ を参照として利用されたし。 `~level 2$ が勧告候補に達したなら、 その~textは,この草案の中に併合されることになる。 ◎ This is a diff spec over CSS Containment Level 2. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 2 as a reference. We will merge the Level 2 text into this draft once it reaches CR.
1.1. ~module間の相互作用
この文書は、 これまでの仕様には無かった新たな特能を定義する。 加えて、 安定的になったときは, `CSS-CONTAIN-1$r 【 `CSS-CONTAIN-2$r 】 を置換して それに取って代わることを目指す。 ◎ This document defines new features not present in earlier specifications. In addition, it aims to replace and supersede [CSS-CONTAIN-1] once stable.
1.2. 値~定義
【 この節の内容は `~CSS日本語訳 共通~page@~CSScommon#values$に移譲。 】
2. 強い封込め: `contain^p ~prop
`~level 2$ の `§ 強い封込め@~CSSCONTAIN#contain-property$ をここに併合する。 ◎ CSS Containment 2 § 2 Strong Containment: the contain property
◎名 `contain$p ◎値 `none^v | `strict^v | `content^v | [ [`size^v | `inline-size^v] || `layout^v || `style^v || `paint^v ] ◎表終- `~inline-size0@v
- この値は、 当の要素~用に`行内-~size封込め$をオンにする。 これは、 要素の`首要~box$の`行内~size$が要素の内容に直に依存することを防止する。 ◎ This value turns on inline-size containment for the element. This prevents the inline-size of its principal box from directly depending on its contents.
- 注記: それでも、 間接的な依存関係は あり得る — `§ 行内-~size封込め@#containment-inline-size$ を見よ。 ◎ Note: There can still be indirect dependencies, see § 3.1 Inline-Size Containment.
3. 封込めの種別
`~level 2$ の `§ 封込めの種別@~CSSCONTAIN#containment-types$ をここに併合する。 ◎ CSS Containment 2 § 3 Types of Containment
3.1. 行内-~size封込め
要素に `行内-~size封込め@ ( `inline-size containment^en )を与えることは、 要素の`首要~box$の`行内-軸$の~sizingに`~size封込め$を適用する。 このことは、[ `首要~box$の`行内-軸$`内在的~size$は,要素の内容は無かったかのように決定される ]ことを意味する。 しかしながら、 内容は,当の~boxの`塊-軸$における`内在的~size$には通例通り影響iし続ける — 当の~boxを`塊-軸$において`断片化-$することは、 通常に許容される。 ◎ Giving an element inline-size containment applies size containment to the inline-axis sizing of its principal box. This means the inline-axis intrinsic sizes of the principal box are determined as if the element had no content. However, content continues to impact the box’s block-axis intrinsic sizes as usual, and the box is allowed to fragment normally in the block axis.
注記: ~boxの`塊-軸$における`内在的~size$は、 当の~boxの`行内~size$に影響する仕方で,親`整形~文脈$における~layoutに影響iし得る事例もある(例:ある先祖~要素にて,【塊-軸~方向の】~scrollbarを誘発することにより) — それに伴い、 当の~boxの`行内~size$は,自身の内容に依存するようになる。 `行内~size$における この変化による結果,`塊~size$が変化する場合、 その変化は,親~整形~文脈に更に影響iし得るよう~loopすることになるが、 それまでの問題になり得る~layoutへ復帰することはない。 ◎ Note: In some cases, a box’s block-axis intrinsic sizes can impact layout in the parent formatting context in ways that affect the box’s inline size (e.g. by triggering scrollbars on an ancestor element), creating a dependency of the box’s inline size on its own content. If this changed inline size results in a different block size, that new block size can loop into further impacting the parent formatting context, but not in a way that reverts it to the previously-problematic layout.
例えば,~scrollbarが導入された場合、 その帰結として[ `塊~size$が~scrollbarを必要としないほど十分に小さくなった場合 ]でも†,当の~scrollbarは除去されない。 あるいは、[ ~boxの論理-縦幅が より低く配置された浮動体に衝突して, ~boxが もっと可用な行内~空間がある所まで下げられ、 その結果,論理-縦幅が衝突しなくなるほど十分に短くなった場合 ]でも 【下の例を見よ】、 それまでの問題になり得る~sizeと位置まで戻るよう移動されることは無い。 ◎ For example, if scrollbars were introduced, they are not then removed, even if the consequent block size is small enough to not need them; or if a box’s logical height collides with a lower-placed float and is cleared down to where it also has more available inline space and thus becomes short enough to not have collided, it is not them moved back up to its previous problematic size and position.
【† 通例的には,~scrollbarにより行内~sizeが減れば塊~sizeは自動的に増えることになるが、 ここでは, `aspect-ratio$p により両~sizeが相関していることが前提にあると思われる。 】
したがって、 `行内-~size封込め$は[ 当の~boxの内容が, 自身の`行内-軸$における`内在的~size$を通して自身の`行内~size$に直に影響する ]ことは防止するが,それでも、 当の~boxの`行内~size$は,[ 自身の`塊~size$に対する効果 ]により自身の内容に間接的に依存し得る。 ◎ Thus, although inline-size containment prevents the box’s content from directly affecting its inline size through its inline-axis intrinsic sizes, its inline size can still indirectly depend on its contents by their effect on its block size.
要素の行内~sizeと塊~sizeの関係性は、 一般に,予測-不能であり単調ではない — 行内~sizeが変化するに伴い、 塊~sizeを任意に上下へズラす能力がある。 無限な循環は、[ ~layoutが,それまでの(問題になり得ることが既知な)状態へは復帰しない ]ことを — 拘束の素朴な分析が,そのようなものを許容することになる場合でも — 確保することにより防止される。 言い換えれば、 ~layoutは,常に “~~前進する” 。 現在の~CSS~layout仕様は,そのような規則を組入れるものと予見されているが、 そうでない場合,誤りが正されるよう`~CSS~WGへ伝えられたし@https://github.com/w3c/csswg-drafts/issues$。 ◎ In general, the relationship between an element’s inline size and it’s block size is unpredictable and non-monotonic, with the block size capable of shifting up and down arbitrarily as the inline size is changed. Infinite cycles are prevented by ensuring that layout does not revert to a previous (known-problematic) state, even if a naive analysis of the constraints would allow for such; in other words, layout always “moves forward”. We believe that current CSS layout specifications incorporate such rules, but to the extent that they don’t, please inform the CSSWG so that these errors can be corrected.
次の例を考える。 そこでは、 浮動体の配置は,塊~sizeの行内~sizeに依存するようになる: ◎ Consider this example, where float placement creates a dependency of block sizes on inline sizes:
<section style="width: 200px; border: solid; display: flow-root;"> <!-- 可用な空間に影響iする浮動された要素たち ◎ floated elements that impact the available space --> <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> <!-- 文脈を決定している親~layout ◎ parent layout, determining context --> <article style="border: solid orangered; display: flow-root; min-width: min-content"> <div style="background: orange; aspect-ratio: 1/1;"> Article </div> </article> </section>
塊~layout~algoは、 まず,浮動体たちを配置する。 最初の 2 個は容器の[ 左上隅, 右上隅 ]に居座る。 3 個目は、 それらの合間に収まるには幅が広過ぎるので下へ押出される。 ◎ The block layout algorithm will first place the floating boxes, with the first two sitting in the left and right corners of the container, and the third, being too wide to fit between, being pushed below them.
後続している `article^e — 以下 %A と記す — は、 それから~lay-outされることになる。 %A の `display$p は `flow-root^v なので、 どの浮動体とも交差し得ない。 したがって、 %A を~sizeして位置する方法を解明するときには,それらを織り込む必要がある。 ◎ The following article will then be laid out. Because it is display: flow-root, it cannot intersect any floats, and thus must take them into account when figuring out how to size and position itself.
~layout~engineは、 まず, %A を当の容器の上端に接合するように配置することを試みる。 残された — したがって結果の — 横幅は `100px^v であり、 %A の`最小-内容~size$を収容するには~~十分な幅がある。 しかしながら, %A の子の `aspect-ratio$p に因り %A の高さも `100px^v になり、 80px 下にある 3 個目の浮動体に交差するので,この~layout機会は破棄される。 ◎ The layout engine first attempts to place the article flush with the top of the container, resulting a 100px width, plenty wide enough to accommodate its min-content size. However, due to the aspect-ratio of its child, this would cause the article to be 100px tall as well, which would intersect the third float 80px below, so this layout opportunity is discarded.
次に、 %A を[ 2 個目の浮動体の下端と 3 個目の浮動体の右端 ]に接合するよう位置することを試みる。 しかしながら、 3 個目の浮動体の側方にある狭い `40px^v 幅の空間~内に %A 【の内容 "Article" 】が収まるには, %A の `min-width$p は大き過ぎた — その結果、 %A は それよりさらに下へズラされ, 3 個の浮動体~すべてより下に 200px の正方形を形成する。 ◎ It then attempts to position the article flush with the top of the third float, in the narrow 40px-wide space to its right. However, since the article’s min-width makes it too large to fit in the 40px-wide space beside the third float, it shifts below that one as well, forming a 200px square below all the floated boxes.
%A から `min-width$p が除去されるか[ %A または その~header【 "Article" 】 ]に`行内-~size封込め$が追加された場合 (後者は、 `min-width^p に指定された `min-content^v を 0 に解決させる)、 %A は 3 個目の浮動体の隣に 40px 正方形として収まることになる (場合によっては、 その内容を成す一部は~overflowする)。 ◎ If the min-width is removed from the article, or if inline-size containment is added to either the article or header (causing min-width: min-content to resolve to zero), then the article will fit as a 40px square next to the final floated div (possibly with some of its content overflowing).
この時点で, %A の横幅と縦幅(いずれも `40px^v )は[ 最初に考慮した当の容器の上端に接合する空間 ]内にも`収まるようになる^emが、 %A がそのときの位置へ戻されることはない — ~layout~engineは、 この位置による結果が妥当でない~layoutになることをすでに知っているので。 ◎ At this point, the width and height of the article (40px each) would fit back in the first considered space, flush with the top of the container. However, the box is not returned to the previous position, because the layout engine knows already that this position would result in an invalid layout.
次に挙げるいずれかが満たされる場合、 要素に`行内-~size封込め$を与えても,効果は無い: ◎ Giving an element inline-size containment has no effect if any of the following are true:
- 要素は`首要~box$を生成しない (要素の `display$p が[ `contents^v / `none^v ]をとる事例など) ◎ if the element does not generate a principal box (as is the case with display: contents or display: none)
- 要素の`内縁~表示~型$は `table$v ◎ if its inner display type is table
- 要素の`首要~box$は、 次に挙げるいずれかである ⇒# `内部~table~box$/ `内部~ruby~box$/ `行内~level$の~boxのうち`不可分な行内$でないもの ◎ if its principal box is an internal table box ◎ if its principal box is an internal ruby box or a non-atomic inline-level box
4. 容器~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容器$になる。 さらには、[ `container-type$p ~prop(または `container$p `略式~prop$)を利用して,追加的な~query種別を指定する ]ことにより,`容器~size~query$用の`~query容器$も確立し得る。 `~query容器$の`~shadowも含めた子孫$に適用されている~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 by specifying the additional query types using the container-type property (or the container shorthand). Style rules applying to a query container’s shadow-including 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容器$は,[ その`最終的な出自の要素$の`~shadowも含めた広義-先祖$ ]により確立され得る。 ◎ For selectors with pseudo elements, query containers can be established by the shadow-including inclusive ancestors of the ultimate originating element.
注記: 従って: ◎ It follows that:
【 以下に現れる`出自の要素$は、 実際には`最終的な出自の要素$を意味することになる。 】
- 疑似要素~自体は、 ~query容器にはなり得ない。 ◎ Pseudo elements themselves can not be query containers
- [ `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
- 【同じ`疑似-複合~選択子$内に】 疑似要素が複数あっても、 疑似要素は他の疑似要素~用の~query容器になることを許容しない。 例: `part()$pe 選択子は、 `host::part()::before^css 内の `before^pe 用には,~query容器になり得ない — `host^e は、そうなり得るが。 類似に, `before^pe は、 `div::before::marker^css 内の `marker^pe 用の~query容器にはなり得ない。 ◎ Multiple pseudo elements do not allow pseudo elements to be query containers for other pseudo elements. E.g., the host, but not the ::part(), can be the query container for ::before in host::part()::before. Similarly, ::before can not be the query container for the ::marker in div::before::marker
- `slotted()$pe 選択子は、 ~slot自身も含めて,`~shadow~tree$の内側にある容器たちを~queryできる。 ◎ ::slotted() selectors can query containers inside the shadow tree, including the slot itself
- `part()$pe 選択子は、 出自の~host【その出自の要素である`~shadow~host$】を~queryできるが, 【それが~hostしている】`~shadow~tree$の内側にある内部~query容器を~queryできない。 ◎ ::part() selectors can query its originating host, but not internal 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$の【ある~slotにアテガわれることになる】子を~styleするための `slotted()$pe 選択子は、 当の`~shadow~tree$内の容器を~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>
4.1. ~query容器の作成-法: `container-type^p ~prop
◎名 `container-type@p ◎値 `normal^v | `size^v | `inline-size^v ◎初 `normal^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定された~keyword ◎順 文法に従う ◎ア ~animate不可 ◎表終`container-type$p ~propは、 明示的な封込めを要求する`容器~query$(`容器~size~query$など)の目的において, 要素を `~query容器@ ( `query container^en )として確立する — それは、[ 要素の子孫を~styleしている`~style規則$ ]が[ 要素の~sizingと~layoutを成す様々な側面 ]を~queryして[ その結果に則って応答する ]ことを許容する。 ◎ The container-type property establishes the element as a query container for the purpose of container queries that require explicit containment (such as container size queries), allowing style rules styling its descendants to query various aspects of its sizing and layout, and respond accordingly.
他が注記されない限り、 すべての要素は,[ 明示的な`封込め$を要求しない`容器~query$ — `容器~style~query$など — の目的 ]においては`~query容器$になる — `container-type$p に何が指定されようが。 ◎ Unless otherwise noted, all elements are query containers for the purpose of container queries that do not require explicit containment (such as container style queries), regardless of the specified container-type.
各種~値の意味は: ◎ Values have the following meanings:
- `size@v
- `容器~size~query$用に`~query容器$を確立する — [ `行内-軸$, `塊-軸$ ]どちらに対しても。 `首要~box$に[ `~layout封込め$, `~style封込め$, `~size封込め$ ]を適用する。 ◎ Establishes a query container for container size queries on both the inline and block axis. Applies layout containment, style containment, and size containment to the principal box.
- `inline-size@v
- 当の容器の自前の`行内-軸$に対し,`容器~size~query$用に`~query容器$を確立する。 要素の`首要~box$に[ `~layout封込め$, `~style封込め$, `行内-~size封込め$ ]を適用する。 ◎ Establishes a query container for container size queries on the container’s own inline axis. Applies layout containment, style containment, and inline-size containment to the principal box.
- `normal@v
- 要素は、 `容器~size~query$用の`~query容器$にはならないが, `容器~style~query$用の`~query容器$であり続ける。 ◎ The element is not a query container for any container size queries, but remains a query container for container style queries.
例えば,作者は、 容器に応答-可能な~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値$に相対的になる。 ◎ 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:
section { container-type: style; } @container style(--cards: small) { article { border: thin solid silver; border-radius: 0.5em; padding: 1em; } }
4.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; } }
4.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; }
4.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 ) | `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
~keyword[ `none$v, `and^v, `not$v, `or^v ]は、 上の `custom-ident$t からは除外される。 ◎ 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 optional <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 になる。 ◎ 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.
`容器~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 条件を満たす
複数の条件を~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 条件を満たす 【なぜ,ここだけが他の例と違って “最も近い” を伴うのか不明。】
複数に【複数の `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 条件を満たす
複数の容器を~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 条件を満たす先祖~容器が在る
大域的な名前を定義している`~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.
4.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; }
`容器~query長さ単位$に~~起因する`算出d値$における変化も, `~style変化~event$の一部を成すモノトスル。 ◎ Changes in computed values caused by container query length units must also be part of a style change event.
5. 容器~特能
`容器~特能@ ( `container feature^en )は、 `~query容器$を成す特有な側面を~queryする。 ◎ A container feature queries a specific aspect of a query container.
5.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する
`容器~query$を成す各~条件~内の[ `相対~長さ単位$(`容器~query長さ単位$を含む)/ `~custom~prop$【を参照する `var$f 】 ]は、 当の`~query容器$における[ 当の単位を伴う値/当の~prop ]の`算出d値$に基づいて評価される。 ◎ Relative length units (including container query length units) and custom properties in container query conditions are evaluated based on the the computed values of the query container.
注記: これは、 `媒体~query$内の相対~単位に対する取扱いとは異なる。 ◎ Note: This is different from the handling of relative units in media queries.
注記: `~custom~prop$による代用の結果が当の`~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.
【 この代用は、 ~propの値の中で利用された `var^f に対する`代用@~CSSVAR#substitute-a-var$と同様に解決される。 】
例えば, `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.
5.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.
5.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.
5.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.
5.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.
5.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の`比率$と同様に,前者を後者で除算した結果に基づいて比較されよう。 】
5.1.6. 方位: `orientation^d 特能
◎述 `orientation@d ◎用 `container$at ◎値 `portrait^v | `landscape^v ◎型 離散的 ◎表終`容器~特能$ `orientation$d は、[ 次が満たされるならば `portrait@v / ~ELSE_ `landscape@v ]になる ⇒ `容器~特能$ `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.
5.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. 容器に相対的な長さ単位: `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 のうち大きい方の値 |
各~要素に対し, `容器~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); } }
7. ~API
7.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で`連結する$
容器~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]
8. 要素~内容のまるごと抑止-法: `content-visibility^p ~prop
◎名 `content-visibility@p ◎値 `visible^v | `auto^v | `hidden^v ◎初 `visible^v ◎適 `~size封込め$を適用できる要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア § `content-visibility^p の~animate法と補間-法 を見よ ◎表終`~level 2$ の `§ 要素~内容のまるごと抑止-法@~CSSCONTAIN#content-visibility$ をここに併合する。 ◎ CSS Containment 2 § 4 Suppressing An Element’s Contents Entirely: the content-visibility property
8.1. `content-visibility^p の~animate法と補間-法
`content-visibility$p ~propの`~animation型$は、 一般には`離散的$になる。 しかしながら, `visibility$p の補間と類似に ( `WEB-ANIMATIONS-1$r § `visibility^p の~animation を見よ)、 値 `hidden$v と他の `content-visibility^p 用の値の補間においては,[ 0 ~LT %p ~LT 1 ]を満たす %p 値は `hidden$v でない方の値に対応付けられる。 ◎ In general, the content-visibility property’s animation type is discrete. However, similar to interpolation of visibility (see Web Animations § Animation of visibility), during interpolation between hidden and any other content-visibility value, p values between 0 and 1 map to the non-hidden value.
9. ~privacyの考慮点
`~level 2$ の `§ ~privacyの考慮点@~CSSCONTAIN#privacy$ をここに併合する。 ◎ CSS Containment 2 § 5 Privacy Considerations
10. ~securityの考慮点
`~level 2$ の `§ ~securityの考慮点@~CSSCONTAIN#security$ をここに併合する。 ◎ CSS Containment 2 § 6 Security Considerations
変更点
◎非規範的- `2022年 8月 18日 作業草案@~TR/2022/WD-css-contain-3-20220818/$ からの有意な変更点 ◎ Changes since the 18 August 2022 Working Draft ◎ Significant changes since the 18 August 2022 Working Draft include:
- 直列化~順序を明確化するするため、 `contain$p 用の値すべてを~listした。 ( `8600$issue ) ◎ List all values of contain in order to clarify serialization order (Issue 8600)
- `containerName$m, `containerQuery$m 属性を追加した。 ( `7033$issue ) ◎ Add the containerName and containerQuery attributes. (Issue 7033)
- `container-type$p 構文~内の誤記を正して, `normal$v は他の値と組合できないことを明確化した。 ( `7669$issue ) ◎ Correct typo in container-type syntax, to clarify that normal cannot be combined with other values. (Issue 7669)
- `content-visibility$p ~propを~animate可能にした。 ( `8627$issue ) ◎ Make the content-visibility property animatable. (Issue 8627)
- `容器~size~query$において `var$f 参照を許容した。 ( `8088$issue ) ◎ Allow var() references in container size queries. (Issue 8088)
- 複数の容器と照合するためとして, ~commaで分離された `container-condition$t を許容した。 ( `7551$issue ) ◎ Allow comma-separated <container-condition>s to match different containers. (Issue 7551)
- `2021年 12月 21日 最初の公な作業草案@~TR/2021/WD-css-contain-3-20211221/$ からの有意な変更点 ◎ Changes since the 21 December 2021 First Public Working Draft ◎ Significant changes since the 21 December 2021 First Public Working Draft include:
- `container-name$p の算出d値が重複な識別子を含むことを許容した。 ( `7181$issue ) ◎ Allow the computed value of container-name to include duplicate identifiers. (Issue 7181)
- `container$p 略式~内の `container-name$tp は、 要求されるものとした。 ( `7142$issue ) ◎ Make the <'container-name'> in the container shorthand required. (Issue 7142)
- `容器~style~query$内の`略式~prop$の取扱いを明確化した。 ( `7095$issue ) ◎ Clarify handling of shorthand properties in container style queries. (Issue 7095)
- `~cascadeに依存する~keyword$は、 `~style特能$内の値としては許容されず, 当の`容器~style~query$を `偽^i に評価させるようにした。 ( `7080$issue ) ◎ Cascade-dependent keywords are not allowed as values in a style feature, and cause the container style query to be false. (Issue 7080)
- `container-type$p の初期~値を `normal$v に変更した — それは、 要素を`~style特能$用の容器として確立する。 ( `6393$issue, `7066$issue, `7402$issue ) ◎ Change the initial value of container-type to be normal, which establishes elements as containers for style features. (Issue 6393, Issue 7066, Issue 7402)
- `container-type$p から `block-size^v 値を除去した — 単-軸な塊~sizeの封込めは、 現時点ではアリではないので。 ( `1031$issue ) ◎ Remove the block-size value from container-type, since single-axis block-size containment is not currently possible. (Issue 1031)
- `container-name$p 構文から `string$t ~optionを除去した。 容器~名は、 `custom-ident$t でなければならないものとした。 ( `6405$issue ) ◎ Remove the <string> option from the container-name syntax. Container names must be <custom-ident>s. (Issue 6405)
- `container$p 略式~propにおける[ `container-name$tp と `container-type$tp ]の順序を逆にして,どちらも省略可能とした。 ( `6393$issue ) ◎ Reverse the order of <'container-name'> and <'container-type'> in the container shorthand property, with both being optional. (Issue 6393)
- 前方-互換性を得るため、 `container-condition$t 内に `general-enclosed$t 構文を許容した。 ( `6396$issue ) ◎ Allow <general-enclosed> syntax in <container-condition>s, for the sake of forward compatibility. (Issue 6396)
- `size-feature$t ~queryから~size関数~構文を除去した ( `6870$issue ) ◎ Remove the size function syntax from <size-feature> queries. (Issue 6870)
- `~query容器$の選定~処理nを必要yな `container-type$p を織り込むよう更新して, 明示的な種別~選定~用の構文を除去した。 ( `6644$issue ) ◎ Update the query container selection process to account for necessary container-types, and removed the explicit type-selection syntax. (Issue 6644)
- 先送りされていた状態~query特能を除去した。 ( `6402$issue ) ◎ Remove state query features, which have been deferred. (Issue 6402)
- 疑似要素と~shadow~DOM周りの容器~選定を明確化した。 ( `5984$issue, `6711$issue ) ◎ Clarify container selection around pseudo-elements and the shadow-DOM. (Issue 5984 and Issue 6711)
- `~level 2$ からの変更点 ◎ Changes from CSS Containment Level 2
- `行内-~size封込め$を導入した。 ◎ Introduces inline-size containment.
- `容器~query$用に必要な各種[ 用語, ~prop, 単位, ~at-規則 ]を定義した。 ◎ Defines the terms, properties, units, and at-rule needed for Container Queries
`~level 2$ の `§ 変更点@~CSSCONTAIN#changes$ をここに併合する。 ◎ CSS Containment 2 § A Changes
謝辞
次に挙げる方々からの~commentや これまでの作業に, および,この仕様に貢献された他の多くの方々に。 ◎