1. 序論
~websiteの頁を効率的に具現化することは、~UAが,頁の[ どの部分が,表示されているか / どの部分が,現在~表示されている区域に影響し得るか / どの部分を,無視できるか ]について,検出できることに依拠する。 ◎ Efficiently rendering a website relies on the User Agent being able to detect what parts of the page are being displayed, which parts might affect the currently-displayed section, and what can be ignored.
[[ 所与の部分木が 頁の残りから独立である ]ことを,何らかの方式で推測する ]ような,様々な経験則があるが、それらは壊易く,頁に対する何気ない変更でも[ 経験則を不作為に失敗0させ,遅い~modeに嵌まる ]ことがある。 経験的な方式で検出するのが 困難あるいは不可能なため,隔離した方が良くなるものは、他にも多くある。 ◎ There are various heuristics that can be used to guess when a given sub-tree is independent of the rest of the page in some manner, but they’re fragile, so innocuous changes to a page may inadvertently make it flunk the heuristics and fall into a slow mode. There are also many things that would be good to isolate which are difficult or impossible to detect in a heuristic manner.
この種の問題を軽減するため、この仕様は、【作者が】部分木を頁の残りから強く隔離しつつ, 【~UAが】それを予測できるようにするための, `contain$p ~propを定義する。 ◎ To alleviate these problems and allow strong, predictable isolation of a subtree from the rest of the page, this specification defines a contain property.
2. 強い封込め: `contain^p ~prop
◎名 `contain@p ◎値 `none$v | `strict$v | `content$v | [ `size$v || `layout$v || `style$v || `paint$v ] ◎初 `none^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア ~animate不可 ◎表終`contain$p ~propにより、作者は,[ 要素とその内容が,文書~木の残りから可能な限り 独立である ]ことを指示できるようになる。 これにより、~UAは,[ 頁を適正に描画するときに,格段に強力な最適化を活用できる ]ようになる一方で、作者は,[ 何気ない変更に因り,自身の頁が不意に遅い処理0に嵌まらない確証を得られる ]ようになる。 ◎ The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows user agents to utilize much stronger optimizations when rendering a page using contain properly, and allows authors to be confident that their page won’t accidentally fall into a slow code path due to an innocuous change.
~UAには、視覚的でないものも含む すべての媒体~上で,この~propを~supportすることが期待される。 ◎ User Agents are expected to support this property on all media, including non-visual ones.
- `none@v
- この値は、この~propの効果が及ばないようにする — 要素には封込め効果を適用せず,通常通りに描画することを指示する。 ◎ This value indicates that the property has no effect. The element renders as normal, with no containment effects applied.
- `strict@v
-
この値は、要素に対し,すべての形の`封込め$を有効にする。
言い換えれば、
`contain$p: `size$v `layout$v `style$v `paint$v;
と同じく,[ その内容は、[ 要素~境界外の,頁の残り ]には,効果は及ばない ]ことが保証されるように挙動する。 ◎ This value turns on all forms of containment for the element. In other words, it behaves the same as contain: size layout style paint;, so that its contents are guaranteed to have no effect on the rest of the page outside the element’s bounds. - `content@v
-
この値は、要素に対する`~sizeの封込め$を除く,すべての形の`封込め$を有効にする。
言い換えれば、
`contain$p: `layout$v `style$v `paint$v;
と同じに挙動する。 ◎ This value turns on all forms of containment except size containment for the element. In other words, it behaves the same as contain: layout style paint;. - 注記:
`contain$p: `content$v
は、適度に広く “安全に” 適用される — 実施におけるその効果は相応に小さなものであり、ほとんどの内容は,その制約に抵触しない。 しかしながら,`~sizeの封込め$は適用しないので、要素は依然として その内容の~sizeに呼応し,欲されるものより先祖まで遡って,~layoutを無効化させる可能性もある。 可能なときは、封込めをできるだけ得たければ,`contain$p: `strict$v
を利用すること。 ◎ Note: contain: content is reasonably "safe" to apply widely; its effects are fairly minor in practice, and most content won’t run afoul of its restrictions. However, because it doesn’t apply size containment, the element can still respond to the size of its contents, which can cause layout-invalidation to percolate further up the tree than desired. Use contain: strict when possible, to gain as much containment as you can. size - `size@v
- この値は、要素に対し,`~sizeの封込め$を有効にする。 封込中の要素は、その子孫を精査する必要なく,~lay-outできるようになる。 ◎ The value turns on size containment for the element. This ensures that the containing element can be laid out without needing to examine its descendants.
- `layout@v
- この値は、要素に対し,`~layoutの封込め$を~~有効にする。 ~layoutの目的においては、封込中の要素の内外の~layoutが互いに影響し合うことがないように,要素を不透明にすることを確保する。 ◎ This value turns on layout containment for the element. This ensures that the containing element is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.
- `style@v
- この値は、要素に対し,`~styleの封込め$を~~有効にする。 これは、[ 要素とその子孫の他にも効果を及ぼし得るような~prop ]による効果が,封込中の要素から外へ~~波及しないことを確保する。 ◎ This value turns on style containment for the element. This ensures that, for properties which can have effects on more than just an element and its descendants, those effects don’t escape the containing element.
- `paint@v
- この値は、要素に対し,`塗りの封込め$を~~有効にする。 これは、[ 要素が~screen外にある, あるいは可視でない場合には,その子孫も可視にならない ]ことが保証されるように,[ 封込中の要素の子孫は,その境界外まで表示されない ]ことを確保する。 ◎ This value turns on paint containment for the element. This ensures that the descendants of the containing element don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.
`contain$p は、頁~上にて広範に利用されるとき有用になる。 特に、頁が[ すべてが互いに独立な,沢山の “~widget” ]を包含するようなとき。 ◎ contain is useful when used widely on a page, particularly when a page contains a lot of "widgets" which are all independent.
例えば、ある~SNSの~markupが,次の様になっているとする: ◎ For example, assume a micropost social network had markup something like this:
<body> <aside class='sidebar'>...</aside> <article> <section> ちょっ何この犬(笑): images.example.com/jsK3jkl </section> <section> 例のハムサンド。美味だった。 </section> <section> そんな人にはこれを言いたい。 </section> … </article> </body>
~site上では,おそらく 沢山の ~messageが表示されるであろうが、それぞれは独立であり,~site上の他のものに影響しないとする。 そのような場合、そのことを~UAへ伝えるように,それぞれに対し `contain$p: `content$v を与えることができ、~screen外にある~messageたちに対する沢山の~~計算を省力化して,頁を最適化できる。 各~messageの~sizeが事前に既知であれば、更なる制約を伝えるために, `contain$p: `strict$v を適用できる。 ◎ There are probably a lot of messages displayed on the site, but each is independent and won’t affect anything else on the site. As such, each can be marked with contain: content to communicate this to the user agent, so it can optimize the page and skip a lot of computation for messages that are off-screen. If the size of each message is known ahead of time, contain: strict can be applied to communicate further restrictions.
3. 封込めの種別
`封込め@ ( `containment^en )が,[ 要素の子孫が頁の残りに及ぼし得る効果 ]を制約できる対象には、種々のものがある。 `封込め$は,変化-が影響し得る文書の~~範囲を制限するので、~UAによる格段に強力な最適化を可能化し,作者も 自身の頁を機能単位の外で構成するのが~~容易くなる。 ◎ There are several varieties of containment that an element can be subject to, restricting the effects that its descendants can have on the rest of the page in various ways. Containment enables much more powerful optimizations by user agents, and helps authors compose their page out of functional units, as it limits how widely a given change can affect a document.
新たな~propや仕組みを導入している仕様の策定者は、[ 様々な種別の封込めが、導入しているものに影響するのかどうか, どう影響するか ]について考慮した上で、ここに述べていない効果があれば,仕様~内に含める必要がある。 ◎ Specification authors introducing new properties or mechanisms need to consider whether and how the various types of containment affect what they are introducing, and include in their specification any effect not described here.
3.1. ~sizeの封込め
`~sizeの封込め$による効果は、[ `主要~box$を生成しない要素( `display$p が `contents^v や `none^v にされている事例など)/ `table$v 要素 / `内部~table要素$ / `内部~ruby要素$ / `主要~box$は`可分な行内~box$になる要素 ]に対しては,ない。 他の要素に対する `~sizeの封込め@ には、次の効果がある: ◎ If the element does not generate a principal box (as is the case with display: contents or display: none), or if the element is a table, or if the element is an internal table element, or if the element is an internal ruby element, or if the element’s principal box is a non-atomic inline-level box, size containment has no effect. Otherwise, giving an element size containment has the following effects:
-
封込中の要素を~lay-outするときには、内容がないものと扱わ~MUST。 ◎ When laying out the containing element, it must be treated as having no contents.
注記: 要素の`~sizing~prop$は `~autoS$v にされていても、これにより,要素の~sizeが 0 になるとは限らない — 要素~自身に設定された `columns$p や `grid$p などの~propは、織り込まれ続ける。 ◎ Note: Even when the element’s sizing properties are auto this does not necessarily make the element zero-sized: properties set on the element itself, such as the columns property or the grid property, continue to be taken into account.
- 封込中の要素の内容は、要素の~layoutが完了して,その~sizeが解決された後に~lay-outされ~MUST。 ◎ After layout of the element is complete, its contents must then be laid out into the containing element’s resolved size.
- `置換d要素$の内在的[ 横幅/縦幅 ]は 0 に扱われ~MUST。 ◎ Replaced elements must be treated as having an intrinsic width and height of 0.
- 要素は`単体的$になる(`アリな分断点$を見よ)。 ◎ Elements with size containment are monolithic (See CSS Fragmentation Module Level 3 §possible-breaks).
`~sizeの封込め$自体は、さほど最適化の機会を提供するものではない。 その第一の便益は、封込中の要素の~sizeに基づいて,その内容を~lay-outしようとする~tool( “容器を照会する” 概念を実装している JS ~libraryなど)が、 “無限~loop” をおそれずに済む点にある — 子の~sizeが封込中の要素の~sizeに呼応することにより,封込中の要素の~sizeまで変化させ、場合によっては,子を~sizeする方法自体への 更なる変化を誘発して、封込中の要素の~sizeをさらに変化させることが際限なく続くような。 ◎ By itself, size containment does not offer much optimization opportunity. Its primary benefit on its own is that tools which want to lay out the containing element’s contents based on the containing element’s size (such as a JS library implementing the "container query" concept) can do so without fear of "infinite loops", where having a child’s size respond to the size of the containing element causes the containing element’s size to change as well, possibly triggering further changes in how the child sizes itself and possibly thus more changes to the containing element’s size, ad infinitum.
`~layoutの封込め$と組にされた場合に可能化できる最適化には、次のものが含まれる: ◎ When paired with layout containment, though, possible optimizations that can be enabled include (but are not limited to):
- 封込中の要素においては、その~styleや子孫の内容が変化したとき,[ ~DOM木のどの部分が “汚れて”,再~lay-outを要するかどうかの計算 ]を封込中の要素の所で止めれるようになる。 ◎ When the style or contents of a descendant of the containing element is changed, calculating what part of the DOM tree is "dirtied" and might need to be re-laid out can stop at the containing element.
- 頁を~lay-outするとき,封込中の要素が ~screen外にある/遮られている 場合には、その内容の~layoutは,遅延させたり, 優先度を下げて行えるようになる。 ◎ When laying out the page, if the containing element is off-screen or obscured, the layout of its contents can be delayed or done at a lower priority.
3.2. ~layoutの封込め
`~layoutの封込め$による効果は、[ `主要~box$を生成しない要素( `display$p が `contents^v や `none^v にされている事例など)/ `内部~table要素$のうち `display$p は `table-cell^v でないもの / `内部~ruby要素$/ `主要~box$は`可分な行内~box$になる要素 ]に対しては,ない。 他の要素に対する `~layoutの封込め@ には、次の効果がある: ◎ If the element does not generate a principal box (as is the case with display: contents or display: none), or if the element is an internal table element other than display: table-cell, or if the element is an internal ruby element, or if the element’s principal box is a non-atomic inline-level box, layout containment has no effect. Otherwise, giving an element layout containment has the following effects:
- 要素は、`独立な整形~文脈を確立する$。 ◎ The element establishes an independent formatting context.
-
所与の`断片化~文脈$ %文脈 に対し、要素が条件[[ 要素とその子孫が成す集合 ]は、 %文脈 内のある`断片化~容器$ %A を含むが, %文脈 内で %A の次にある`断片化~容器$は含まない ]]を満たしていて,要素は[ この条件を満たすような`~layoutの封込め$を伴う要素 ]のうち最初のものである場合、要素は, %A に後続するすべての`断片化~容器$への`断片化d~flow$を “捕え” ~MUST: `断片化$は,`~layoutの封込め$境界を過ぎて継続されては~MUST_NOT — 最初の`~layoutの封込め$境界の中の最後の`断片化~容器$【すなわち %A 】は、 %文脈 内の最後の`断片化~容器$であったかのように扱われる。 ◎ If at least one fragmentation container of a fragmentation context has layout containment, or if at least one fragmentation container of a fragmentation context is a descendant of an element with layout containment and at least one subsequent fragmentation container of the same fragmentation context is not a descendant of that same element with layout containment, then the first element with layout containment which is either a fragmentation container itself or is an ancestor of a fragmentation container must “trap” the remainder of the fragmented flow: fragmentation must not continue past the layout containment boundary, and the last fragmentation container within the first layout containment boundary is treated as if it is the last fragmentation container in its fragmentation context.
`断片化~文脈$において,[ 後続の`断片化~容器$たちは、`断片化d~flow$内に更なる内容が まだあるときに限り生成される ]場合【すなわち,内容の分量に応じて自動的に生成される場合】、それらは生成されない。 にも関わらず,それらが存在することになる場合【?】、それらは %文脈 の一部を成し続けるが、`断片化d~flow$からは,いかなる内容も受取らない。 ◎ If subsequent fragmentation containers in the fragmentation context are only generated when more content remains in the fragmented flow, then they are not generated. If they would exist regardless, they remain part of the fragmentation context, but do not receive any content from the fragmented flow.
注記: これを書いている時点では、この点により影響される安定的な仕様は無い。 懸念される仕様は、[ 一部の(すべてではない)断片化~文脈を成す 一部の断片化~容器が,~layoutを封込めるもの(または ~layoutを封込める要素の子孫)になること ]を可能化するものに限られる。 `CSS-PAGE-3$r / `CSS-MULTICOL-1$r は、これに該当しない。 それでも、この要件は含まれる。 いくつかの仕組みは,この可能性を考慮したことがあり(例: `CSS-REGIONS-1$r, `nth-fragment()$pe, 複柱~layoutを成す個々の柱~用に~~提案された選択子, 等々)、`~layoutの封込め$が提供しようと意図する保証は,そのような仕組みがこの規則を守らない場合には実現されないので。 `CSS-REGIONS-1^r に,`~layoutの封込め$が`領域$にどう影響するかの詳細がある。 ◎ Note: At the time of writing, no stable specification is affected by this point. Only specifications that would enable some (but not all) fragmentation containers of a fragmentation context to be layout-contained (or descendants of a layout contained element) are concerned. This is not the case of [CSS-PAGE-3] nor of [CSS-MULTICOL-1]. This requirement is nonetheless included because several mechanisms that would make this a possibility have been considered (e.g.: [CSS-REGIONS-1], ::nth-fragment(), a hypothetical selector for individual columns of a multicol…), and the guarantees that layout containment is intended to offer would not be realized if such mechanisms did not abide by this rule. [CSS-REGIONS-1] has details over how layout containment affects regions.
<article>Lorem ipsum…</article> <div id=a></div> <aside> <div id=b></div> <div id=c></div> </aside> <aside> <div id=d></div> <div id=e></div> </aside> <div id=f></div>
article {flow-into: foo;} #a, #b, #c, #d, #e, #f {flow-from: foo;} aside {contain: layout}
この `CSS-REGIONS-1$r 例では、 `article^e の内容は `#a^c から `#b^c へ, `#b^c から `#c^c へ~flowし得る。 しかしながら, `#c^c は最初の~layoutを封込める要素~内の最後の断片~容器なので、残りの内容~すべてを捕え,[ `#d^c / `#e^c / `#f^c ]の中へは何も~flowされない。 ◎ In this [CSS-REGIONS-1] example, content can flow from #a to #b, from #b to #c. However as #c is the last fragment container in the first layout-contained element, it traps all the remaining content, and nothing gets flowed into #d, #e, or #f.
- 要素の内容が要素を~overflowする場合、`~ink~overflow$として扱われ~MUST。 ◎ If the contents of the element overflow the element, they must be treated as ink overflow.
- 要素は、[ 絶対位置-/固定位置- ]された子孫に対する包含塊として動作する。 ◎ The element acts as a containing block for absolutely positioned and fixed positioned descendants.
-
`強制d分断$は、`~layoutの封込め$を伴う要素の中でも許容されるが,[ ~box間の分断により,親へ伝播する ]ことはない。 ◎ Forced breaks are allowed within elements with layout containment, but do not propagate to the parent as otherwise described in CSS Fragmentation Module Level 3 §break-between.
注記: これは、これまで存在しなかった[ `強制d分断$が ~boxとその容器の合間に生じ得る可能性 ]を導入する(`アリな分断点$を見よ)。 ◎ Note: This introduces the previously non-existent possibility that forced breaks may occur between a box and its container (See CSS Fragmentation Module Level 3 §possible-breaks).
`~layoutの封込め$により可能化できる最適化には、少なくとも次のものがある: ◎ Possible optimizations that can be enabled by layout containment include (but are not limited to):
- 頁を~lay-outするとき、別々の封込中の要素たちは,互いに影響しないことが保証されているので、それらの内容を並列的に~lay-outできるようになる。 ◎ When laying out the page, the contents of separate containing elements can be laid out in parallel, as they’re guaranteed not to affect each other.
-
頁を~lay-outするとき,封込中の要素が ~screen外にあるか, 遮られていて,~screenの可視~部分の~layoutが要素の~sizeに依存しない場合には(例えば、要素が塊~容器の終わり近くにあって,利用者はその塊~容器の始めの方を見ているとき)、要素の内容の~layoutは,遅延させたり, 優先度を下げて行えるようになる。 ◎ When laying out the page, if the containing element is off-screen or obscured and the layout of the visible parts of the screen do not depend on the size of the containing element (for example, if the containing element is near the end of a block container, and you’re viewing the beginning of the block container), the layout of the containing elements' contents can be delayed or done at a lower priority.
(`~sizeの封込め$と組にされた場合、この最適化は,より広範囲に適用され得る。) ◎ (When paired with size containment, this optimization can be applied more liberally.)
3.3. ~styleの封込め
要素に対する `~styleの封込め@ には、次の効果がある: ◎ Giving an element style containment has the following effects:
- [ `counter-increment$p, `counter-set$p ]は、要素の【要素を根とする】`部分木に視野を絞る$こと, および `新たな~counterを作成する$ことが要求される ◎ The counter-increment and counter-set properties must be scoped to the element’s sub-tree and create a new counter.
-
`content$p ~propに対する値[ `open-quote^v / `close-quote^v / `no-open-quote^v / `no-close-quote^v ]による効果は、要素の`部分木に視野を絞る$ことが要求される ◎ The effects of the content property’s open-quote, close-quote, no-open-quote and no-close-quote must be scoped to the element’s sub-tree.
注記: これは、部分木~内での引用符の入子深さは変更しない — したがって引用符は、通常通りにその文脈が含意する値から開始される — が、これらの値による[ 部分木の内側にある引用符の入子深さに対する変更 ]は[ 部分木の外側にある引用符の入子深さ ]には影響しないことを含意する。 ◎ Note: This implies that the depth of quote nesting in the subtree is unchanged and starts at the value that its context normally implies, but that changes to the depth of quote nesting by these values inside the subtree do not affect the depth of quote nesting outside the subtree.
注記: `CSS-REGIONS-1$r にも,`~styleの封込め$が`領域$にどう影響するかについての規範的な要件がある。 ◎ Note: [CSS-REGIONS-1] has normative requirements on how style containment affects regions.
`視野付き~prop@ ( `scoped property^en )の視野(効果が及ぶ~~範囲)は、特定0の[ %要素, または %要素 の部分木 ]に絞られるようになる: ◎ A scoped property has its effects scoped to a particular element or subtree.
-
`要素に視野を絞る@ 場合、その効果を評価する目的においては, %要素 が文書の根であったかのように動作し~MUST。 すなわち、 %要素 の外側における~propの利用が, %要素 の内側( %要素 上も含む)における~propの利用に効果を及ぼしたり、その逆であっては~MUST_NOT。 ◎ If scoped to an element, it must act as if the scoping element was the root of the document for the purpose of evaluating the property’s effects: any uses of the property outside the scoping element must have no effect on the uses of the property on or in the scoping element, and vice versa.
注記: “要素に視野を絞る” は、現在は利用されていないが,将来の仕様による拡張~用に定義されている ◎ “Scoping to an element” is currently unused. It is defined as an exention point for future specifications to use.
- `部分木に視野を絞る@ 場合、[ %要素 自身も,文書の残りと同様に部分木の “外側” とされ,~propによる %要素 に対する効果は影響されない ]ことを除いて,`要素に視野を絞る$ときと同じになる。 (したがって、視野付き~propによる[ 部分木の内側にある要素 ]に対する効果を考慮するときには、 %要素 は文書の根であったかのように扱われる。) ◎ If scoped to a sub-tree, it’s the same, except the scoping element itself is counted as "outside" the tree, like the rest of the document, and the effects of the property on that element are unaffected by scoping. When considering the effects of the scoped property on elements inside the subtree, the element at the base of the subtree is treated as if it was the root of the document.
`counter-increment$p は,ある要素の部分木に視野が絞られるので、その部分木の中で最初に利用された所では,[ それにより指定される名前の~counterが,要素の外側で利用されていたかどうか ]に関わらず[ その~counter値は,要素の所で `0^v に設定された ]かのように動作する。 部分木の中で~counterが増加されても、要素の外側にある同じ名前の~counterには,効果は及ばない。 しかしながら、 `content$p ~propの[ `counter()^v / `counters()^v ]値~自体は視野が絞られないので,部分木の外側で確立された~counterも~~参照できる。 したがって、次の~codeにより表示される結果は `1.1.2^c になる: ◎ As counter-increment is scoped to an element’s subtree, the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element, regardless of whether the counter had been used outside the scoping element. Any increments made within the subtree have no effect on counters of the same name outside the scoping element. However, the counter() and counters() value of the content property is not itself scoped, and can refer to counters established outside of the subtree. Therefore, the following code results in "1 1.2" being displayed:
<div></div>
div { contain: style; counter-increment: n; } div::before, div::after { content: counters(n, '.') " "; } div::after { counter-increment: n 2; }
`~styleの封込め$により可能化できる最適化には、少なくとも次のものがある: ◎ Possible optimizations that can be enabled by style containment include (but are not limited to):
- 封込中の要素の子孫~上の~propが変化したとき、[ ~DOM木のどの部分が “汚れて”,その~styleの再~計算を要し得るか ]を,封込中の要素の所で止めることが可能になる。 ◎ Whenever a property is changed on a descendant of the containing element, calculating what part of the DOM tree is "dirtied" and might need to have its style recalculated can stop at the containing element.
3.4. 塗りの封込め
`塗りの封込め$による効果は、[ `主要~box$を生成しない要素( `display$p が `contents^v や `none^v にされている事例など)/ `内部~table要素$のうち `display$p は `table-cell^v でないもの / `内部~ruby要素$/ `主要~box$は`可分な行内~box$になる要素 ]に対しては,ない。 他の要素に対する `塗りの封込め@ には、次の効果がある: ◎ If the element does not generate a principal box (as is the case with display: contents or display: none), or if the element is an internal table element other than display: table-cell, or if the element is an internal ruby element, or if the element’s principal box is a non-atomic inline-level box, paint containment has no effect. Otherwise, giving an element paint containment has the following effects:
- 要素の内容は — 子孫の塗りと幾何も含め — 要素の`主要~box$の`~padding辺$で切取られ~MUST — `隅における切取り$も織り込んだ上で。 これには、子孫の塗りも, それらの(~overflowに類似するような)幾何も含まれる。 これは `overflow$p に対する `clip^v に似るが、 `overflow$p ~propの算出値には効果はなく,依存関係もない。 これは、切取られた内容への~accessや それが在ることを指示する仕組みの作成を含むものではないし、[ `overflow$p / `resize$p / `text-overflow$p ]などの他の~propによる その種の仕組みの作成を抑制するものでもない。 これは、 `overflow$p の使用値が `visible^v から `clip^v に変更されたかのようになる。 ◎ The contents of the element including both the paint of the descendants and their geometry must be clipped to the padding edge of the element’s principal box, taking corner clipping into account. This does not include the creation of any mechanism to access or indicate the presence of the clipped content; nor does it inhibit the creation of any such mechanism through other properties, such as overflow, resize, or text-overflow. This is as if to overflow: visible was changed to overflow: clip at used value.
- 要素は、[ 絶対位置-/固定位置- ]された子孫に対する包含塊として動作する。 ◎ The element acts as a containing block for absolutely positioned and fixed positioned descendants.
- 要素は、`積層~文脈$を作成する。 ◎ The element creates a stacking context.
- 要素は、`独立な整形~文脈を確立する$。 ◎ The element establishes an independent formatting context.
`塗りの封込め$により可能化され得る最適化には、少なくとも次のものがある: ◎ Possible optimizations that can be enabled by paint containment include (but are not limited to):
- 封込中の要素が,~screen外にある/遮られている場合、~UAは,その内容に対する塗りを直に飛ばせる — それらは,~screen外にある/遮られていることが保証されているので。 ◎ If the containing element is off-screen or obscured, the UA can directly skip trying to paint its contents, as they’re guaranteed to be off-screen/obscured as well.
-
切取られた内容が[
`overflow$p / `resize$p / `text-overflow$p
]などによる別々の仕組みを介して~access可能にされない限り、~UAは,要素に割り当てる “~canvas” 空間を,正確に要素の~sizeに予約できるようになる。(
`overflow$p: `hidden^v
でも,同様に~scroll可能な~~状況があり, 現在~切取られている内容へ~scrollする可能性もあるので、~UAは、内容を~scrollされ次第 即時に示せるように,予測的に,いくぶん余分に塗ることが多い。) ◎ Unless the clipped content is made accessible via a separate mechanism such as the overflow, resize, or text-overflow properties, the UA can reserve "canvas" space for the element exactly the element’s size. (In similar, scrollable, situations, like overflow: hidden, it’s possible to scroll to the currently-clipped content, so UAs often predictively overpaint somewhat so there’s something to see as soon as the scroll happens, rather than a frame later.) - 封込中の要素は,`積層~文脈$になることが保証されるので、~scrollする要素を単独の GPU 層の中へ塗れるようになる。 ◎ Because they are guaranteed to be stacking contexts, scrolling elements can be painted into a single GPU layer.
~privacy/~security上の考慮点
この仕様により導入される新たな ~privacy/~security 上の考慮点は、ない。 ◎ This specification introduces no new privacy or security considerations.
【 以下、この節の他の内容は未訳。 】
変更点
~INFORMATIVE2018 年 5 月 24 日付 勧告候補 からの変更点は: ◎ Changes from the Candidate Recommendation of 24 May 2018
- `~sizeの封込め$は、~tableには適用されないとした。 ◎ Size containment does not apply to tables
- [ `columns^p / `grid^p ]~propは、~sizeを封込めている要素の~sizeに影響することを明確化した。 ◎ Clarify that the columns and grid properties affect the size of size-contained elements
- `contain^p ~propの~animation型を,離散的から~animate不可に変更した ◎ Change the animation type of the contain property from discrete to not animatable
- 編集上の改善 ◎ Editorial improvements
2017 年 8 月 8 日付 勧告候補 からの変更点は: ◎ Changes from the Candidate Recommendation of 8 August 2017
- 塗りの封込めはどの~boxを切取るかを明確化した。 `5b92ee3c170e3be239937a3ae069f37655ff6671$test ◎ Clarify to which box paint containment clips (see tests).
- 封込めと[ `bookmark-*^p / `string-set^p ]~propとの相互作用は `CSS-CONTENT-3$r に移動した。 (追加の~testは不要, 挙動に変更は無い) ◎ Move the interaction between containment and the bookmark-* and string-set properties to [CSS-CONTENT-3] (additional tests not needed, no change in behavior).
- 各種 `break-*^p ~propに対する~styleの封込めによる効果は除去した。 `d6a4f606a0501fe6ca526483a7a379ba2e9eaa1c$test ◎ Remove the effects of style containment on the "break-*" properties (see tests).
- `領域$に対する封込めの効果の記述を,この仕様から `CSS-REGIONS-1$r に移動した。 (追加の~testは不要, 挙動に変更は無い) ◎ Move the description of the effects of containement on regions from this specification to [CSS-REGIONS-1] (additional tests not needed, no change in behavior).
- ~styleの視野を絞るときの `counter-set^p, `counter-increment^p に対する効果について明確化した。 `d7fbc4794403dfeb55f13310d4c1cb51813e2d6e$test ◎ Clarify the effects of style scoping on counter-set and counter-increment (see tests)
- [ ~size/~layout/塗り ]の封込めは、内部~ruby要素には適用されないものとした。 `ba5a04e3d65f9f39c2d6431a9ece5eb15d22116b$test ◎ Size layout and paint containment don’t apply to internal ruby elements (see tests)
- [ ~size/~layout/塗り ]の封込めは、可分な行内には適用されないとした。 `402a19bde8981a402d9dba73083f84d96e4aeeb9$test `69b5681ee7aa5a028eb694b2c93bfd48c1ef08e4$test ◎ Layout, Paint, and size containments do not apply to non-atomic inlines (see tests here and one more test here)
- 塗りの封込めが `overflow^p: `clip^v の挙動に揃うようにした。 `e2f844700a4a165f7ab6a0f021bbe1bf4d921cc0$test ◎ Align paint containment’s behavior with overflow:clip (see test)
- ~sizeの封込めを伴う要素は、単体的になるものとした。 `536f74e4137196b34d63752f5a9217e23c4fb899#diff-bd8852c889db6d2b471bae58105f9374$test ◎ Elements with size containment are monolithic (see test)
- 強制d分断は、~layoutの封込めを伴う要素~内にも許容されるが,伝播しないものとした。 `536f74e4137196b34d63752f5a9217e23c4fb899$test ◎ Forced breaks area allowed in elements with layout containments, but do not propagate (see tests)
- 部分木に視野を絞ることによる効果を明確化した。 `7aad64ade18bce9db257c34d72c6dad126a9e9cd$test ◎ Clarify the effects of scoping to a subtree (see test)
- 視野を絞ることにより引用符を開く/閉じることへの効果を明確化した。 `f6efd2ff775bea39e34b1b260959de618908046b$test ◎ Clarify the effects of scoping on open/close quotes (see tests)
- 編集上の明確化: “整形~文脈になる(整形~文脈の根になる)” を “整形~文脈を確立する” に置換した。 (追加の~testは不要, 挙動に変更は無い) ◎ Editorial clarification: replace "Becoming a formatting context" (aka "Becoming a formatting context root") with "Establish a FC" (additional tests not needed, no change in behavior)
2017 年 4 月 19 日付 作業草案 からの変更点は: ◎ Changes from the Working Draft of 19 April 2017
- `display$p: `contents^v との相互作用を明確化した。 ◎ Clarify the interaction with display: contents
- 封込めが~table部品にどう働くかを明確化した。 ◎ Clarify how containment works on table parts
- 封込めと~overflowの断片化との相互作用は `CSS-OVERFLOW-4^r に移動した。 ◎ Move the interaction between containment and fragmentation of overflow from this specification to CSS-OVERFLOW-4
2017 年 2 月 21 日付 初公開草案 からの変更点は: ◎ Changes from the First Public Working Draft of 21 February 2017
- ~sizeの封込めにおける置換d要素の取扱いを指定した。 ◎ Specify handling of replaced elements for size containment
- ~layoutの封込めは、要素を[ 絶対位置-/固定位置- ]された子孫に対する包含塊として動作するようにした。 ◎ Layout containment makes element act as a containing block for absolutely positioned and fixed positioned descendants.