【この訳に特有な表記規約】
◎表記記号1. 序論
~CSSの`絶対~位置決め$は、 要素を~page上のどこにでも — 要素の包含塊は別として，他の要素の~layoutに関わることなく — 配置することを作者に許容する。 この柔軟性は、 ごく有用になり得るが，ごく制限されてもいる — 要素を他の`何らかの^em要素に相対的に位置するよう求まれることは多い。 `~anchor位置決め@ は、 `~anchor関数@ — `anchor$f, `anchor-size$f の総称 — を介して，これを達成することを作者に許容する — それは、 ある`絶対的に位置され$た要素を［ ~page上の他の 1 個以上の要素 ］を “~anchor先に” しながら，［ 他と重合する／~overflowする ］ことを避ける “最良な” ものを見出すよう［ いくつかのアリな位置を試行する ］ことを許容する。 ◎ CSS absolute positioning allows authors to place elements anywhere on the page, without regard to the layout of other elements besides their containing block. This flexibility can be very useful, but also very limiting—often you want to position relative to some other element. Anchor positioning (via the anchor functions anchor() and anchor-size()) allows authors to achieve this, "anchoring" an absolutely-positioned element to one or more other elements on the page, while also allowing them to try several possible positions to find the "best" one that avoids overlap/overflow.
作者は、 ある~tooltip【 `.tooltip^css 】を ~targetにされた要素【 `.anchor^css 】の中央かつ上に — ただし、 そうすると~screen外に配置される事例では，下に — 位置するよう求めることもあろう。 これは、 次の~CSSで行える： ◎ For example, an author might want to position a tooltip centered and above the targeted element, unless that would place the tooltip offscreen, in which case it should be below the targeted element. This can be done with the following CSS:
.anchor {
/*
【`--tooltip^v と命名された`~anchor要素$。】
*/
anchor-name: --tooltip;
}
.tooltip {
/*
`固定d位置決め$は、
包含塊の関係性を気にする必要は無いことを意味する
— 当の~tooltipは、
~DOM内のどこに在ってもよい。
◎
Fixpos means we don’t need to worry about containing block relationships; the tooltip can live anywhere in the DOM.
*/
position: fixed;
/*
~anchor法の挙動は、
すべて，既定では `--tooltip^v と命名された~anchorを参照rするようにする。
◎
All the anchoring behavior will default to referring to the --tooltip anchor.
*/
position-anchor: --tooltip;
/*
~tooltipの下端を~anchorの上端に整列させる。
これはまた、
既定では，~tooltipと~anchorを横方向において中央に整列させる（横組みにおいては）。
◎
Align the tooltip’s bottom to the top of the anchor; this also defaults to horizontally center-aligning the tooltip and the anchor (in horizontal writing modes).
*/
inset-area: block-start;
/*
~UIwindowを~overflowする場合、
~tooltipの上端が~anchorの下端に整列するよう，自動的に入替える。
◎
Automatically swap if this overflows the window so the tooltip’s top aligns to the anchor’s bottom instead.
*/
position-try: flip-block;
/*
広くなり過ぎるのを防止する。
◎
Prevent getting too wide
*/
max-inline-size: 20em;
2. ~anchorの決定-法
2.1. ~anchorの作成-法： `anchor-name^p ~prop
◎名 `anchor-name@p ◎値 `~noneN$v | `dashed-ident$t# ◎初 `~noneN$v ◎適 `首要~box$を生成するすべての要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終`anchor-name$p ~propは、 要素が `~anchor要素@ になるものと宣言する。 要素は、 この~propに与えた~listを成す各 `~anchor名@ を通して~targetにされる。 各種 値は、 次に従って定義される： ◎ The anchor-name property declares that an element is an anchor element, and gives it a list of anchor names to be targeted by. Values are defined as follows:
- `~noneN@v
- この~propによる効果は無い。 ◎ The property has no effect.
- `dashed-ident$t#
- 当の要素は， `首要~box$を生成するならば、 `~anchor要素$になり， 所与の~listを成す`~anchor名$たちを伴う — 各`~anchor名$は、 `~tree視野な名前$になる。 ◎ If the element generates a principal box, the element is an anchor element, with a list of anchor names as specified. Each anchor name is a tree-scoped name.
- 他の場合、 この~propによる効果は無い。 ◎ Otherwise, the property has no effect.
`~anchor名$は、 一意になる必要はない。 すべての要素が［ 所与の有位置な要素~用の`~anchor要素$になる能力 ］を有するとは限らないので、 各利用に対する視野が適切に絞られていれば，同じ名前を複数の箇所で再利用できる。 ◎ Anchor names do not need to be unique. Not all elements are capable of being anchor elements for a given positioned element, so a name can be reused in multiple places if the usages are scoped appropriately.
注記： 複数個の要素が同じ`~anchor名$を共有していて， それらが所与の有位置な要素から可視な場合、 `~target~anchor要素$は，それらのうち`~tree順序$【！~DOM順序】で最後のものになる。 `anchor-scope$p を利用すれば、 どの名前が所与の要素から可視になるかを制限できる。 ◎ Note: If multiple elements share an anchor name and are all visible to a given positioned element, the target anchor element will be the last one in DOM order. anchor-scope can be used to limit what names are visible to a given element.
`~anchor名$は、 既定では，`封込め$により視野が絞られる`ことはない^em。 要素が［ `~style封込め$／`~layout封込め$ ］（あるいは、 それらに類似な封込め） を伴う場合でも、 その子孫の`~anchor名$は，~page内の他所にある要素からは可視になる。 ◎ Anchor names are not scoped by containment by default; even if an element has style or layout containment (or any similar sort of containment), the anchor names of its descendants are visible to elements elsewhere in the page.
注記： 要素は、 別の要素の`飛ばされた内容$内にある間は （一例として， `content-visibility$p に因り）， `受容-可能な~anchor要素$にはならない — その間は、 実質的に，~anchor名【！名前】が無かったかのように動作する。 ◎ Note: While an element is in the skipped contents of another element (due to content-visibility: hidden, for instance), it’s not an acceptable anchor element, effectively acting as if it had no names.
2.1.1. 暗黙的な~anchor要素
一部の仕様は、 ある種の状況下で［ 特定0の要素が，所与の有位置な要素~用の `暗黙的な~anchor要素@ になる ］ものと定義し得る。 ◎ Some specifications can define that, in certain circumstances, a particular element is an implicit anchor element for a given positioned element.
暗黙的な~anchor要素を設定する “`anchor^a” 属性を利用する例で，ここを埋める （~HTML仕様において，それが最終的に着地したなら【`参照＠https://github.com/whatwg/html/pull/9144$】）。 ◎ TODO: Fill in an example using the "anchor" attribute (once that finally lands in the HTML spec), which sets the implicit anchor element.
`暗黙的な~anchor要素$は、 何らかの `anchor-name$p 値ではなく， `implicit$vA ~keywordで参照できる。 ◎ Implicit anchor elements can be referenced with the implicit keyword, rather than referring to some anchor-name value.
`疑似要素$の`暗黙的な~anchor要素$は、 他が指定されない限り，その`出自の要素$のそれと同じになるとする。 ◎ Pseudo-elements have the same implicit anchor element as their originating element, unless otherwise specified.
注記： これらの疑似要素は，他の仕様により~access可能でないことが多いので、 このようにしないと，これらを`暗黙的な~anchor要素$で位置することができなくなる。 ◎ Note: Without this, these pseudo-elements, which are often inaccessible by other specifications, cannot be positioned with implicit anchor elements.
2.2. ~anchor名の視野-法： `anchor-scope^p ~prop
◎名 `anchor-scope@p ◎値 `none^v | `all^v | `dashed-ident$t# ◎初 `none^v ◎適 すべての要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 指定された`~anchor名$たちの視野を絞る — その検索を当の要素の下位treeに限るよう。 `§ ~anchorの決定-法＠#determining$ を見よ。 ◎ This property scopes the specified anchor names, and lookups for these anchor names, to this element’s subtree. See § 2 Determining the Anchor.
各種 値の意味は： ◎ Values have the following meanings:
- `none@v
- `~anchor名$の視野における変更は無い。 ◎ No changes in anchor name scope.
- `all@v
-
［ 当の要素, その各~子孫 ］により定義される どの`~anchor名$ %~anchor名 に対しても：
-
%~anchor名 を視野に入れるものは†、 当の要素の子孫に限るものと指定する — %~anchor名 の視野が［ すでに，ある子孫により `anchor-scope$p を利用して制限されていない ］ならば。
【† すなわち、 %~anchor名 を通して［ 当の要素／その子孫 ］を~targetにするもの。 】【 言い換えれば、 所与の %要素 に対し， `~target~anchor要素$( %要素, %~anchor名 ) の結果が［ 当の要素／その子孫 ］になるならば、 %要素 は当の要素の子孫になる。 】
-
当の要素の子孫が %~anchor名 を照合する対象†は、 当の要素の下位treeの中††にある`~anchor要素$に限るよう制限する。
【† すなわち、 子孫が %~anchor名 を通して~targetにするもの。 】【†† 当の要素も含まれる。 】【 言い換えれば、 `~target~anchor要素$( 子孫, %~anchor名 ) の結果は，［ 当の要素／その子孫 ］になる。 】
-
- `dashed-ident$t#
- 対象になる`~anchor名$が［ 所与の `dashed-ident$t いずれかに合致するもの ］に限られることを除いて， `all$v と同じにふるまう。 ◎ Specifies that a matching anchor name defined by this element or its descendants—whose scope is not already limited by a descendant using anchor-scope—to be in scope only for this element’s descendants; and limits descendants to only match these anchor names to anchor elements within this subtree.
この~propには、 `暗黙的な~anchor要素$に対する効果は無い。 ◎ This property has no effect on implicit anchor elements.
ある設計~patternが再利用され， 互いに一致する複数の~componentがあるとき、 `anchor-scope$p は，それらに またがる命名の衝突を防止できる。 例えば、 ある~listが各~list~item内に有位置な要素を包含していて， それらの要素は［ 各自が属する~list~itemに相対的に位置する ］よう求まれるとする： ◎ When a design pattern is re-used, anchor-scope can prevent naming clashes across identical components. For example, if a list contains positioned elements in each list item, which want to position themselves relative to the list item they’re in,
li {
anchor-name: --list-item;
anchor-scope: --list-item;
}
li .positioned {
position: absolute;
position-anchor: --list-item;
inset-area: inline-start;
}
`anchor-scope$p を伴わない下では、 どの `li$e 要素も， 【それに指定された`~anchor名$は】これら有位置な要素~すべてから可視になる — その結果、 すべてが`最後の^em `li$e に相対的に位置され，そこへ積層される。 ◎ Without anchor-scope, all of the li elements would be visible to all of the positioned elements, and so they’d all positioned themselves relative to the final li, stacking up on top of each other.
2.3. ~anchorの見出法
この仕様~内のいくつかのものは、 所与の`~anchor指定子$から`~target~anchor要素$を見出す。 `~anchor指定子@ は、 次に挙げるいずれかである ⇒＃ `dashed-ident$t ／ ~keyword `implicit$vA ／ ε （指定子は欠落である） ◎終 `dashed-ident$t は、 ~page上の他所における `anchor-name$p 値に合致するべき名前であり， `~tree視野な参照$である。 ◎ Several things in this specification find a target anchor element, given an anchor specifier, which is either a <dashed-ident> (and a tree-scoped reference) that should match an anchor-name value elsewhere on the page, or the keyword implicit, or nothing (a missing specifier).
`~target~anchor要素@ 【略して “~anchor先（ `anchored^en ）” とも称される】 を決定するときは、 所与の ( 【`絶対的に位置され$た】~queryしている要素 %~query要素, `~anchor指定子$ %指定子 （省略時は ε） ) に対し： ◎ To determine the target anchor element given a querying element query el and an optional anchor specifier anchor spec:
- ~IF［ %指定子 ~EQ ε ］ ⇒ ~RET `~target~anchor要素$( %~query要素, %~query要素 の`既定の~anchor指定子$ ) ◎ If anchor spec was not passed, return the target anchor element for query el given the query el’s default anchor specifier.
-
~IF［ %指定子 ~EQ `implicit$vA ］： ◎ If anchor spec is implicit:
-
~IF［ `Popover API^cite †は、 %~query要素 用に`暗黙的な~anchor要素$ %~anchor を定義している ］~AND［ %~anchor は %~query要素 用に`受容-可能な~anchor要素$である ］ ⇒ ~RET %~anchor ◎ If the Popover API defines an implicit anchor element for query el which is an acceptable anchor element for query el, return that element.
【 `Popover API^cite は、 `HTML$r に定義される`~popover＠~HTMLpopover$を指すと思われる — そこでは，`暗黙的な~anchor要素$について（まだ）`何も言及していないが＠#_html-implicit-anchor$ （`~HTML課題 #9111＠~HTMLissue/9111$）。 】
- ~RET ε（該当する要素は無い） ◎ Otherwise, return nothing.
注記： 【上では `Popover API^cite に限って取扱っているが、】 将来の~APIは、 暗黙的な~anchor要素を定義するかもしれない。 そうなったときは、 他との協調を確保するよう， この~algo内で明示的に取扱われることになる。 ◎ Note: Future APIs might also define implicit anchor elements. When they do, they’ll be explicitly handled in this algorithm, to ensure coordination.
-
- ~Assert： %指定子 は `dashed-ident$t である。 ◎ Otherwise, anchor spec is a <dashed-ident>.＼
-
%~anchor群 ~LET 次を満たす`~anchor要素$ %~anchor たちが成す集合 ⇒ ［ %指定子 ~IN %~anchor の`~anchor名$たちが成す集合 ］~AND［ %~anchor の`~anchor名$たちに結付けられた`~tree$【！の`根$】 ~EQ %指定子 に結付けられた`~tree$【！の`根$】 ］
注記： `~anchor名$は`~tree視野な名前$である一方、 %指定子 は`~tree視野な参照$である。
◎ Return the last element el in tree order that satisfies the following conditions: • el is an anchor element with an anchor name of anchor spec. • el’s anchor name and anchor spec are both associated with the same tree root. • Note: The anchor name is a tree-scoped name, while anchor spec is a tree-scoped reference. • el is an acceptable anchor element for query el. - %~anchor群 を成す ~EACH( %~anchor ) に対し，`~tree順序$の逆順で ⇒ ~IF［ %~anchor は %~query要素 用の`受容-可能な~anchor要素$である ］ ⇒ ~RET %~anchor ◎ ↑
-
~RET ε （該当する要素は無い） ◎ If no element satisfies these conditions, return nothing.
注記： `anchor-scope$p は、 ある種の`~anchor名$の可視性を制約し得る — それは、 所与の検索において，どの要素が`~anchor要素$になり得るかに影響し得る。 ◎ Note: anchor-scope can restrict the visibility of certain anchor names, which can affect what elements can be anchor elements for a given lookup.
【 この注記は、 この手続きの中では， “〜に結付けられた`~tree$” として反映されているものと見受けられる。 】
注記： これらの条件【どれ？】により捕捉される一般~規則は、［ 【結果の？】 %~anchor は %~query要素 が~lay-outされる前に全部的に~lay-outされなければならない 【~lay-outする必要が生じるようになる？】 ］ことである。 ~CSSにおける［ 積層~文脈の~layout順序 ］用の規則は、 このことについて確証を与える — 上に挙げた条件たちは、［ ~anchor位置決めにおいて，循環依存が生じ得ない ］ことを確保するよう，ちょうど［ 積層~文脈~用の規則のうち，この目的に関連なもの ］だけを言い直したものである。 ◎ Note: The general rule captured by these conditions is that el must be fully laid out before query el is laid out. CSS’s rules about the layout order of stacking contexts give us assurances about this, and the list of conditions above exactly rephrases the stacking context rules into just what’s relevant for this purpose, ensuring there is no possibly circularity in anchor positioning.
注記： ある`~shadow~tree$内の~style内の `anchor-name$p により定義された`~anchor名$は、 異なる`~shadow~tree$内の~style内の`~anchor関数$からは見えない （~capsule化を保全するため）。 しかしながら，異なる`~shadow~tree$内にある`要素どうし^emであっても、［ `~anchor名$, `~anchor関数$ ］どちらも — ある~shadowの内側にある要素を `part()$pe を利用して~styleするなどにより — 同じ~tree内の~styleから来ているならば，互いに他を~anchorできる。 （`暗黙的な~anchor要素$は，内在的には単独の~treeに制限されないが、 その詳細は，それをアテガっている~APIに依存することになる。） ◎ Note: An anchor-name defined by styles in one shadow tree won’t be seen by anchor functions in styles in a different shadow tree, preserving encapsulation. However, elements in different shadow trees can still anchor to each other, so long as both the anchor-name and anchor function come from styles in the same tree, such as by using ::part() to style an element inside a shadow. (Implicit anchor elements also aren’t intrinsically limited to a single tree, but the details of that will depend on the API assigning them.)
所与の ( 要素 %~anchor, `絶対的に位置され$た要素 %~query要素 ) に対し， %~anchor は %~query要素 用の `受容-可能な~anchor要素@ であるとは、 ~AND↓ が満たされることをいう — 以下における %包含塊 は、 %~query要素 の`包含塊$とする： ◎ An element el is a acceptable anchor element for an absolutely positioned element query el if all of the following are true:
- %包含塊 ~IN %~anchor の`包含塊~連鎖$ ◎ Either el is a descendant of query el’s containing block, or query el’s containing block is the initial containing block.
-
%~box は［ %~anchor の`包含塊$ ~EQ %包含塊 ならば %~anchor 【の`首要~box$】／ ~ELSE_ %~anchor の`包含塊~連鎖$を成す`包含塊$のうち %包含塊 に達する前の最後のもの【を確立したものである】 ］とするとき、 %~box は ~OR↓ を満たす
- `絶対的に位置され$ていない
- ~tree順序において %~query要素 【の`首要~box$】に先行する
-
%~anchor は［ `要素$／ `part-like^en な疑似要素 【未定義な用語 — “`part()$pe の様に挙動する疑似要素” ？】 ］である ◎ el is either an element or a part-like pseudo-element.
- %~anchor は別の要素の`飛ばされた内容$内にはない ◎ el is not in the skipped contents of another element.
2.4. 既定の~anchor： `position-anchor^p ~prop
◎名 `position-anchor@p ◎値 `anchor-element$t ◎初 `implicit^v ◎適 `絶対的に位置され$た要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終`position-anchor$p ~propは、 当の要素~上のすべての`~anchor関数$用の `既定の~anchor指定子@ を定義する — それは、 次を許容する ⇒ 複数の要素が，同じ［ `~anchor関数$たちが成す集合, `位置~option~list$ ］を利用しながら， 各自が参照rしている`~anchor要素$を変更する。 ◎ The position-anchor property defines the default anchor specifier for all anchor functions on the element, allowing multiple elements to use the same set of anchor functions (and position options lists!) while changing which anchor element each is referring to.
`絶対的に位置され$た要素の `既定の~anchor要素@ は、 `既定の~anchor指定子$により選定される~anchor要素 — すなわち，次の結果を指す ⇒ `~target~anchor要素$( 当の要素 ) ◎ The target anchor element selected by the default anchor specifier (if one exists) is the element’s default anchor element.
とり得る値は、［ `anchor$f ／ `anchor-size$f ］における `anchor-element$t と一致する。 ◎ Its values are identical to the <anchor-element> term in anchor() and anchor-size().
例えば，次の~codeにおける［ `.foo^css, `.bar^css ］要素は、 各自が参照rしている~anchor要素だけを変更しながら，どちらも同じ位置決め~propたちを利用できる： ◎ For example, in the following code both .foo and .bar elements can use the same positioning properties, just changing the anchor element they’re referring to:
.anchored {
position: absolute;
top: calc(.5em + anchor(outside));
/*
この `anchor^f は、
`~anchor名$【`~anchor指定子$】を指定していないので，
自動的に`既定の~anchor要素$を参照rする。
◎
Since no anchor name was specified, this automatically refers to the default anchor element.
*/
}
.foo.anchored {
position-anchor: --foo;
}
.bar.anchored {
position-anchor: --bar;
}
2.5. ~anchorの関連性
所与の要素 %要素 は、［ ~AND↓ を満たす［ %P, %A ］が在る ］ならば，`利用者に関連する$ものと見なすモノトスル：
- %P は`絶対的に位置され$た要素である
- %A は %要素 の子孫である
- %A は %P 用の`~target~anchor要素$である
- %P の`内容は飛ばされ$ていない
- %P の包含塊を確立しているものは［ %要素 または %要素 のある子孫 ］でない
注記： このことは、 例えば， %要素 が `content-visibility:auto$p を伴う場合でも、 %A に依拠している %P の`内容は飛ばされ$ていない間は， %要素 の`内容は飛ばされ$なくなることを意味する （ %P も %要素 の下位tree内にある場合を除いて — %A, %P が互いに他方を可視に保つような循環依存は生じ得ない）。 ◎ Note: This means that, for example, an anchor in a content-visibility: auto subtree will prevent its subtree from skipping its contents as long as the positioned element relying on it is also not skipped. (Unless the anchor and the positioned element are both under the same content-visibility: auto element; they can’t cyclicly keep each other visible.)
3. ~anchorに基づく位置決め
`絶対的に位置され$た要素は、 自身を~pageの 1 個以上の`~anchor要素$に相対的に位置できる。 ◎ An absolutely-positioned element can position itself relative to one or more anchor elements on the page.
`inset-area$p ~prop【！function】は、 `既定の~anchor要素$に相対的な位置決め用に，簡便な格子に基づく概念を提供する — ［ より複階的な位置決め／ 複数個の要素に相対的な位置決め ］用には、 `~inset~prop$において［ `~anchor要素$の辺を明示的に参照rする `anchor$f 関数 ］を利用できる。 ◎ The inset-area function offers a convenient grid-based concept for positioning relative to the default anchor element; for more complex positioning or positioning relative to multiple elements, the anchor() function can be used in the inset properties to explicitly refer to edges of an anchor element.
3.1. `inset-area^p ~prop
◎名 `inset-area@p ◎値 `none$vI | `inset-area$t ◎初 `none$vI ◎適 `既定の~anchor要素$を伴う有位置な要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア （未策定） ◎表終~anchor位置決めに共通的な利用事例では、［ 有位置な要素の`包含塊$の各~辺, `既定の~anchor要素$の各~辺 ］以外は気にする必要がない場合がほとんどである。 これらの線（辺）は、 縦横とも 3 分された格子 — `~inset区画~用の格子$ — を定義しているものと捉えれる。 `inset-area$p は、 `~inset区画$ — 有位置な要素を［ この格子を成す どの区画~内に置くことが求まれるか ］ — を指定することにより， 有位置な要素の`~inset~prop$を容易に設定しておけるようにする。 その構文は： ◎ Most common use-cases of anchor positioning only need to worry about the edges of the positioned element’s containing block, and the edges of the default anchor element. These lines can be thought of as defining a 3x3 grid; inset-area lets you easily set up the positioned element’s inset properties by specifying what area of this inset-area grid you want the positioned element to be in. Its syntax is:
`inset-area@t
= [Ⓐ] || [Ⓑ]
| [Ⓒ] || [Ⓓ]
| [Ⓔ]{1,2}
| [Ⓕ]{1,2}
Ⓐ
= left
| center
| right
| span-left
| span-right
| x-start
| x-end
| span-x-start
| span-x-end
| x-self-start
| x-self-end
| span-x-self-start
| span-x-self-end
| span-all
Ⓑ
= top
| center
| bottom
| span-top
| span-bottom
| y-start
| y-end
| span-y-start
| span-y-end
| y-self-start
| y-self-end
| span-y-self-start
| span-y-self-end
| span-all
Ⓒ
= block-start
| center
| block-end
| span-block-start
| span-block-end
| span-all
Ⓓ
= inline-start
| center
| inline-end
| span-inline-start
| span-inline-end
| span-all
Ⓔ
= start
| center
| end
| span-start
| span-end
| span-all
Ⓕ
= self-start
| center
| self-end
| span-self-start
| span-self-end
| span-all
【 ⒶⒷⒸⒹⒺⒻ は、 簡明にするための，この訳による追加。 】
- `none@vI
- この~propによる効果は無い。 ◎ The property has no effect.
- `inset-area$t
-
当の要素が ~OR↓ を満たす場合、 この値による効果は無い：
- その`既定の~anchor要素$ ~EQ ε
- `絶対的に位置され$ていない
-
他の場合： ◎ Otherwise,＼
-
この~propは、 `~inset区画$を指定する — それが、 当の要素の`包含塊$になる。 ◎ the property selects a region of the inset-area grid, and makes that the element’s containing block.
注記： このことは、 次を意味する：
- `~inset~prop$は、 `~inset区画$からの~offsetを指定する。
- 一部の~prop用の一部の値 — `max-height: 100%$p など — は、 `~inset区画$に相対的になる
- `自己-整列~prop$用の値 `normal$vS は、 当の有位置な要素~用に良い既定の整列を与えるため，［ `start$vS, `end$vS, `anchor-center$vS ］いずれかとして挙動する （`~inset区画$が占める位置に依存する）。 詳細は、 § `inset-area^t の解決-法 を見よ。 ◎ Additionally, the normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned element. ◎ See § 3.1.1 Resolving <inset-area>s for details on both of these effects.
- `~inset~prop$用の値 `auto$v は `0^v に解決される。 ◎ Also, any auto inset properties resolve to 0.
-
3.1.1. `inset-area^t の解決-法
所与の要素 %要素 の `~inset区画~用の格子@ は、 縦横とも 3 分された格子である — それは、 軸ごとに，次に挙げる 4 本の線から構成される： ◎ The inset-area grid is a 3x3 grid, composed of four grid lines in each axis. In order:
-
次のうち，より`始端$寄りにある方：
- %要素 の［ 改変される前の`包含塊$ ］の始端~辺
- %要素 の`既定の~anchor要素$の `anchor(start)^v【！`anchor-start()^v】 辺
- %要素 の`既定の~anchor要素$の `anchor(start)^v 辺 ◎ the anchor(start) edge of the default anchor element
- %要素 の`既定の~anchor要素$の `anchor(end)^v 辺 ◎ the anchor(end) edge of the default anchor element
-
次のうち，より`終端$寄りにある方：
- %要素 の［ 改変される前の`包含塊$ ］の終端~辺
- %要素 の`既定の~anchor要素$の `anchor(end)^v【！`anchor-start()^v】 辺
`inset-area$t は、 この格子を成すある領域 — `~inset区画@ — を［ それが占める［ ~rowたち, ~colたち ］を指定する ］ことにより選定する 【区画は，それらの交差域になる】。 各~keywordは、［ ~row（たち）, ~col（たち） ］どちらかを指定する： ◎ An <inset-area> selects a region of this grid by specifying the rows and columns the region occupies, with each of the two keywords specifying one of them:
- `start@vI
- `end@vI
- `self-start@vI
- `self-end@vI
- `top@vI
- `bottom@vI
- `left@vI
- `right@vI
- `y-start@vI
- `y-end@vI
- `y-self-start@vI
- `y-self-end@vI
- `x-start@vI
- `x-end@vI
- `x-self-start@vI
- `x-self-end@vI
- `block-start@vI
- `block-end@vI
- `block-self-start@vI
- `block-self-end@vI
- `inline-start@vI
- `inline-end@vI
- `inline-self-start@vI
- `inline-self-end@vI
- `center@vI
-
1 個の［ ~row／~col ］を占める：
-
参照rする軸（［ ~row, ~col ］どちらを占めるか）は：
- 当の~keywordが ある軸を指定する場合、 それになる （例： `block-start$vI は、 `塊-軸$を参照rする）。
- 他の場合、 下に述べる。
- 3 個ある［ ~row／~col ］のうち どれを占めるかは、 当の~keywordにより指示される （例： ~keywordが `start^v を含むなら “始端”, 等々）。
-
どの側が［ “始端” ／ “終端” ］とされるかは、 次に基づく：
- `self^v を含む~keyword用には、 当の要素の自前の`書字~mode$
- 他~keyword用には、 当の要素の`包含塊$の`書字~mode$
-
- `span-start@vI
- `span-end@vI
- `span-top@vI
- `span-bottom@vI
- `span-y-start@vI
- `span-y-end@vI
- `span-x-start@vI
- `span-x-end@vI
- `span-block-start@vI
- `span-block-end@vI
- `span-inline-start@vI
- `span-inline-end@vI
- 中央にある［ ~row／~col ］も占めることを除いて，［ 当の~keywordから `span-^v を除去した~keyword ］と同じになる （例： `span-top$vI は、［ 中央, 上端 ］を占める）。 ◎ Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. ◎ (For example, span-top spans the first two rows—the center row and the top row.)
- `span-all@vI
- 3 個~すべての［ ~row／~col ］を占める。 ◎ All three rows or columns,＼ ↓↓ depending on which axis this keyword is specifying.
~keywordには、 どの軸を参照rするか多義的なものがある （ `center$vI, `span-all$vI, `start$vI, 等々） — それらが参照rする軸は：
- 他方の~keywordが ある軸を指定する場合 ⇒ もう一方の軸になる （例： `block-start center^v を成す~keyword `center^v は、 `行内-軸$を参照rする）。
- 他の場合 ⇒ 順に，要素の`包含塊$の［ `塊-軸$, `行内-軸$ ］を参照rする （例：`span-all start^v は `span-all inline-start^v と等価になる）。
~keywordが 1 個だけ与えられた場合：
- 所与の~keywordが ある軸を指定する場合 ⇒ 2 個目の~keywordは `span-all$vI であったかのように挙動する （例： `top$vI は `top span-all^v と等価になる）。
- 他の場合 ⇒ 所与の~keywordが繰返されたかのように挙動する （例： `center$vI は `center center^v と等価になる）。
`inset-area$t は、 既定の`自己-整列$も含意する — それは、 当の要素の`自己-整列~prop$が `normal$vS をとる場合に利用されることになる。 すなわち、 所与の軸 %軸 における既定の整列は： ◎ The <inset-area> also implies a default self-alignment, which will be used if the self-alignment property on the element is normal:
- `~inset区画$が %軸 において “中央” 領域を含む場合 ⇒ `anchor-center$vS になる。 ◎ If the inset area includes the center region in an axis the default alignment in that axis is anchor-center.
- 他の場合 ⇒ `~inset区画$が指定する領域の反対-側になる — %軸 において “始端” 領域が指定されたならば `end$vS になる，等々。 ◎ Otherwise, it’s the opposite of the region it specifies: if it’s specifying the "start" region of its axis, the default alignment in that axis is end; etc.
例えば，`書字~mode$が英語と等価である（ `horizontal-tb^v, `ltr^v ）と見做すなら、 値 `span-x-start top^v は［ 【 `top^v により指定される】縦~軸における “始端” 領域, 【 `span-x-start^v により指定される】横~軸における［ “始端”, “中央” ］領域 ］に解決される。 なので、 既定の整列は，［ `align-self: end$p, `justify-self: anchor-center$p ］になる。 ◎ For example, assuming an English-equivalent writing mode (horizontal-tb, ltr), then the value span-x-start top resolves to the "start" region of the vertical axis, and the "start" and "center" regions of the horizontal axis, so the default alignments will be align-self: end; and justify-self: anchor-center;
注記： `既定の~anchor要素$が当の要素の［ 改変される前の`包含塊$ ］を はみ出るときは、 `~inset区画~用の格子$を成す一部の［ ~row／~col ］の~sizeは， 0 になることもある。 ◎ Note: When the default anchor element is partially or completely outside of the pre-modified containing block, some of the inset-area grid’s rows or columns can be zero-sized.
3.2. `anchor^f 関数
`絶対的に位置され$る要素 %要素 は、 自身の`~inset~prop$内の値として `anchor@f 関数を利用することにより，［ 1 個以上の`~anchor要素$ ］の位置を参照rできる。 `anchor$f 関数は、 `length$t に解決される。 その利用が妥当になるのは、 `~inset~prop$に限られる。 ◎ An absolutely-positioned element can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor elements. The anchor() function resolves to a <length>. It is only valid to be used in the inset properties.
`anchor()^t = anchor( `anchor-element$t? `anchor-side$t, `length-percentage$t? ) `anchor-element@t = `dashed-ident$t | `implicit$vA `anchor-side@t = `inside$vA | `outside$vA | `top$vA | `left$vA | `right$vA | `bottom$vA | `start$vA | `end$vA | `self-start$vA | `self-end$vA | `percentage$t | `center$vA
`anchor$f 関数は、 3 個の引数をとる： ◎ The anchor() function has three arguments:
-
`anchor-element$t は、 `~anchor要素$を見出す方法を指定する 【すなわち、`~anchor指定子$を与える】。 %要素 の位置決め情報は、 それにより見出された`~anchor要素$ 【すなわち，`~target~anchor要素$】 から引き出されることになる。 省略された場合、 【 ε と見なされ，】 %要素 の`既定の~anchor指定子$として挙動する。 ◎ the <anchor-element> value specifies how to find the anchor element it will be drawing positioning information from. If omitted, it behaves as the element’s default anchor specifier.＼
アリな値は： ◎ Its possible values are:
- `dashed-ident$t
- 所与の識別子を`~anchor名$に伴う`~anchor要素$を探す。 この名前は、 `~tree視野な参照$になる。 ◎ Specifies the anchor name it will look for. This name is a tree-scoped reference.
- `implicit@vA
- アリなら， %要素 用に定義された`暗黙的な~anchor要素$を選定する。 ◎ Selects the implicit anchor element defined for the element, if possible.
詳細は、 `~target~anchor要素$を見よ。 ◎ See target anchor element for details.
-
`anchor-side$t は、 `~target~anchor要素$の［ その値に対応している側 ］を位置として参照rする。 以下における %~prop は、 この関数を利用している`~inset~prop$を指すとする。 アリな値は： ◎ the <anchor-side> value refers to the position of the corresponding side of the target anchor element. Its possible values are:
- `inside@vA
- `outside@vA
- `inside$vA は、 `~anchor要素$の各~側のうち， %~prop と同じ側（ %要素 を当の~anchorの “内側” に付する）を参照rするよう解決される。 `outside$vA は、 その反対-側†を参照rするよう解決される。 ◎ Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. inside refers to the same side as the inset property (attaching the element to the "inside" of the anchor), while outside refers to the opposite.
- 【† %~prop が指示する側と反対を表すのか（例： %~prop が `top^p なら下端）， “内側” の反対を表す “外側” なのかはっきりしない。 ~keywordの意味は後者を示唆しているが。 】
- `top@vA
- `right@vA
- `bottom@vA
- `left@vA
- `~anchor要素$の［ 所与の~keywordにより指定された側 ］を参照rする。 ◎ Refers to the specified side of the anchor element.
- 注記： これらの~keywordが利用-可能になるのは、 ~keywordが属する軸が %~prop が属する軸と合致している場合に限られる。 例えば， `left$vA を利用-可能な~propは、 横~軸に属する`~inset~prop$ — `left$p, `right$p, これらと同じ側に対応する~flow相対な~prop — に限られる。 ◎ Note: These are only usable in the inset properties in the matching axis. For example, left is usable in left, right, or the logical inset properties that refer to the horizontal axis.
- 【 これらは、 “物理-~keyword” とも総称される。 】
- `start@vA
- `end@vA
- `self-start@vA
- `self-end@vA
- `~anchor要素$の各~側のうち， %~prop と同じ軸に属するいずれかを参照rする 【例： %~prop が `top$p ならば上端か下端】 — 所与の~keywordに応じて， ⇒＃ ［ `self-start$vA ／ `self-end$vA ］ならば，当の有位置な要素／ ［ `start$vA ／ `end$vA ］ならば，当の有位置な要素の包含塊 ◎終 の`書字~mode$を基準に解決することにより。 ◎ Refers to one of the sides of the anchor element in the same axis as the inset property it’s used in, by resolving the keyword against the writing mode of either the positioned element (for self-start and self-end) or the positioned element’s containing block (for start and end).
- 【 これらは、 “論理-~keyword” とも総称される。 】
- `percentage$t
- `center@vA
- ［ `start$vA 側, `end$vA 側 ］の合間における所与の百分率に対応する位置を参照rする — ［ `0%^v ／ `100%^v ］は［ `start^v ／ `end^v ］と等価になる。 ◎ Refers to a position a corresponding percentage between the start and end sides, with 0% being equivalent to start and 100% being equivalent to end.
- `center$vA は、 `50%^v と等価になる。 ◎ center is equivalent to 50%.
- 省略可能な 3 個目の引数 `length-percentage$t は、 ~fallback値を与える。 これは、 当の `anchor$f が`妥当な~anchor関数$でない場合に，何に解決するべきかを指定する。 ◎ the optional <length-percentage> final argument is a fallback value, specifying what the function should resolve to if it’s an invalid anchor function.
`anchor$f 関数は、 `妥当な~anchor関数$を表現しているならば， （`~styleと~layoutの差挟み$を介して） `算出d値$の時点で `length$t に解決される — ［ 当の有位置な要素の`~insetで改変された包含塊$ ］の［ 当の関数が現れる~propに対応している辺 ］を［ `~target~anchor要素$の指定された~border辺 ］に整列するような。 そのときには、［ `~target~anchor要素$と当の有位置な要素の`包含塊$の合間にある`~scroll容器$ ］は，どれも［ 各自の初期~scroll位置に~scrollされている ］と見做される （が、 `§ ~scrollの織り込み法＠#scroll$ を見よ）。 ◎ An anchor() function representing a valid anchor function resolves at computed value time (using style & layout interleaving) to the <length> that would align the edge of the positioned elements' inset-modified containing block corresponding to the property the function appears in with the specified border edge of the target anchor element, assuming that all scroll containers between the target anchor element and the positioned element’s containing block are scrolled to their initial scroll position (but see § 3.4 Taking Scroll Into Account).
注記： このことは、 `~anchor関数$を利用している~propの［ `遷移＠~WANIM#_animation-class-css-transition$／`~animation＠~WANIM#_animation-class-css-animation$【！~WANIM#concept-animation】 ］は，［ アリなすべての類の変化に対し， “期待されるとおり” 働くようになる ］ことを意味する ⇒＃ ~anchor要素が移動したとき, ~anchor要素が文書に追加されたとき, ~anchor要素が文書から除去されたとき, ~anchorの `anchor-name$p ~propが変更されたとき, 等々 ◎ Note: This means that transitions or animations of a property using an anchor function will work "as expected" for all sorts of possible changes: the anchor element moving, anchor elements being added or removed from the document, the anchor-name property being changed on anchors, etc.
`~target~anchor要素$が`断片$化されている場合、［ 各~断片の~border~box ］たちが成す限界~矩形 — それらの~boxと軸が揃えられた矩形 — が代わりに利用される。 ◎ If the target anchor element is fragmented, the axis-aligned bounding rectangle of the fragments' border boxes is used instead.
加えて，有位置な要素は、 その`~snapshot済み~scroll~offset$により視覚的にズラされる — 追加的な `translate$f 変形によりズラされたかのように。 ◎ The positioned element is additionally visually shifted by its snapshotted scroll offset, as if by an additional translate() transform.
例えば， `.bar { top: anchor(--foo top); }^css においては、 `anchor$f は，［ `.bar^css 要素の上端~辺と`~anchor要素$ `--foo^v の上端~辺が揃うような長さ ］に解決されることになる。 ◎ For example, in .bar { top: anchor(--foo top); }, the anchor() will resolve to the length that’ll line up the .bar element’s top edge with the --foo anchor’s top edge.
他方， `.bar { bottom: anchor(--foo top); }^css においては、［ `.bar^css 要素 の`下端^em辺と`~anchor要素$ `--foo^v の上端~辺が揃うような長さ ］に解決されることになる。 ◎ On the other hand, in .bar { bottom: anchor(--foo top); }, it will instead resolve to the length that’ll line up the .bar element’s bottom edge with the --foo anchor’s top edge.
［ `top$p の値, `bottom$p の値 ］は，異なる辺 （要素の`包含塊$の［ 上端／下端 ］辺） からの~insetを指定するので、 双方の `anchor$f は同じでも，それらを解決した結果の長さは異なることになる。 ◎ Since top and bottom values specify insets from different edges (the top and bottom of the element’s containing block, respectively), the same anchor() will usually resolve to different lengths in each.
`anchor$f 関数は、 `length$t に解決されるので，他の長さと同様に`~math関数$内でも利用できる。 ◎ Because the anchor() function resolves to a <length>, it can be used in math functions like any other length.
例えば，次は、［ 要素の`~insetで改変された包含塊$ ］が［ `~anchor要素$上で中央に寄せられ， 要素の`包含塊$を~overflowしない~~範囲でアリな限り幅広になる ］よう，要素を設定しておくことになる： ◎ For example, the following will set up the element so that its inset-modified containing block is centered on the anchor element and as wide as possible without overflowing the containing block:
.centered-message {
position: fixed;
max-width: max-content;
justify-self: center;
--center: anchor(--x 50%);
--half-distance: min(
abs(0% - var(--center)),
abs(100% - var(--center))
);
left: calc(var(--center) - var(--half-distance));
right: calc(var(--center) - var(--half-distance));
bottom: anchor(--x top);
}
これは例えば、 `input$e 要素に対する~error~message用に適切になることもあろう — 中央に寄せたことにより，当の~messageが どの入力を参照rしているか発見し易くなるので。 ◎ This might be appropriate for an error message on an input element, for example, as the centering will make it easier to discover which input is being referred to.
3.3. ~anchorの中央~寄せ： `anchor-center^v 値
◎名 `justify-self$p, `align-self$p, `justify-items$p, `align-items$p ◎新値 `anchor-center$vS ◎表終`自己-整列~prop$は、 `絶対的に位置され$た要素が自身を`~insetで改変された包含塊$の中で整列することを許容する。 通例的には，［ 既存の値に加えて，`~inset~prop$を注意深く選ぶこと ］で有用な整列~用には十分になるが、 ~anchor先での位置決め用に共通的な事例 — ~anchor要素~上で中央に寄せること — を達成するためには、 注意深い, いくぶん複階的な設定-法が要求される。 ◎ The self-alignment properties allow an absolutely-positioned element to align itself within the inset-modified containing block. The existing values, plus carefully chosen inset properties, are usually enough for useful alignment, but a common case for anchored positioning—centering over the anchor element—requires careful and somewhat complex set-up to achieve.
新たな値 `anchor-center@vS は、 この事例を極めて単純にする — 当の要素 %要素 が［ `絶対的に位置され$た【！有位置な】要素である ］~AND［ その`既定の~anchor要素$ %~anchor ~NEQ ε ］を満たす場合、 関連な軸 【この値を利用している~propが対象にする軸】 において： ◎ The new anchor-center value makes this case extremely simple: if the positioned element has a default anchor element,＼
- %要素 が %~anchor 上で中央に整列されるようにする。 ◎ then it is aligned so as to center itself over the default anchor element in the relevant axis.
-
`~inset~prop$用の値 `auto$v は `0^v に解決される。 しかしながら，関連な軸において %要素 用に`可用な空間$は、［ ~AND↓ を満たす最~大な矩形 ］の~sizeに抑制される： ◎ Additionally, any auto inset properties resolve to 0. However, the available space for the positioned element in the relevant axis is reduced to the size of the largest rectangle that＼
- %~anchor 上で中央に寄せられる 【すなわち， %~anchor の中心と矩形の中心は一致する】 ◎ is centered on the default anchor element and＼
- 【 %要素 の】`~insetで改変された包含塊$を~overflowしない ◎ doesn’t overflow the inset-modified containing block.＼
（ %~anchor の中心が`~insetで改変された包含塊$の外にある場合、 矩形の~sizeは 0 になる。） ◎ (Possibly being zero-sized, if the anchor’s center is not within the inset-modified containing block.)
%要素 が上の条件を満たさない場合、 `anchor-center$vS は `center$vS として挙動する — `~inset~prop$の解決-法に追加的な効果を及ぼすことは無い。 ◎ If the element is not absolutely positioned, or does not have a default anchor element, this value behaves as center and has no additional effect on how inset properties resolve.
3.4. ~scrollの織り込み法
~scrollingは，処理能の理由から［ 実装においては、 ~layoutとは別々な~threadで行われる ］ことが多いが、 `anchor$f は，［ 位置決め変化, ~layout変化 ］両者の結果に基づき得る （前者は~scrolling~thread内で取扱われ得るが，後者はそうでない）。 このことから、 `anchor$f は，［ 当の~anchor要素から当の有位置な要素の`包含塊$までの合間にある`~scroll容器$ ］は［ どれも，各自の初期~scroll位置にある ］ものと見做すよう定義される。 このことは、 有位置な要素は，［ いずれかの`~scroll容器$が，その初期~位置`でない場合^em ］には［ その`~anchor先$【！~its ~anchor】と`整列されなくなる^em ］ことを意味する。 ◎ Because scrolling is often done in a separate thread from layout in implementations for performance reasons, but anchor() can result in both positioning changes (which can be handled in the scrolling thread) and layout changes (which cannot), anchor() is defined to assume all the scroll containers between the anchor element and the positioned element’s containing block are at their initial scroll position. This means a positioned element will not be aligned with its anchor if any of the scrollers are not at their initial positions.
これを［ ~scrollingを別々な~threadで行うことによる処理能の便益を失う ］ことなく補償するため、 次が定義される： ◎ To compensate for this without losing the performance benefits of the separate scrolling thread, we define:
`絶対的に位置され$た要素 %~query要素 は，所与の［ 横~軸／縦~軸 ］ %軸 において `~scroll調整が必要@ であるとは、 次を遂行した結果が ~T になることをいう： ◎ An absolutely-positioned element query el needs scroll adjustment in the horizontal or vertical axis if both of the following conditions are true:
- %既定の~anchor ~LET %~query要素 の`既定の~anchor要素$ ◎ ↓
- ~IF［ %既定の~anchor ~EQ ε ］ ⇒ ~RET ~F ◎ query el has a default anchor element.
-
%~query要素 の ~EACH( %軸 に属する`~inset~prop$ %~prop ) に対し：
- %関数 ~LET ［ %~prop の使用~値は `anchor$f 関数を利用しているならば それ ／ ~ELSE_ ε ］
- ~IF［ %関数 ~EQ ε ］ ⇒ ~CONTINUE
- %~anchor ~LET `~target~anchor要素$( %~query要素, %関数 内に指定された `anchor-element$t ) ~NEQ ε
- ~IF［ %~anchor ~EQ ε ］ ⇒ ~CONTINUE
- ~IF［ %~anchor の先祖である`~scroll容器$のうち %~anchor に最も近いもの ~EQ %既定の~anchor の先祖である`~scroll容器$のうち %既定の~anchor に最も近いもの ］ ⇒ ~RET ~T
- ~IF［ %~query要素 の %軸 に属する`自己-整列~prop$の使用~値 ~EQ `anchor-center$vS ］ ⇒ ~RET ~T ◎ or query el’s used self-alignment property value in the axis is anchor-center.
- ~RET ~F ◎ ↑
注記： %~query要素 に`位置~option~list$がある場合、 それにより適用された~fallback~styleも， ある軸において`~scroll調整が必要$かどうかに影響する。 ◎ Note: If query el has a position options list, then whether it needs scroll adjustment in an axis is also affected by the applied fallback style.
%~query要素 の `~snapshot済み~scroll~offset@ は、［ 縦~軸, 横~軸 ］用の長さが成す~pairである — これらの各~長さは、 所与の軸 %軸 に対し，次に従って計算される： ◎ query el’s snapshotted scroll offset is a pair of lengths for the horizontal and vertical axises, respectively. Each length is calculated as:
- %結果 ~LET 0
- %既定の~anchor ~LET %~query要素 の`既定の~anchor要素$
- %先祖~群 ~LET 次を満たす要素たちが成す集合 ⇒ ［ %既定の~anchor の先祖である ］~AND［ %~query要素 の`包含塊$の子孫である ］ 【この先祖, 子孫は、`~box~tree$に基づくであろう。】
- ~IF［ %~query要素 は %軸 において`~scroll調整が必要$である ］ ⇒ %先祖~群 を成す ~EACH( %先祖 ) に対し ⇒ ~IF［ %先祖 は`~scroll容器$である ］ ⇒ %結果 ~INCBY %先祖 の %軸 における`~scroll~offset$
- ［ %既定の~anchor, %先祖~群 ］を成す ~EACH( %広義-先祖 ) に対し ⇒ ~IF［ %広義-先祖 は追加的な~scroll調整の~subjectである （例：更なる~anchor位置決め, `張付き位置決め$, 等々により） ］ ⇒ %結果 ~INCBY %軸 における その調整
- ~RET %結果
~snapshotを得る精確な時機を定義する必要がある — それは、 各【描画】~frameごとに，~styleを計算し直す前に更新される。 ◎ Define the precise timing of the snapshot: updated each frame, before style recalc.
~scroll調整に対する暗黙な制約 ◎ Implied restrictions of scroll adjustment
短く言えば： 有位置な要素は、 その`位置^emは［ 異なる~scroll容器~内の~scroll可能な~anchor ］に依拠-可能になる一方で， その`~size^emは それに依存し得ない。 この制約は、［ ~scroll可能な要素の内容に対する実際のズラシは， ~UA内の別々な “組成-用~thread” において行われ、 ~CSSを成す残り（特に，~layout）は，その結果には直に依存し得ない所 ］で，“組成された~scrolling” を利用し続けることを許容する。 ◎ In short: a positioned element is able to have its position rely on a scrollable anchor in a different scroll container, but cannot have its size depend on that. This restriction allows "composited scrolling" to continue to be used, where the actual shifting of a scrollable element’s contents is done in a separate "compositing thread" in the UA, and the rest of the CSS (in particular, layout) can’t directly depend on its results.
~scroll調整~用に利用する~anchorを`一つ^em（`既定の~anchor要素$）に限るわけは、 このことによる — 複数の~anchor用に調整できた場合， 有位置な要素は，反対-側~用に異なる~anchorも利用でき、 その結果，どちらが~scrollされても~layoutが誘発されるようになる。 ◎ This is why only one anchor (the default anchor element) is used for scroll adjustment—if multiple anchors could be adjusted for, then a positioned element could use different ones for opposite sides, and trigger layout as a result of either of them scrolling.
位置~fallbackは、 ~scroll調整に依存するように`なり得る^em — `~sizing~prop$は`受容される~prop$なので、 それに伴い，~layoutもやり直され得る。 しかしながら，~fallback用には、 それは受容-可能である — 当の~scrollingは、［ ~UAが組成-用~threadから~scroll用の情報を受取る時間を経た後 ］における `1 ~frame後^emに起こることに因り。 このことは、 単純な位置~追跡には，該当しない — 当の有位置な要素が，~anchorに吸い付くものと意味されていた場合、 それを 1 ~frame背後へ回すと，利用者から はっきり可視になり, かなり不良な体験になる。 ◎ Position fallback *can* end up depending on scroll adjustment, which can cause re-layout since the sizing properties are accepted @position-try properties. However, it’s acceptable for fallback due to scrolling to happen a frame late, after the UA has had time to receive scrolling information from the compositing thread. This is not the case for simple position tracking—if the positioned element is meant to sit snug against the anchor, having it lag a frame behind is very user-visible, and a pretty bad experience.
有位置な要素の~sizeが~anchorの~scroll位置に依存するよう求まれる場合、［ 当の要素, ~anchor ］は，同じ~scroll容器の内側になければならない — それらが互いに相対的~scrollされることは，決してないよう。 ◎ If you want to have a positioned element’s size depend on an anchor’s scroll position, the positioned element must be inside of the same scroll container, so the two elements are never scrolled relative to each other at all.
3.5. 妥当性
`anchor$f 関数 %関数 は、 ~AND↓ を満たす場合に限り， `妥当な~anchor関数@ になる： ◎ An anchor() function is a valid anchor function only if all the following conditions are true:
- %関数 は、 `絶対的に位置され$た要素 %要素 の ある`~inset~prop$ %~prop にて利用されている。 ◎ It’s being used in an inset property on an absolutely-positioned element.
- %関数 の `anchor-side$t が物理-~keywordを指定している場合、 それは， %~prop が属する軸に属する。 （例えば， `left$vA を利用し得る~propは、 横~軸に属する`~inset~prop$ — `left$p, `right$p, これらと同じ側に対応する~flow相対な~prop — に限られる。） ◎ If its <anchor-side> specifies a physical keyword, it’s being used in an inset property in that axis. (For example, left can only be used in left, right, or a logical inset property in the horizontal axis.)
- `~target~anchor要素$( %要素, %関数 内に指定された `anchor-element$t ) ~NEQ ε ◎ The result of determining the target anchor element is not nothing when given the querying element as the element it’s used on, and the anchor specifier as the <anchor-element> value specified in the function.
これらいずれかの条件が満たされない場合、 %関数 は ⇒＃ ~fallback値（ 3 個目の引数）が指定されていた場合，それに解決される／ 他の場合，それを参照している宣言は`算出d値の時点で無効$になる ◎ If any of these conditions are false, the anchor() function resolves to its specified fallback value. If no fallback value is specified, it makes the declaration referencing it invalid at computed-value time.
3.6. 条件付きで隠す： `position-visibility^p ~prop
◎名 `position-visibility@p ◎値 `always$v | [ `anchors-valid$v || `anchors-visible$v || `no-overflow$v ] ◎初 `anchors-visible$v ◎適 `絶対的に位置され$た要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終要素の~anchor先は、 当の要素の位置決め用には適切ではなく， 単純に当の要素をまったく表示しない方が良いときもある。 `position-visibility$p は、 この事例に該当し得るための条件をいくつか供する。 ◎ There are times when an element’s anchors are not appropriate for positioning the element with, and it would be better to simply not display the element at all. position-visibility provides several conditions where this could be the case.
- `always@v
- この~propによる効果は無い （当の要素は、［ その~anchor先／自身が~overflowするか否か ］を問わず，表示される）。 ◎ This property has no effect. (The element is displayed without regard for its anchors or its overflowing status.)
- `anchors-valid@v
- 次が満たされるならば、 当の要素は`強く隠される$ ⇒ 当の要素に`要求される~anchor参照$のうち いずれかが`~target~anchor要素$に解決されない ◎ If any of the element’s required anchor references do not resolve to a target anchor element, the element is strongly hidden.
- `要求される~anchor参照@ とは何か： `anchor$f 関数のうち~fallback値を伴わないものか？ 既定の~anchor要素も ときには該当するのか？ ここには、 もっと詳細が必要である。 ◎ What is a required anchor reference? anchor() functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here.
- † “いずれか” に代えて “すべて” とするか？ どちらにも利用事例がある。 どちらにするか裁定を為すよう求まれるのか？ あるいは，どうにかそれを制御-可能にするか？ ◎ Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow?
- `anchors-visible@v
- 次が満たされるならば、 当の要素は`強く隠される$ ⇒ 当の要素の`既定の~anchor要素$ %~anchor は次を満たす ⇒ ［ %~anchor ~NEQ ε ］~OR［ %~anchor は`介在している要素により切取られて$いる ］ ◎ If the element has a default anchor element but the anchor element is clipped by intervening elements, this element is also strongly hidden.
- `no-overflow@v
- 次が満たされるならば、 当の要素は`強く隠される$ ⇒ 当の要素は、 `position-try$p を適用した後でも， 自身の`~insetで改変された包含塊$を~overflowする ◎ If the element overflows its inset-modified containing block, even after applying position-try, then the element is strongly hidden.
`絶対的に位置され$た【！有位置な】要素 %要素 の~anchor先【！~anchor要素】 %~anchor が `介在している要素により切取られて@ いるとは、 ~AND↓ を満たす要素【~box】 %先祖 が在ることをいう： ◎ An anchor element anchor is clipped by intervening elements relative to a positioned element abspos relying on it if＼
- %先祖 は %~anchor の先祖である
- %先祖 は %要素 の`包含塊$【を確立した~box】の子孫である
- %~anchor の`~ink~overflow矩形$は %先祖 により全部的に切取られている†
† この “切取られている” は、 次に挙げるいずれかに因り得る：
- %先祖 は`~scroll容器$である
- %先祖 の`~overflow切取n辺$で （［ `overflow:clip$p ／ `塗り封込め$ ］などにより） 切取られている
注記： このことは、 例えば， %要素 が~DOM内で %~anchor の隣にある【同胞である】場合、 それは，［ その`既定の~anchor要素$が~scrollされて外へ出た場合でも可視であり続ける ］ことを意味する — それは、 どのみち，同じ~scroll容器により切取られるので。 ◎ Note: This means that if an abspos is next to its anchor in the DOM, for example, it’ll remain visible even if its default anchor is scrolled off, since it’s clipped by the same scroller anyway.
この定義は、 `~view遷移＠~CSSVT$cite と整合する必要がある — それにも、 類似な概念が求まれる。 ◎ Make sure this definition of clipped is consistent with View Transitions, which wants a similar concept.
%~anchor も、 `position-visibility$p により`強く隠される$場合には， `介在している要素により切取られて$いるものとも見なされる。 ◎ anchor is also considered clipped by intervening elements if it is strongly hidden by position-visibility.
注記： これは、 “~anchorが連鎖する” 状況 — ある`絶対的に位置され$た要素 %A の~anchor先は別のそれ %B であり， %B にも~anchor先 %C がある状況 — において， %B が（ %C が~scrollされて外へ出たことに因り）この~propに因り隠された場合には、 %A も — 見当外れな所在に浮動させることなく — 隠されるようになることを確保する。 ◎ Note: This ensures that in a "chained anchor" situation, if the first abspos is hidden due to this property (due to its anchor being scrolled off), then another abspos using it as an anchor will also be hidden, rather than also floating in a nonsensical location.
所与の要素が `強く隠される@ とは、 当の要素は，［ 自身, その子孫~すべての `visibility$p が — それらの実際の値が何かに関わらず — `hidden^v であった ］かのように動作するようになることをいう。 ◎ Making an element strongly hidden makes it act as if it and all of its descendants were visibility: hidden, regardless of what their actual visibility value is.
4. ~anchorに基づく~sizing
`絶対的に位置され$る要素は、 自身の`~sizing~prop$において `anchor-size@f 関数を利用することにより，［ 1 個以上の`~anchor要素$の~size ］を参照rできる。 `anchor-size$f 関数は、 `length$t に解決される。 その利用が妥当になるのは、 `~sizing~prop$に限られる。 ◎ An absolutely-positioned element can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor elements. The anchor-size() function resolves to a <length>. It is only valid to be used in the sizing properties.
4.1. `anchor-size^f 関数
anchor-size() = anchor-size( `anchor-element$t? `anchor-size$t, `length-percentage$t? ) `anchor-size@t = `width$v | `height$v | `block$v | `inline$v | `self-block$v | `self-inline$v
`anchor-size$f 関数は、 `anchor$f と類似する — それは、［ `anchor-side$t が `anchor-size$t に置換される ］ことを除いて，同じ引数をとる。 ◎ The anchor-size() function is similar to anchor(), and takes the same arguments, save that the <anchor-side> keywords are replaced with <anchor-size>,＼
`anchor-size$t は、 反対-側にある 2 辺の距離を参照rする： ◎ referring to the distance between two opposing sides.
- `width@v
- `height@v
- これらの物理-~keywordは、 順に，`~target~anchor要素$の［ 横幅, 縦幅 ］を参照rする。 `anchor$f と違って、 軸が合致しなければならない制約は無い — 例えば、 `width: anchor-size(--foo height)$p は妥当になる。 ◎ The physical <anchor-size> keywords (width and height) refer to the width and height, respectively, of the target anchor element. Unlike anchor(), there is no restriction on having to match axises; for example, width: anchor-size(--foo height); is valid.
- `block@v
- `inline@v
- `self-block@v
- `self-inline@v
-
これらの論理-~keywordは、 次に依存して，いずれかの物理-~keywordに対応付けられる：
- ［ `self-block$v ／ `self-inline$v ］用には，当の要素の`書字~mode$
- ［ `block$v ／ `inline$v ］用には，当の要素の`包含塊$の`書字~mode$
`anchor-size$f 関数は、 `妥当な~anchor~size関数$を表現しているならば， （`~styleと~layoutの差挟み$を介して）`算出d値$の時点で［ `~target~anchor要素$の関連な 2 つの~border辺 — 横幅を参照するならば左端と右端／ 縦幅を参照するならば上端と下端 — の距離 ］を成す `length$t に解決される。 ◎ An anchor-size() function representing a valid anchor-size function resolves at computed value time (via style & layout interleaving) to the <length> separating the relevant border edges (either left and right, or top and bottom, whichever is in the specified axis) of the target anchor element.
4.2. 妥当性
`anchor-size$f 関数 %関数 は、 ~AND↓ を満たす場合に限り， `妥当な~anchor~size関数@ になる： ◎ An anchor-size() function is a valid anchor-size function only if all the following conditions are true:
- %関数 は、 `絶対的に位置され$た要素 %要素 の ある`~sizing~prop$にて利用されている。 ◎ It’s being used in a sizing property on an absolutely-positioned element.
- `~target~anchor要素$( %要素, %関数 内に指定された `anchor-element$t ) ~NEQ ε ◎ There is a target anchor element for the element it’s used on, and the <anchor-element> value specified in the function.
これらいずれかの条件が満たされない場合、 %関数 は ⇒＃ ~fallback値（ 3 個目の引数）が指定されていた場合，それに解決される／ 他の場合，それを参照している宣言は`算出d値の時点で無効$になる ◎ If any of these conditions are false, the anchor-size() function resolves to its specified fallback value. If no fallback value is specified, it makes the declaration referencing it invalid at computed-value time.
5. ~overflowの管理
~anchor位置決めは、 強力ではあるが，予測-不能にもなり得る。 `~anchor要素$は，~page上のどこにでも~~現れ得るので、 ある有位置な要素を特定0の流儀（当の~anchorの上や右端など）で位置した結果、 当の要素は，［ 自身の`包含塊$を~overflowする／ 部分的に~screen外に位置される ］かもしれない。 ◎ Anchor positioning, while powerful, can also be unpredictable. The anchor element might be anywhere on the page, so positioning an element in any particular fashion (such as above the anchor, or the right of the anchor) might result in the positioned element overflowing its containing block or being positioned partially off screen.
これを~~改善するため、 `絶対的に位置され$る要素は， `position-try-options$p ~propを利用して，［ 要素が初期~位置を~overflowする場合に，~UAが試行できる~option ］たちを参照rできる。 各~optionは、［ 位置決め／整列 ］~prop【宣言】たち （当の要素の既存の~styleから生成されるもの／ `position-try$at 規則~内に指定されたもの） が成す集合を与える。 各~optionは、 順に 1 つずつ当の要素に適用され，［ その結果，要素が自身の`包含塊$を~overflowしない最初のもの ］が~~採用されることになる。 ◎ To ameliorate this, an absolutely positioned element can use the position-try-options property to refer to several variant sets of positioning/alignment properties (generated from the element’s existing styles, or specified in @position-try rules) that the UA can try if the element overflows its initial position. Each is applied to the element, one by one, and the first that doesn’t cause the element to overflow its containing block is taken as the winner.
`position-try-order$p は、［ 何らかの宣言された順序に厳密に従うより，当の要素~用の空間をアリな限り広くとる方が重要な場合 ］に，追加的に［ それが定義する可用な空間に基づいて，~optionたちを~sortする ］ことを許容する。 ◎ position-try-order allows these options to additional be sorted by the available space they define, if it’s more important for the element to have as much space as possible rather than strictly follow some declared order.
5.1. ~fallback~optionの与え方： `position-try-options^p ~prop
◎名 `position-try-options@p ◎値 `none^v | [ [`dashed-ident$t || `try-tactic$t] | inset-area( `inset-area$tp ) ]# ◎初 `none^v ◎適 `絶対的に位置され$た要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 `位置~option~list@ を供する — それは、［ `絶対的に位置され$た~boxが その`~insetで改変された包含塊$を~overflowするときに試行する代替-位置決め~style ］たちからなり、 初期~時は，空とする。 ◎ This property provides a list of alternate positioning styles to try when the absolutely positioned box overflows its inset-modified containing block. This position options list is initially empty.
当の~listを成す（~commaで分離された）各~itemは、 別々な~optionを次に挙げるいずれかとして与える： ◎ Each comma-separated entry in the list is a separate option: either＼
- ある `position-try$at ~blockの名前 ◎ the name of a @position-try block,＼
- ある `try-tactic$t — それは、 当の要素の既存の算出d~styleに対する自動的な変形nを表現する ◎ or a <try-tactic> representing an automatic transformation of the element’s existing computed style.
各種 値の意味は： ◎ Values have the following meanings:
- `none@vOp
- この~propによる効果は無い。 当の要素の`位置~option~list$は空になる。 ◎ The property has no effect; the element’s position options list is empty.
- `dashed-ident$t
- 所与の名前を伴う `position-try$at 規則が在る場合、 それに結付けられた`位置~option$が`位置~option~list$に追加される。 ◎ If there is a @position-try rule with the given name, its associated position option is added to the position options list.
- そのような規則は無い場合、 この値による効果は無い。 ◎ Otherwise, this value has no effect.
- `try-tactic$t
-
当の要素の算出d~styleから`位置~option$を自動的に作成する — ［ 指定された~keywordに則って，当の`要素の~styleを入替える$ ］ことにより構築された`位置~option$を［ 当の要素の`位置~option~list$に追加する ］ことにより。 【！and adds it ...重複】 ◎ Automatically creates a position option from the element’s computed style, by swapping due to a try-tactic according to the specified keyword, and adding the constructed position option to the element’s position options list. and adds it to the position options list.
`try-tactic@t = flip-block || flip-inline || flip-start
- `flip-block@vOp
- `塊-軸$に関する~propたち （例： `margin-block-start$p と `margin-block-end$p ） の値どうしを入替える — 本質的に，`行内-軸$を挟んで鏡写しになるよう。 ◎ swaps the values in the block axis (between, for example, margin-block-start and margin-block-end), essentially mirroring across an inline-axis line.
- `flip-inline@vOp
- `行内-軸$に関する~propたちの値どうしを入替える — 本質的に，`塊-軸$を挟んで鏡写しになるよう。 ◎ swaps the values in the inline axis, essentially mirroring across a block-axis line.
- `flip-start@vOp
- ［ `始端$に関する~prop, `終端$に関する~prop ］ （例： `margin-block-start$p と `margin-inline-start$p ） の値どうしを入替える — 本質的に，［ `塊-始端$, `行内-始端$ ］にある隅から［ `塊-終端$, `行内-終端$ ］にある隅へ描かれる対角線を挟んで鏡写しになるよう。 ◎ swaps the values of the start properties with each other, and the end properties with each other (between, for example, margin-block-start and margin-inline-start), essentially mirroring across a diagonal drawn from the start-start corner to the end-end corner.
- 複数個の~keywordが与えられた場合、 それらによる変形nは，単独の`位置~option$を生産するよう構成される。 ◎ If multiple keywords are given, the transformations are composed in order to produce a single position option.
- `dashed-ident$t || `try-tactic$t
-
所与の 2 つの~optionによる効果を組合せる： ◎ Combines the effects of the previous two options:＼
- 所与の `dashed-ident^t を名前に伴う `position-try$at 規則は在る場合、［ その`位置~option$を当の要素の基底~styleに適用した結果 ］を［ 指定された `try-tactic$t に則って変形した結果 ］を当の要素の`位置~option~list$に追加する。 ◎ if there is a @position-try rule with the given name, then applies its position option to the element’s base style, transforms it according to the specified <try-tactic>, and then adds the result to the element’s position options list.
- 他の場合、 何もしない。 ◎ Otherwise, does nothing.
- inset-area( `inset-area$tp )
- もっぱら，所与の値を伴う `inset-area$p ~propで構成される`位置~option$を自動的に作成する。 ◎ Automatically creates a position option composed solely of an inset-area property with the given value.
`要素の~styleを入替える@ ときは、 所与の ( 要素 %要素, %二つの方向 ) に対し，次を遂行する — この~algoは、［ `try-tactic$t が指示する 2 個の（上下左右）方向 %二つの方向 に対応する %要素 の “同類” な~propどうしの値 ］を適切に入替えて得られる~styleたちが成す集合を返す： ◎ To swap due to a try-tactic the styles of an element el between two directions directions, returning a set of styles:
- %反対-向きか ~LET ~IS［ %二つの方向 は同じ軸に沿って反対-向きである ］ 【すなわち，`try-tactic$t は `flip-block$vOp か `flip-inline$vOp 】 ◎ If directions are opposites along the same axis, they are "opposing". Otherwise (when they are specifying different axises), they are "perpendicular".
- %~style群 ~LET %要素 の各`受容される~prop$の指定d値を決定した結果 ◎ Determine the specified values of the accepted @position-try properties on el, and let styles be the result.
-
%~style群 を成す各~propの値の中の各~変数 — `env$f 関数, 類似な代用~関数 — を`代用する$ ◎ Substitute variables, env() functions, and similar substitution functions in styles.
代用~関数~用に~hookするための用語を定義する必要がある — `var$f, `env$f, `random$f, 等々も対象になるよう。 ◎ Need to define a term to hook for substitution functions, to make sure we can hit var(), env(), random(), etc...
-
%~style群 を成す［ %二つの方向 に対応する “同類” な~prop ］どうしで値を入替える。 ◎ Swap the values of the styles between the associated properties corresponding to directions.
例えば，［ 上端, 左端 ］が入替えらている場合、［ `margin-top$p, `margin-left$p ］どうし, ［ `width$p, `height$p ］どうし, 等々で，互いの値を入替える。 ◎ For example, if "top" and "left" are being swapped, then the values of margin-top and margin-left are swapped, width and height are swapped, etc.
注記： 一部の~prop（`width$p や `align-self$p など）は、 %反対-向きか ~EQ ~T の下では，入替えられない — それ自身が， %二つの方向 に対応する互いに “同類” な~propを成すので。 それでも、 それらの値は，次の段により変更され得る。 ◎ Note: If the directions are opposites along the same axis, some properties (like width or align-self) wont' swap, since they’re associated with themselves across the two directions, but their values might be changed by the next step.
-
前~段にて入替えられた各~propの値を以下に従って改変する — ~propに応じて： ◎ Modify the values of the properties as they swap to match the new directions, as follows:
- `~inset~prop$： ◎ For inset properties,＼
-
各~値に利用された `anchor$f 関数~内に指定された側を変更する — 新たな方向においても，変更-前における相対的な関係性を保守するよう ◎ change the specified side in anchor() functions to maintain the same relative relationship to the new direction that they had to the old.
例えば，［ 上端, 左端 ］が入替えられている場合、 `margin-top:anchor(bottom)$p は， `margin-left:anchor(right)$p になる。 ◎ ↓
-
%反対-向きか ~EQ ~T の場合 ⇒ 各~値に利用された `percentage$t を ( `100%^v ~MINUS 元の百分率 ) に変更する ◎ If a <percentage> is used, and directions are opposing, change it to 100% minus the original percentage.
例えば，［ 上端, 下端 ］が入替えられている場合、 `margin-top:anchor(20%)$p は， `margin-bottom:anchor(80%)$p になる。 ◎ ↑ For example, if "top" and "left" are being swapped, then margin-top: anchor(bottom) will become margin-left: anchor(right). ◎ If "top" and "bottom" are being swapped, then margin-top: anchor(20%) will become margin-bottom: anchor(80%).
- `~sizing~prop$： ◎ For sizing properties,＼
-
各~値に利用された `anchor$f 関数~内に指定された軸を変更する — 新たな方向においても，変更-前における相対的な関係性を保守するよう ◎ change the specified axis in anchor-size() functions to maintain the same relative relationship to the new direction that they had to the old.
例えば，［ 上端, 左端 ］が入替えられている場合、 `width:anchor-size(width)$p は， `height:anchor-size(height)$p になる。 ◎ For example, if "top" and "left" are being swapped, then width: anchor-size(width) will become height: anchor-size(height).
- `自己-整列~prop$： ◎ For the self-alignment properties,＼
-
%反対-向きか ~EQ ~T の場合 ⇒ 指定された値が［ `self-position$t ／ `left^v ／ `right^v ］ならば、 それを変更する — 新たな方向においても，変更-前における相対的な関係性を保守するよう ◎ if directions are opposing, change the specified <self-position> (or left/right keywords), if any, to maintain the same relative relationship to the new direction that they had to the old.
例えば，［ 上端, 下端 ］が入替えられている場合、 `align-self:start$p は， `align-self:end$p になる。 ◎ For example, if "top" and "bottom" are being swapped, then align-self: start will become align-self: end.
しかしながら、 `align-self:center$p は，そのままであり続けることになる — どちらの方向も関係性は前と同じなので。 ◎ However, align-self: center will remain unchanged, as it has the same relationship to both directions.
類似に， `align-self:first$p は、 `self-position$t ではなく `baseline-position$t なので，そのままであり続ける。 ◎ Similarly, align-self: first baseline will remain unchanged, as it’s a <baseline-position> rather than a <self-position>.
- `inset-area$p ~prop： ◎ For inset-area,＼
-
値を変更する — 新たな方向においても，変更-前における［ `~inset区画~用の格子$を成す選定された［ ~row／~col ］たち ］の相対的な関係性を保守するよう ◎ change the value so that the selected rows/columns of the inset-area grid maintain the same relative relationship to the new direction that they had to the old.
例えば，［ 上端, 左端 ］が入替えられている場合、 `inset-area:left span-bottom$p は， `inset-area:top span-right^p になる。 ◎ For example, if "top" and "left" are being swapped, then inset-area: left span-bottom will become inset-area: top span-right.
- ~RET %~style群 ◎ Return styles.
5.2. ~fallback順序の決定-法： `position-try-order^p ~prop
◎名 `position-try-order@p ◎値 `normal^v | `try-size$t ◎初 `normal^v ◎適 `絶対的に位置され$た要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終この~propは、 `位置~option~list$を成す`位置~option$たちが試行されることになる順序を指定する。 ◎ This property specifies the order in which the position options list will be tried.
`try-size@t = most-width | most-height | most-block-size | most-inline-size
- `normal@vOd
- `position-try-options$p により指定された順序で`位置~option$を試行する。 ◎ Try the position options in the order specified by position-try-options.
- `most-width@vOd
- `most-height@vOd
- `most-block-size@vOd
- `most-inline-size@vOd
- まず、 `位置~option~list$を成す各`位置~option$に対し， 当の要素に その`位置~optionを適用する$ — その結果を成す~style群により指定される`~insetで改変された包含塊$の~sizeを見出す。 次に、 `位置~option~list$を これらの~size†に則って — 最~大なものが最初に来るよう — 安定に††~sortする。 ◎ For each entry in the position options list, apply a position option using that option to the element, and find the specified inset-modified containing block size that results from those styles. Stably sort the position options list according to this size, with the largest coming first.
- 【† 縦横どちらの寸法かは、 当の~keywordの名前により指示される — `most-width^v なら横幅, 等々。 】【†† すなわち，~sizeが同じものどうしは元の順序に従う。 】
例えば，次の~styleは、 初期~時は， ~popup~list【 `.list^css 】を その~anchor先【 `.anchor^css 】の下に位置させるが、 ~overflowする場合には，［ どの~optionが最も空間を与えるかに依存して， 当の~popup~listを~anchorの下に保つか上へ移動するか裁定する ］ことになる。 ◎ For example, the following styles will initially position the popup list below its anchoring button, but if that overflows, will decide whether to keep the popup list below the anchor or move it above, depending on which option gives it the most space.
.anchor { anchor-name: --foo; }
.list {
position: fixed;
position-anchor: --foo;
top: anchor(bottom);
left: anchor(left);
align-self: start;
position-try-options: --bottom-scrollable, flip-block, --top-scrollable;
position-try-order: most-height;
}
@position-try --bottom-scrollable {
align-self: stretch;
}
@position-try --top-scrollable {
top: 0;
bottom: anchor(top);
align-self: stretch;
}
【 `position-try-options$p に指定された各~optionのうち】［ `flip-block$vOp （これは，【`位置~option$を】自動-生成する）, `--top-scrollable^v ］は、 常に，同じ可用な縦幅を見出すことになる — どちらも `top:0$p （表示域の上端~辺）から `bottom:anchor(top)$p （~anchorの上端）へ縦方向に伸張するので。 なので、 それらは，指定された順序を維持することになる 【 `--bottom-scrollable^v は、それらより後になる】。 【初期~時の~styleが~overflowする場合，】 これは、 まず，要素を — その生来な縦幅を~~保ったまま — ~anchorに対し整列するよう【 `flip-block^v を】試行させるが （基底~style【 `align-self:start^p 】から自動-逆転された `align-self: end$p を利用して）、 それも~overflowする場合には，代わりに［ 空間を埋めるだけになり， ~scroll可能になる【各 `*-scrollable^v を試行する】よう~fall-backする ］ことになる。 ◎ The flip-block auto-generated option and the --top-scrollable option will always find the same available height, since both of them stretch vertically from top: 0 (the top edge of the viewport) to bottom: anchor(top) (the top of the anchor), so they’ll retain their specified order. This causes the element to first try to align against the anchor at its natural height (using align-self: end, auto-reversed from the base styles), but if that also causes overflow, it’ll fall back to just filling the space and being scrollable instead.
5.3. `position-try^p 略式~prop
◎名 `position-try@p ◎値 `position-try-order$tp? `position-try-options$tp ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 個々の~propを見よ ◎表終この略式~propは、 その下位prop［ `position-try-options$p, `position-try-order$p ］を設定する。 `position-try-order$tp が省略された場合、 `position-try-options$p ~propは，その初期~値に設定される。 ◎ This shorthand sets both position-try-options and position-try-order. If <'position-try-order'> is omitted, it’s set to the property’s initial value.
5.4. `position-try^at 規則
`position-try@at 規則は、 所与の名前を伴う `位置~option@ を定義する。 各`位置~option$は、 ある［ 位置決め~prop【および, その値】たちが成す集合 ］を指定する。 `位置~option$たちは、 `position-try-options$p を介して要素に適用されることになる。 ◎ The @position-try rule defines a position option with a given name, specifying one or more sets of positioning properties that will be applied to an element via position-try-options,
`position-try$at 規則の構文は： ◎ The syntax of the @position-try rule is:
@position-try `dashed-ident$t {
`declaration-list$t
}
導入部にて指定された `dashed-ident$t が，当の規則の名前になる。 同じ名前を伴う複数個の `position-try$at 規則が宣言された場合、 文書~順序で最後のものが優先される。 ◎ The <dashed-ident> specified in the prelude is the rule’s name. If multiple @position-try rules are declared with the same name, the last one in document order "wins".
`position-try$at 規則に `受容される~prop@ は、 次に挙げる`~prop$に限られる： ◎ The @position-try rule only accepts the following properties:
- `~inset~prop$ ◎ inset properties
- `~margin~prop$ ◎ margin properties
- `~sizing~prop$ ◎ sizing properties
- `自己-整列~prop$ ◎ self-alignment properties
- `position-anchor$p
- `inset-area$p
`declaration-list$t 内の~propに `!important^css を利用することは、 妥当でない。 その場合、 それを利用した~propは無効になるが， `property-try^at 規則をまるごと無効にすることはない。 ◎ It is invalid to use !important on the properties in the <declaration-list>. Doing so causes the property it is used on to become invalid, but does not invalid the @property-try rule as a whole.
`position-try$at 内の~propすべては、 `位置~fallback出自$の一部を成すものとして当の要素に適用される。 `位置~fallback出自@ は、 `作者~出自$と`~animation出自$の合間にある， この仕様にて新たに定義される【！新たな】`出自$である。 ◎ All of the properties in a @position-try are applied to the element as part of the Position Fallback Origin, a new cascade origin that lies between the Author Origin and the Animation Origin.
`~animation出自$と類似に，［ `revert$v ／ `revert-layer$v ］値の利用 （あるいは，当の~propを より~~低優先度な出自へ巻戻すことになる他の何か） は、［ 当の~propは`作者~出自$の一部を成していた ］かのように動作する （したがって、 `利用者~出自$へ巻戻すことになる）。 ◎ Similar to the Animation Origin, use of the revert or revert-layer values (or anything else that would rollback the property to the preceding origin) acts as if the property was part of the Author Origin. (Thus, it instead reverts back to the User Origin.)
注記： `position-try^at に`受容される~prop$は、［ ~boxの内容~区画を変更することなく， ~boxの~sizeと位置だけに影響する~prop ］たちが成す最~小な~groupを成す。 これは、 アリな挙動を大きく抑制し過ぎることなく，位置~fallbackの実装を有意に単純~化する。 `容器~query$に対する将来の拡張は、［ 要素が利用している位置~fallbackに基づいて，要素を~queryする ］ことを許容して，［ この制約された~listには許容されない，多くの事例 ］が取扱われるようになることを許容するものと期待される。 ◎ Note: The accepted @position-try properties are the smallest group of properties that affect just the size and position of the box itself, without changing its contents area. This significantly simplifies the implementation of position fallback, without reducing the possible behaviors overly much. It is expected that a future extension to container queries will allow querying an element based on the position fallback it’s using, allowing many cases not allowed by this restricted list to be handled.
注記： 異なる~anchorを利用している複数の要素が，同じ［ 各自の~anchor要素に相対的な~fallback位置決め ］を利用したいと求めるなら、 `anchor$f 内の `anchor-element$t を省略して， 代わりに `position-anchor$p 内に各~要素の~anchorを指定する。 ◎ Note: If multiple elements using different anchors want to use the same fallback positioning, just relative to their own anchor elements, omit the <anchor-element> in anchor() and specify each element’s anchor in position-anchor instead.
注記： 最も共通的な~fallback位置決め （有位置な要素を通常は~anchorの一方の側に置くが，必要なら反対-側へ移転する） は、 `position-try-options$p 内の~keywordを利用して — `position-try$at をまったく利用することなく — 自動的に行える。 ◎ Note: The most common types of fallback positioning (putting the positioned element on one side of the anchor normally, but flipping to the opposite side if needed) can be done automatically with keywords in position-try-options, without using @position-try at all.
5.5. 位置~fallbackの適用-法
有位置な要素は、［ 自身の`~insetで改変された包含塊$を~overflowする ］かつ［ その`位置~option~list$は空でない ］ときは， 要素~用の`位置~fallback~style群を決定する$ことにより， ~overflowを避ける~optionを見出すよう試みる。 ◎ When a positioned element overflows its inset-modified containing block, and has a non-empty position options list, it determines the position fallback styles for the element to attempt to find an option that avoids overflow.
これらの改変された~style群は，`~styleと~layoutの差挟み$を介して要素に適用されるので、 ~layoutや`使用~値$に依存するとしても，`算出d値$に影響する （その結果，遷移, 等々を誘発し得る）。 ◎ These modified styles are applied to the element via interleaving, so they affect computed values (and can trigger transitions/etc) even tho they depend on layout and used values.
各~要素は、 `最後の成功裡な位置~option@ を有する — それは、［ ある`位置~option$ ／ ε ］であり，初期~時は ε とする。 【この段落は、この訳による補完。】 ◎ ↑
`位置~optionを適用する@ ときは、 所与の ( 要素 %要素, `位置~option$ %新たな~style群 ) に対し： ◎ To apply a position option to an element el, given a position option new styles:
- %新たな~style群 を~cascadeの中へ，`位置~fallback出自$内に挿入する下で，~cascadeを解決する — その結果を利用して，［ %要素 の各~styleの`使用~値$を決定するに十分な~layout ］を遂行する ◎ With new styles inserted into the cascade in the position fallback origin, resolve the cascade, and perform enough layout to determine el’s used styles.
- ~RET %要素 の［ `使用~値$を伴う~style群 ］ ◎ Return el’s used styles.
要素 %要素 の `位置~fallback~style群を決定する@ ときは： ◎ To determine the position fallback styles of an element el:
- %基底~style群 ~LET %要素 にて利用されている現在の~style ◎ Let base styles be the current used styles of el.
-
%要素 の`位置~option~list$を成す ~EACH( %~option ) に対し： ◎ For each option in the position options list:
- %調整-済み~style群 ~LET `位置~optionを適用する$( %要素, %~option ) ◎ Let adjusted styles be the result of applying a position option option to el.
- %要素~矩形 ~LET ~sizeと位置が次に一致する矩形 ⇒ %調整-済み~style群 で~lay-outされたときの %要素 の`~margin~box$ ◎ Let el rect be the size and position of el’s margin box, when laid out with adjusted styles.
- %包含塊~矩形 ~LET ~sizeと位置が次に一致する矩形 ⇒ %要素 の`~insetで改変された包含塊$ ◎ Let cb rect be the size and position of el’s inset-modified containing block.
- %~offset ~LET %要素 は`~snapshot済み~scroll~offset$を［ 有するならば それ ／ ~ELSE_ ε ］ ◎ ↓
-
~IF［ %~offset ~NEQ ε ］： ◎ If el has a snapshotted scroll offset:
- %要素~矩形 ~SET %要素~矩形 を %~offset によりズラした結果 ◎ Set el rect to the result of shifting it by the snapshotted scroll offset.
-
%包含塊~矩形 ~SET 次を適用する下で， %要素 の`~insetで改変された包含塊$を計算し直した結果 ◎ Recalculate el’s inset-modified containing block,＼
- %要素 の各`~inset~prop$の `auto$v 以外の値を %~offset によりズラす ◎ with any non-auto inset values shifted by the snapshotted scroll offset.
-
%要素 の `inset-area$p は `none$vI 以外の値をとる場合は、 `~inset区画~用の格子$用の値［ `anchor(start)^v, `anchor(end)^v ］も %~offset によりズラす ◎ If el has a non-none inset-area value, then for the purpose of the preceding calculation, shift the value of anchor(start) and anchor(end) in the inset-area grid by the snapshotted scroll offset as well.
注記： 言い換えれば、 この~overflow計算の目的においては，［
`top$p: `anchor(bottom)^v; `bottom$p: `auto^vと `inset-area:bottom$p ］による結果の %包含塊~矩形 は同じになるべきである。 ◎ Note: In other words, top: anchor(bottom); bottom: auto; and inset-area: bottom; should result in the same IMCB for the purpose of these overflow calculations. ◎ Set cb rect to this result.
- ~IF［ %包含塊~矩形 の~sizeは、 どちらかの軸において負になったため， 0 に正された ］ ⇒ ~CONTINUE ◎ If cb rect was negative-size in either axis and corrected into zero-size, continue.
- ~IF［ %要素~矩形 は %包含塊~矩形 の中に全部的に包含されていない ］ ⇒ ~CONTINUE ◎ If el rect is not fully contained within cb rect, continue.
- ~RET %調整-済み~style群 ◎ Return adjusted styles.
- ~Assert： 前~段は~overflowを避ける`位置~option$を見出すことなく完遂した。 ◎ Assert: The previous step finished without finding a position option that avoids overflow.
- %~option ~LET %要素 の`最後の成功裡な位置~option$ ◎ ↓
- ~IF［ %~option ~NEQ ε ］ ⇒ ~RET `位置~optionを適用する$( %要素, %~option ) ◎ If el has a last successful position option, return the result of applying a position option, using that option, to el.
- ~RET %基底~style群 ◎ Return base styles.
注記： %要素 を~overflowしている子孫は、 この計算には影響しない — 影響するのは %要素 の`~margin~box$に限られる。 ◎ Note: Descendants overflowing el don’t affect this calculation, only el’s own margin box.
全部的な~layoutを経る間に， ある要素の~fallback~styleを決定したなら （あるいは、 それを利用しないものと決定したなら）、 この裁定は，~~後続の要素を~lay-outする際に変更されることはない。 ◎ During a full layout pass, once an element has determined its fallback styles (or determined it’s not using any), laying out later elements cannot change this decision.
例えば、 2 個の有位置な要素 %A, %B があって， %A は %B より前に~lay-outされるとする。 %B が~overflowして， %A の包含塊に~scrollbarを生じさせる結果になったとしても、 %A を~overflowさせない試みを やり直して， %A の~fallback~styleを決定し直す`ことはない^em。 （さもなければ、 ~~最善でも，~layoutの~costは指数関数的になり、 ~~最悪，循環依存になり，~layoutは決して決着しなくなる。） ◎ For example, say you have two positioned elements, A and B, with A laid out before B. If B overflows and causes A’s containing block to gain scrollbars, this does not cause A to go back and re-determine its fallback styles in an attempt to avoid overflowing. (At best, this can result in exponential layout costs; at worst, it’s cyclic and will never settle.)
言い換えれば、 ~layoutは “後戻りしない” 。 ◎ Layout does not "go backward", in other words.
`ResizeObserver$I ~eventが決定され, 送達された時点で 【~EACH( 要素 %要素 ) に対し，次を遂行するとする】： ◎ At the time that ResizeObserver events are determined and delivered:
- ~IF［ %要素 は`絶対的に位置され$ている ］ ⇒ %要素 の`最後の成功裡な位置~option$ ~SET 現在~利用している`受容される~prop$（および, その値）たちが成す集合 ◎ If an element el is absolutely positioned, set its last successful position option to the set of accepted @position-try properties (and values) that it’s currently using.
-
~ELIF［ %要素 の`最後の成功裡な位置~option$ ~NEQ ε ］~AND［ ~OR↓ ］ ◎ Otherwise, if el has a last successful position option and if any of the following are true of it, remove its last successful position option:
- %要素 は`絶対的に位置され$ていない ◎ el is not an absolutely positioned element
- %要素 の `position-try-options$p の算出d値は変化した ◎ el’s computed value for position-try-options has changed
- %要素 の `position-try-options$p により参照される `position-try$at 規則が［ 追加された／除去された／変異した ］ ◎ Any of the @position-try rules referenced by el’s position-try-options have been added, removed, or mutated.
…ならば： ◎ ↑
- %要素 の`最後の成功裡な位置~option$ ~SET ε ◎ ↑
- `位置~fallback~style群を決定する$( %要素 ) ◎ Then, determine the position fallback styles of el＼
- %要素 の`最後の成功裡な位置~option$ ~SET 現在~利用している`受容される~prop$（および, その値）たちが成す集合 ◎ and set its last successful position option to the set of accepted @position-try properties (and values) that it’s now using.
注記： この【最後の成功裡な位置~option】を［ 記録する／除去する ］時機は、 意図的に，`最後に記憶した~size$の扱いと一致するようにしてある。 ◎ Note: The timing of this recording/removal is intentionally identical to the treatment of last remembered sizes.
実装は、［ ~layout作業に要求され得る量が過度なとき，それを制限する ］ためとして，［ `位置~option~list$の長さに対し，実装定義な上限を課す ］ことを選んでもヨイ。 この上限は、 5 `以上^emにするモノトスル。 ◎ Implementations may choose to impose an implementation-defined limit on the length of position options lists, to limit the amount of excess layout work that may be required. This limit must be at least five.
例えば，次の~CSSは、 ある “~popover”† を，まずは［ ~buttonの下に位置させ, 左端と~buttonの左端を整列する ］ようと試みるが、 ~screenに収まらない場合には，順に［ 上, 左端 ］, ［ 下, 右端 ］, ［ 上, 右端 ］を試みるよう切替えることになる。 【† 何らかの動作（この例では、~button上の~hoverなど）に呼応して，他のものの上層に表示される様な~UI。】 ◎ For example, the following CSS will first attempt to position a "popover" below the element, but if it doesn’t fit on-screen will switch to being above; it defaults to left-aligning, but will switch to right-aligning if that doesn’t fit.
#myPopover {
position: fixed;
top: anchor(--button bottom);
left: anchor(--button left);
position-try-options: flip-inline, flip-block, flip-block flip-inline;
/*
~popoverの横幅を~buttonの横幅~以上にする
◎
The popover is at least as wide as the button
*/
min-width: anchor-size(--button width);
/*
~popoverの縦幅を［
~menu~item 2 個分
］以上にする
◎
The popover is at least as tall as 2 menu items
*/
min-height: 6em;
}
6. ~DOM~interface
6.1. `CSSPositionTryRule^I ~interface
`CSSPositionTryRule$I ~interfaceは、 `position-try$at 規則を表現する： ◎ The CSSPositionTryRule interface represents the @position-try rule:
[`Exposed$=Window]
interface `CSSPositionTryRule@I : `CSSRule$I {
readonly attribute `CSSOMString$ `name$m;
[`SameObject$, `PutForwards$=`cssText$m] readonly attribute `CSSPositionTryDescriptors$I `style$m;
};
[`Exposed$=Window]
interface `CSSPositionTryDescriptors@I : `CSSStyleDeclaration$I {
attribute `CSSOMString$ `margin@ptD;
attribute `CSSOMString$ `marginTop@ptD;
attribute `CSSOMString$ `marginRight@ptD;
attribute `CSSOMString$ `marginBottom@ptD;
attribute `CSSOMString$ `marginLeft@ptD;
attribute `CSSOMString$ `marginBlock@ptD;
attribute `CSSOMString$ `marginBlockStart@ptD;
attribute `CSSOMString$ `marginBlockEnd@ptD;
attribute `CSSOMString$ `marginInline@ptD;
attribute `CSSOMString$ `marginInlineStart@ptD;
attribute `CSSOMString$ `marginInlineEnd@ptD;
attribute `CSSOMString$ `margin-top@ptD;
attribute `CSSOMString$ `margin-right@ptD;
attribute `CSSOMString$ `margin-bottom@ptD;
attribute `CSSOMString$ `margin-left@ptD;
attribute `CSSOMString$ `margin-block@ptD;
attribute `CSSOMString$ `margin-block-start@ptD;
attribute `CSSOMString$ `margin-block-end@ptD;
attribute `CSSOMString$ `margin-inline@ptD;
attribute `CSSOMString$ `margin-inline-start@ptD;
attribute `CSSOMString$ `margin-inline-end@ptD;
attribute `CSSOMString$ `inset@ptD;
attribute `CSSOMString$ `insetBlock@ptD;
attribute `CSSOMString$ `insetBlockStart@ptD;
attribute `CSSOMString$ `insetBlockEnd@ptD;
attribute `CSSOMString$ `insetInline@ptD;
attribute `CSSOMString$ `insetInlineStart@ptD;
attribute `CSSOMString$ `insetInlineEnd@ptD;
attribute `CSSOMString$ `top@ptD;
attribute `CSSOMString$ `left@ptD;
attribute `CSSOMString$ `right@ptD;
attribute `CSSOMString$ `bottom@ptD;
attribute `CSSOMString$ `inset-block@ptD;
attribute `CSSOMString$ `inset-block-start@ptD;
attribute `CSSOMString$ `inset-block-end@ptD;
attribute `CSSOMString$ `inset-inline@ptD;
attribute `CSSOMString$ `inset-inline-start@ptD;
attribute `CSSOMString$ `inset-inline-end@ptD;
attribute `CSSOMString$ `width@ptD;
attribute `CSSOMString$ `minWidth@ptD;
attribute `CSSOMString$ `maxWidth@ptD;
attribute `CSSOMString$ `height@ptD;
attribute `CSSOMString$ `minHeight@ptD;
attribute `CSSOMString$ `maxHeight@ptD;
attribute `CSSOMString$ `blockSize@ptD;
attribute `CSSOMString$ `minBlockSize@ptD;
attribute `CSSOMString$ `maxBlockSize@ptD;
attribute `CSSOMString$ `inlineSize@ptD;
attribute `CSSOMString$ `minInlineSize@ptD;
attribute `CSSOMString$ `maxInlineSize@ptD;
attribute `CSSOMString$ `min-width@ptD;
attribute `CSSOMString$ `max-width@ptD;
attribute `CSSOMString$ `min-height@ptD;
attribute `CSSOMString$ `max-height@ptD;
attribute `CSSOMString$ `block-size@ptD;
attribute `CSSOMString$ `min-block-size@ptD;
attribute `CSSOMString$ `max-block-size@ptD;
attribute `CSSOMString$ `inline-size@ptD;
attribute `CSSOMString$ `min-inline-size@ptD;
attribute `CSSOMString$ `max-inline-size@ptD;
attribute `CSSOMString$ `placeSelf@ptD;
attribute `CSSOMString$ `alignSelf@ptD;
attribute `CSSOMString$ `justifySelf@ptD;
attribute `CSSOMString$ `place-self@ptD;
attribute `CSSOMString$ `align-self@ptD;
attribute `CSSOMString$ `justify-self@ptD;
attribute `CSSOMString$ `positionAnchor@ptD;
attribute `CSSOMString$ `position-anchor@ptD;
attribute `CSSOMString$ `insetArea@ptD;
attribute `CSSOMString$ `inset-area@ptD;
`name@m 属性は、 当の~at-規則の導入部にて宣言された名前を表現する。 ◎ Its name attribute represents the name declared in the rule’s prelude.
`style@m 属性は、 当の~at-規則の本体~内で宣言された~propたちを指定された順序で表現する。 ◎ Its style attribute represents the properties declared in the rule’s body, in the specified order.＼
その取得子~手続きは ⇒ ~RET コレが表現する `position-try$at ~at-規則~用の［ 次のようにされた`~CSS宣言~block$ ］を表現する `CSSPositionTryDescriptors$I ~obj ⇒＃ `算出-済みか$dB ~SET ~F, `読専か$dB ~SET ~F, `宣言~群$dB ~SET 当の規則の中で宣言された記述子たちが成す`指定d順序$による~list, `親~CSS規則$dB ~SET コレ, `所有者~node$dB ~SET ~NULL ◎ On getting, it must return a CSSPositionTryDescriptors object for the @position-try at-rule, with the following properties: computed flag • Unset readonly flag • Unset declarations • The declared descriptors in the rule, in specified order. parent CSS rule • The context object owner node
~styleと~layoutの差挟み
`~styleと~layoutの差挟み@ は、 ~layout処理nの間に下位tree上で~style更新が生じ得るようにして， 要素の`算出d値$を遡及的に更新するための技法である。 ◎ Style & layout interleaving is a technique where a style update can occur on a subtree during the layout process, resulting in retroactive updates to elements’ computed styles.
この概念は、 この仕様ではなく，おそらく `CSS-CASCADE-5$r にて定義されるべきだが、 その素描を参照rするために，ここにある。 ◎ This is not the correct spec for this concept, it should probably go in Cascade, but I need a sketch of it to refer to.
注記： `~styleと~layoutの差挟み$は、 すでに［ `容器~query$, `容器~query長さ単位$ ］で利用されている。 `10cqw^v の様な長さは、 `~query容器$の~sizeについての~layout情報を利用して`算出d長さ$へ解決される — したがって、 ~layoutが変化するに伴い当の容器の~sizeが変化するとき，`遷移＠~TRANSITION$を誘発し得る。 ◎ Note: Style & layout interleaving is already used with container queries and container query lengths. A length like 10cqw is resolved into a computed length using layout information about the query container’s size, which can thus trigger transitions when the container changes size between layouts.
`position-try$at に`受容される~prop$も，~fallbackを解決するときに差挟まれる （ `position-try$p を見よ）。 ◎ The accepted @position-try properties are also interleaved when resolving fallback (see position-try).
これは，明らかに もっと詳細を詰める必要があるが、 今の所は， “容器~query用にすでに行われている様に動作する” ことで足りる。 その挙動も未定義だが、 少なくとも，その挙動と（ある程度までは？）相互運用可能である。 ◎ Obviously this needs way more details filled in, but for now "act like you already do for container queries" suffices. That behavior is also undefined, but at least it’s interoperable (to some extent?).
~securityの考慮点
この文書に対し提起された~securityの課題は無い。 ◎ No Security issues have been raised against this document.
~privacyの考慮点
この文書に対し提起された~privacyの課題は無い。 ◎ No Privacy issues have been raised against this document.