CSS におけるカスケード法と継承 — CSS Cascading and Inheritance Level 5

2.1. 条件付き `import^at 規則

`~import条件@ は、［ ある媒体／ある特能の~support ］に依存する~importを許容する。 `~import条件$が無い下では，無条件に~importされる （`~import条件$の `media-query-list$t に値 `all^v を指定しても，同じ効果になる）。 `~import条件$が合致しない場合、 ~importされる~stylesheet内の規則は適用されない — ~importされる~stylesheetが，所与の`媒体~query$を伴う［ `media$at ／ `supports$at ］~blockで括られたときとちょうど同じく。 ◎ Import conditions allow the import to be media– or feature-support–dependent. In the absence of any import conditions, the import is unconditional. (Specifying all for the <media-query-list> has the same effect.) If the import conditions do not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in @media and/or @supports blocks with the given conditions.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

したがって~UAは、 `~import条件$が合致しない条件付き~importについては，~fetchしなくともヨイ。 加えて，~importによる~stylesheetの適用が `supports-condition$t により阻まれる場合、 その~stylesheetは（他の~linkを通して読込まれない限り）~fetchしないモノトスル — その~import規則に対応する `CSSImportRule$I の `styleSheet^m 属性は、 （他の~linkを通して読込まれる場合でも） ~NULL を返すモノトスル。 ◎ User agents may therefore avoid fetching a conditional import as long as the import conditions do not match. Additionally, if a <supports-condition> blocks the application of the imported style sheet, the UA must not fetch the style sheet (unless it is loaded through some other link) and must return null for the import rule’s CSSImportRule.styleSheet value (even if it is loaded through some other link).

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

`~import条件$は、 `media-query-list$t で与えられ， `媒体~query~list$として構文解析され, 解釈される。 `supports-condition$t は、 `[[~supports query]]^en 【`~supports~query$？】として構文解析され, 解釈される。 `supports-condition$t に代えて `declaration^t が与えられた場合、 `supports-decl$t として解釈した上で（すなわち，暗黙な丸括弧が~~追加される）, `supports-condition$t として扱うモノトスル。 ◎ The import conditions are given by <media-query-list>, which is parsed and interpreted as a media query list, and <supports-condition>, is parsed and interpreted as a [[supports query]]. If a <declaration> is given in place of a <supports-condition>, it must be interpreted as a <supports-decl> (i.e. the extra set of parentheses is implied) and treated as a <supports-condition>.

@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));

`~import条件$の評価とその全部的な構文は `Media Queries＠~MQ5$cite `MEDIAQ$r, および `CSS Conditional Rules＠~CSSCOND$cite `CSS-CONDITIONAL-3$r にて定義される。 ◎ The evaluation and full syntax of the import conditions are defined by the Media Queries [MEDIAQ] and CSS Conditional Rules [CSS-CONDITIONAL-3] specifications.

2.2. ~importによる~stylesheetの処理

同じ~stylesheetが文書~内の複数の箇所から~importまたは~linkされている場合、 ~UAは，それらの~linkをそれぞれが独立な~stylesheetを指しているかのように処理するモノトスル。 ◎ When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to an independent style sheet.

注記： これは、 資源の~fetch法に要件を課すものではない — ~stylesheetは［ ~CSSOMに どう反映されるか／ この仕様も含む各~仕様において どう利用されるか ］に課される要件になる。 複数箇所から~linkされている, あるいは複数回~importされたとしても，適切な~cache法の下で 一度だけ~stylesheetを~fetchすることは、 ごく適切な~UAのふるまいになる。 ◎ Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times.

~importされた~stylesheetが属する`出自$は、 それを~importした~stylesheetが属する`出自$と同じになる。 ◎ The cascade origin of an imported style sheet is the cascade origin of the style sheet that imported it.

~importされた~stylesheetの`環境~符号化法$は、 それを~importした~stylesheetの符号化法で与えられる。 `css-syntax-3$r ◎ The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [css-syntax-3]

2.3. ~CSS~stylesheetの~Content-Type

~host文書 %文書 に~importされる~stylesheetの処理は、 ~link先の資源 %資源 の実際の型【 “~MIME型” 】に依存する： ◎ The processing of imported style sheets depends on the actual type of the linked resource:

• ~OR↓ が満たされるならば、 型は `text/css^c であるものと扱われる：

  • %資源 には`~Content-Type~metadata$は無い
  • ［ %文書 は`過去互換~mode$下にある ］~AND［ ( %文書 の`生成元$doc, %資源 の`~URL$rsの`生成元$url ) は`同一-生成元$である ］
  ◎ If the resource does not have Content-Type metadata, the type is treated as text/css. ◎ If the host document is in quirks mode, and the host document’s origin is same origin with the linked resource response’s URL’s origin, the type is treated as text/css.
• 他の場合、 型は %資源 の`~Content-Type~metadata$により決定される。 ◎ Otherwise, the type is determined from its Content-Type metadata.

%資源 は、 その型に応じて［ `text/css^c ならば ~CSS~stylesheet／ ~ELSE_ `~network~error$ ］として解釈するモノトスル。 ◎ If the linked resource’s type is text/css, it must be interpreted as a CSS style sheet. Otherwise, it must be interpreted as a network error.

【 参考：上の処理~modelは、 ~HTML仕様に定義される~link型 `stylesheet$v のそれに倣うよう定義されている。 】

3.1. ~propの別名化

~propの名前は、 変更されることもある — ~vendor接頭辞~付き~propなど，しばらくの間 ~supportされた後に標準~化されるときなど。 互換性の理由から，元の名前も依然として~supportされる必要があるが、 新たな名前が選好される。 これを成遂げるため、 ~CSSでは，旧い構文を新たな構文の “別名にする” 2 つの仕方を定義する： ◎ Properties sometimes change names after being supported for a while, such as vendor-prefixed properties being standardized. The original name still needs to be supported for compatibility reasons, but the new name is preferred. To accomplish this, CSS defines two different ways of “aliasing” old syntax to new syntax.

`旧来の別名n@ （ `legacy name alias^en ） ◎ legacy name aliases

旧い~prop用の値の構文が，新たな~prop用のそれと一致する場合、 旧い~prop名は新たな~propの別名にされる — 構文解析-時点で，文字大小~対応付け演算の下で新たな~prop名に変換することにより。 この変換は、 ~CSSOMにおいても［ 文字列~引数／~prop~accessor ］に適用される — 旧い~prop名~向けの要請は、 透過的に新たな~prop名に転送される。 ◎ When the old property’s value syntax is identical to that of the new property, the two names are aliased with an operation on par with case-mapping: at parse time, the old property is converted into the new property. This conversion also applies in the CSSOM, both for string arguments and property accessors: requests for the old property name transparently transfer to the new property name instead.

例えば `old-name^p は `new-name^p 用の`旧来の別名n$である場合、 getComputedStyle(%el).oldName は `newName^c ~propに算出される~styleを返すことになり， el.style.setProperty(`old-name^l, `value^l) は `new-name^p ~propを `value^l に設定することになる。 ◎ For example, if old-name is a legacy name alias for new-name, getComputedStyle(el).oldName will return the computed style of the newName property, and el.style.setProperty("old-name", "value") will set the new-name property to "value".

`旧来の略式~prop@ （ `legacy shorthand^en ） ◎ legacy shorthands

旧い~propの構文が新たな~propの構文とは別個なものである場合、 旧い~prop名は，`略式~prop$の仕組みを利用して 新たな~prop名の別名にされる。 旧い~propは、 【新たな~propを下位propとする】 `旧来の略式~prop$であるものと定義され，その利用は`非推奨に^emされる。 それ以外の点では、 定例の略式と正確に同じに挙動する — ~CSSOMにより宣言が直列化されるときには，旧い名前を利用しないこと除いて。 `CSSOM$r ◎ When the old property has a distinct syntax from the new property, the two names are aliased using the shorthand mechanism. These shorthands are defined to be legacy shorthands, and their use is deprecated. They otherwise behave exactly as regular shorthands, except that the CSSOM will not use them when serializing declarations. [CSSOM]

例えば， `page-break-*^p ~propは、 `break-*^p ~prop用の`旧来の略式~prop$である （ `css-break-3$r `§ ~page分断~propの別名＠~CSSBREAK#page-break-properties$を見よ）。 ◎ For example, the page-break-* properties are legacy shorthands for the break-* properties (see CSS Fragmentation 3 § 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties).

`page-break-before$p が `always^v に設定された場合、 他の略式が行う様に構文解析-時点で `break-before$p に展開される。 同様に， `break-before^p が `page^v に設定された場合、 getComputedStyle(%el).pageBreakBefore を~callしたときには `always^l を返すことになる。 しかしながら， ~style~blockを直列化するとき （~CSSOM `§ ~CSS値の直列化-法＠~CSSOM1#serializing-css-values$を見よ） には、［ `page-break-before^p, `break-before^p ］のどちらが指定されようが，直列化する略式として `page-break-before^p ~propが選ばれることは決してなく、 常に `break-before^p が選ばれることになる。 ◎ Setting page-break-before: always expands to break-before: page at parse time, like other shorthands do. Similarly, if break-before: page is set, calling getComputedStyle(el).pageBreakBefore will return "always". However, when serializing a style block (see CSSOM § 6.7.2 Serializing CSS Values), the page-break-before property will never be chosen as the shorthand to serialize to, regardless of whether it or break-before was specified; instead, break-before will always be chosen.

3.2. すべての~propを設定し直す： `all^p ~prop

`all$p ~propは、［ `direction$p, `unicode-bidi$p ］を除く，`すべての~CSS~prop^emを設定し直す`略式~prop$である。 `~CSS全域~keyword$のみが，その値として受容される。 また、 `~custom~prop$ `css-variables-1$r は設定し直さない。 ◎ The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords. It does not reset custom properties [css-variables-1].

除かれた［ `direction$p, `unicode-bidi$p ］~propは、 実際には~markup~levelの特能であり， `作者~stylesheetには設定されるべきでない＠~CSSWM#text-direction$ （それらは、 ~UAが~supportしていない文書~言語を~styleするための~CSS~propとしてのみ存在する） `css-writing-modes-3$r 。 作者は、 ~HTMLの `dir$a 属性などの，適切な~markupを代わりに利用するべきである。 ◎ Note: The excepted CSS properties direction and unicode-bidi are actually markup-level features, and should not be set in the author’s style sheet. (They exist as CSS properties only to style document languages not supported by the UA.) Authors should use the appropriate markup, such as HTML’s dir attribute, instead. [css-writing-modes-3]

4.1. 宣言d値

所与の［ 要素, ~prop ］に対し、 各`~prop宣言$のうち要素に`適用される宣言$が，要素の~prop用の `宣言d値@ （ `declared value^en ）を供与する。 詳細は、 `§ 宣言の~filter法＠#filtering$ を見よ。 ◎ Each property declaration applied to an element contributes a declared value for that property associated with the element. See Filtering Declarations for details.

これらの値から、 `~cascade$による処理を経て， 1 個の “最優先な値” が~~選定される。 ◎ These values are then processed by the cascade to choose a single “winning value”.

4.2. ~cascaded値

`~cascaded値@ （ `cascaded value^en ）は、 `~cascade$の結果を表現する。 それは、 一群の`宣言d値$から，~cascadeを経て（`~cascadeの出力$の中で~sortされて）~~選定された値である。 `~cascadeの出力$が空になる場合、 `~cascaded値$は無い。 ◎ The cascaded value represents the result of the cascade: it is the declared value that wins the cascade (is sorted first in the output of the cascade). If the output of the cascade is an empty list, there is no cascaded value.

【 `~cascaded値$の概念には，その値を与えた “最優先な” 宣言も暗黙的に含まれ、 `§ ~cascade出自の巻戻し＠#revert$ など，この仕様の他所から参照される。 】

4.3. 指定d値

`指定d値@ （ `specified value^en ）は、 ~stylesheet作者が要素の~propに意図した値である。 多くの事例では，`~cascaded値$が`指定d値$になるが、 `~cascaded値$が無い場合は，`~default法$を通して`指定d値$が~~導出される — これにより、 どの要素のどの~propにも，`指定d値$の存在が保証される。 ~propの`~cascaded値$が`~CSS全域~keyword$である場合、 特別に取扱われ，`指定d値$を その~keywordから要求される値に設定する。 `§ 明示的な~default法＠#defaulting-keywords$ を見よ。 ◎ The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element. ◎ In many cases, the specified value is the cascaded value. However, if there is no cascaded value at all, the specified value is defaulted. The CSS-wide keywords are handled specially when they are the cascaded value of a property, setting the specified value as required by that keyword, see § 7.3 Explicit Defaulting.

【 各種~CSS仕様に現れる “%foo ~propに`指定された^em値” のような句は、 およそ指定d値を指すであろう。 】

4.4. 算出d値

`算出d値@ （ `computed value^en ）とは、 `指定d値$を，~prop定義~表tの “算出d値” 欄に従って解決した結果である。 一般に，指定d値は`継承$による伝播の際に絶対~化される。 ◎ The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance.

【 各種~CSS仕様に現れる “%foo ~propは 〜 に`算出される^em” のような句は、 およそ算出d値を指すであろう。 】【 単に “%foo ~propの値” と記された所は、 算出d値を意味する場合が多いと見受けられるが， 指定d値（あるいは使用~値）を意味する場合もあるかもしれない — あるいは、 どちらに解釈しようが結果は同じになる場合も， そのように記されることはあろう。 しかしながら，ときには、 その相違が有意になるにもかかわらず，文脈からも判明せず明確化されてないこともある。 】【 用語 `算出d値$（および`指定d値$, `使用~値$）は、 ~propの値を成し得る個々の成分にも利用される （例： `length$t の算出d値）。 そのような算出d値への解決-法は、 一般に，個々の値~型ごとに定義される （例： `length$t 型の算出d値は、 `算出d長さ$として定義される）。 言い換えれば、 ~propの算出d値は，一般に［ ~propの指定d値を成す各~成分に対し，当の成分の型に則って決定された算出d値 ］たちを組合せた結果になる。 】

注記： `継承$において親から子へ転送される値は、 `指定d値$ではなく`算出d値$である。 歴史的な理由から、 `getComputedStyle()$c 関数 `CSSOM$r は，`算出d値$を返すとは限らず，`使用~値$を返すこともある 【この関数が返す値は`解決d値$と呼ばれる】 。 `算出d値$は，抽象的な~data表現であり、 その定義は，~data表現を反映する — ~dataがどう直列化されるかではなく。 例えば、 直列化の規則には［ 構文解析の間に黙示された，ある種の値 ］を［ 結果からは省略することを許容しているもの ］が多いが、 そのような値であっても`算出d値$の一部を成す。 ◎ Note: The computed value is the value that is transferred from parent to child during inheritance. For historical reasons, it is not necessarily the value returned by the getComputedStyle() function, which sometimes returns used values. [CSSOM] Furthermore, the computed value is an abstract data representation: their definitions reflect that data representation, not how that data is serialized. For example, serialization rules often allow omitting certain values which are implied during parsing; but those values are nonetheless part of the computed value.

`算出d値$は、 要素に~propが`適用され$ないとしても，存在する。 しかしながら、 要素に`適用され$るかどうかに応じて，`算出d値$の決定-法が変化する~propもある。 ◎ The computed value exists even when the property does not apply. However, some properties may change how they determine the computed value based on whether the property applies to the element.

4.5. 使用~値

`使用~値@ （ `used value^en ）は、 `算出d値$を［ 文書の整形に利用される絶対的な理論的な値 ］に仕上げる計算を完了した結果である。 ◎ The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document.

【 各種~CSS仕様に現れる， “使用〜（ `used^en 〜）” のような句も、 同様な概念を表すと見受けられる。 （`この~siteの各~CSS仕様の日本語訳＠index.html#spec-list-css$に現れる語 “使用” は、 ~~原則的に，この意味と考えられる `used^en の対訳に限って利用している。 他の `used^en には、 別の対訳（ “利用される” など）が利用されるが、 中には，この意味の “使用” を指すものもあるかもしれない。 ） 】

例えば，宣言 `width:auto$p は、 要素の先祖の~layoutを知ることなしには，長さに解決し得ない。 したがって`使用~値$は `100px^v のような絶対的な長さになる一方で，`算出d値$は `auto^v になる。 `CSS2$r ◎ For example, a declaration of width: auto can’t be resolved into a length without knowing the layout of the element’s ancestors, so the computed value is auto, while the used value is an absolute length, such as 100px. [CSS2]

別の例として， `div^e は `break-before$p の算出d値に `auto^v をとり得るが、 その使用~値 `page^v を，その最初の子からの伝播を通して獲得する。 `css-break-3$r ◎ As another example, a <div> might have a computed break-before value of auto, but acquire a used break-before value of page by propagation from its first child. [css-break-3]

~propの`使用~値$は、 それが`適用され$ない型の［ 要素／~box ］においては無い。 ◎ If a property does not apply to this element or box type then it has no used value for that property.

例えば， `flex$p ~propの`使用~値$は、 `~flex駒$でない要素には無い。 ◎ For example, the flex property has no used value on elements that aren’t flex items.

4.6. 実際の値

`使用~値$は、 原則として，【具現化-用に】利用する準備が整った値であるが、 所与の環境においては直に用立てれないこともある。 例えば~UAは，整数幅の画素境界にしか描画できないかもしれず、 その場合，`使用~値$による幅を近似する必要も生じ得る。 あるいは，要素の~font~sizeは、 ~fontの可用性や `font-size-adjust$p ~prop値に基づいて，調整を要する。 `実際の値@ （ `actual value^en ）とは、 使用~値に そのような調整を施した後の値である。 ◎ A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property. The actual value is the used value after any such adjustments have been made.

【 `実際の値$は、 概念的には，~CSSが定義する~modelからは決定し得ない外部の要因も織り込んだ結果と捉えられる。 そのため、 この用語が他の~CSS仕様に現れることは，ほとんどない — ~CSSからは、 具体的な要件として定義し得ないので （実際の値に基づくような挙動は別として）。 】

注記： 要素の実際の値を調べれば、 文書の~layoutについて多くを知れる。 しかしながら、 すべての情報が実際の値に記録されるわけではない。 例えば， `page-break-after$p ~propの実際の値は、 要素の後に~page分断があるかどうかを反映しない。 同様に， `orphans$p の実際の値は、 要素の中の実際の orphan 行数を反映しない。 `下の表t＠#stages-examples$の例 (j), (k) を見よ。 ◎ Note: By probing the actual values of elements, much can be learned about how the document is laid out. However, not all information is recorded in the actual values. For example, the actual value of the page-break-after property does not reflect whether there is a page break or not after the element. Similarly, the actual value of orphans does not reflect how many orphan lines there is in a certain element. See examples (j) and (k) in the table below.

4.7. 例

4.8. 断片ごとの値の処理

ある種の~CSS特能は、 値の処理に対し，断片ごとに基づくように干渉し得る。 例えば、 `CSS-PSEUDO-4$r § 継承と `first-line^pe 疑似要素 を見よ — それは、 `first-line$pe 疑似要素の中の断片~用に継承を改める。 そのような事例において，個々の断片に異なる`指定d値$が与えられた所では、 `算出d値$に基づいて解決される他の~propの値（ `currentcolor$v や `em$u 単位など）は， `~box断片$ごとに解決される。 値に対する後続な処理は、 各~断片に対し，通常通り続行される。 ◎ Certain CSS features can interfere with value processing on a per-fragment basis. See for example CSS Pseudo-Elements 4 § 2.1.3 Inheritance and the ::first-line Pseudo-element which alters inheritance for fragments within the ::first-line pseudo-element. In such cases, where individual fragments are given different specified values, any values that resolve based on the computed value of other properties (such as currentcolor or em units) are resolved per box fragment. Subsequent value processing proceeds as normal in each fragment.

~APIのうち，値は（`~box断片$ごとではなく）`~box$ごとに一つしかないと見做すものは、 `~treeに留まる疑似要素$以外の`疑似要素$による効果を無視するモノトスル （例えば， `first-line$pe による~styleには、 `getComputedStyle()$c が返す値に対する効果は無い）。 ◎ APIs that assume a singular value per box (rather than per box fragment) must ignore the effects of non-tree-abiding pseudo-elements. (For example, ::first-line styles have no effect on the value returned by getComputedStyle().)

<div><span>一行目<br />二行目</span></div>
<div><span>一行目</span></div>
<div>一行目<br><span>二行目</span></div>
<style>
div { color: blue; }
div::first-line { color: yellow; }
span { border: thin solid currentcolor; }
</style>

6.1. ~cascadeの~sort順序

~cascadeにおいては、 `宣言$たちは，以下の判定基準に則って~sortされる — 先に挙げるものほど，後続する判定基準より優先される： ◎ The cascade sorts declarations according to the following criteria, in descending order of precedence:

`出自と重要度@cC （ `origin^en と `importance^en ） ◎ Origin and Importance

`宣言$が属する`出自$は、 ~~字義どおりの~~意味に基づく。 宣言が`~importantな宣言$になるかどうかは、 `!important$css を伴って宣言されているかどうかに基づく。 各種`出自$【と`~important$の有無が成す組】の優先順位は、 高いものから順に，次で与えられる： ◎ The origin of a declaration is based on where it comes from and its importance is whether or not it is declared with !important (see below). The precedence of the various origins is, in descending order:

1. 遷移~宣言 `css-transitions-1$r ◎ Transition declarations [css-transitions-1]
2. `~UA出自$に属する`~importantな宣言$ ◎ Important user agent declarations
3. `利用者~出自$に属する`~importantな宣言$ ◎ Important user declarations
4. `作者~出自$に属する`~importantな宣言$ ◎ Important author declarations
5. ~animation宣言 `css-animations-1$r ◎ Animation declarations [css-animations-1]
6. `作者~出自$に属する`通常の宣言$ ◎ Normal author declarations
7. `利用者~出自$に属する`通常の宣言$ ◎ Normal user declarations
8. `~UA出自$に属する`通常の宣言$ ◎ Normal user agent declarations

上の~listの中で，より先に挙げた`出自$に属する宣言が より後に挙げた`出自$に属する宣言よりも優先される。 ◎ Declarations from origins earlier in this list win over declarations from later origins.

【 ~importantの有無により，［ 作者／利用者／~UA ］宣言の優先順位は逆になる。 】

`文脈@cC （ `context^en ） ◎ Context

文書~言語は、 相異なる `~capsule化~文脈@ を~sourceとする`宣言$たちを混ぜ合わせる~~仕組みを供することもある — ~DOM【！`DOM$r】内の`~shadow~tree$を成す入子な`~tree文脈$など。 ◎ A document language can provide for blending declarations sourced from different encapsulation contexts, such as the nested tree contexts of shadow trees in the [DOM].

異なる`~capsule化~文脈$ %A, %B を~sourceとする宣言どうしを比較する場合、 %A が %B を入子にしているならば ⇒＃ `通常の宣言$どうしでは， %A を~sourceとする宣言が優先される／ `~importantな宣言$どうしでは， %B を~sourceとする宣言が優先される ◎ When comparing two declarations that are sourced from different encapsulation contexts, then for normal rules the declaration from the outer context wins, and for important rules the declaration from the inner context wins.＼

【 間接的に入子にしている場合、 推移的に定義されることになる。 】【 “~sourceとする” とは，具体的には、 当の宣言は［ その文脈から~linkされた／その文脈に埋込まれた ］~stylesheet内にある （あるいは、 その文脈~内の ある要素の`~style属性$内にある） ことを意味する。 】

この目的においては、 ~DOMを成す`~tree文脈$は，`~shadowも含めた~tree順序$で入子にされるものと見なされる。 ◎ For this purpose, [DOM] tree contexts are considered to be nested in shadow-including tree order.

注記： このことは、 実質的に，次を意味する ⇒ `~capsule化~文脈$に属する宣言のうち ⇒＃ `通常の宣言$は，外縁~文脈（ %A ）から容易に上書きできる既定を設定できる／ `~importantな宣言$は，外縁~文脈からは上書きし得ない要件を施行できる ◎ Note: This effectively means that normal declarations belonging to an encapsulation context can set defaults that are easily overridden by the outer context, while important declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context.

`要素に付された~style@cC （ `element attached styles^en ） ◎ Element-Attached Styles

要素に直に付された`宣言$ （`~style属性の内容＠~CSSSTYLEATTR#interpret$など） は、 他の宣言 — `選択子$を介して要素に対応付けられる~style規則に属する宣言 — のうち［ 同じ`重要度$cC（`通常の宣言$／`~importantな宣言$）を伴うもの ］より優先される。 `CSSSTYLEATTR$r を見よ。 ◎ Separately for normal and important declarations, declarations that are attached directly to an element (such as the contents of a style attribute) rather than indirectly mapped by means of a style rule selector take precedence over declarations the same importance that are mapped via style rule. ◎ See [CSSSTYLEATTR].

注記： 非~CSS呈示~用~hint（呈示~用~markupなど）は、 別々に取扱われる — `§ 非~CSS呈示~用~hint＠#preshint$を見よ。 ◎ Note: Non-CSS presentational hints (such as presentational markup) are handled separately, see § 6.5 Precedence of Non-CSS Presentational Hints.

`層@cC （ `layer^en ） ◎ Layers

各［ `出自$cC／`文脈$cC ］の中の`宣言$は、 ある`~cascade層$に明示的にアテガうこともできる。 この段の目的においては、 `未層@ （ `un-layered^en ／ `unlayered^en ）な宣言 — 明示的な`~cascade層$にアテガわれていない宣言 — は、 暗黙的な最終-層に追加される。 ◎ Declarations within each origin and context can be explicitly assigned to a cascade layer. For the purpose of this step, any declaration not assigned to an explicit layer is added to an implicit final layer.

~cascade層は、 （宣言と同様に）出現順序により~sortされる — `§ 層の順序-法＠#layer-ordering$を見よ。 異なる`~cascade層$に属する宣言どうしを比較するときは ⇒＃ `通常の宣言$どうしでは，より後の層に属する方が優先される／ `~importantな宣言$どうしでは，より前の層に属する方が優先される 【`通常の宣言$と`~importantな宣言$の比較は、`重要度$cCに従う。】 ◎ Cascade layers (like declarations) are sorted by order of appearance, see § 6.4.3 Layer Ordering. When comparing declarations that belong to different layers, then for normal rules the declaration whose cascade layer is latest in the layer order wins, and for important rules the declaration whose cascade layer is earliest wins.

注記： これは、［ `通常の宣言$, `~importantな宣言$ ］の優先順位と同じ~logicに従う — したがって、 どちらの設定に対しても， `!important$css ~flagは同じ “上書き” の目的を保守する。 ◎ Note: This follows the same logic used for precedence of normal and important origins, thus the !important flag maintains the same “override” purpose in both settings.

`詳細度@cC （ `specificity^en ） ◎ Specificity

各`宣言$は、 それが現れる~style規則の`選択子$と同じ詳細度を有する。 選択子の`詳細度$を算出する方法は、 `SELECT$r にて述べられる。 詳細度が高いものほど優先される。 ◎ The Selectors module [SELECT] describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. The declaration with the highest specificity wins.

`出現順序@cC （ `order of appearance^en ） ◎ Order of Appearance

文書~順序 【~stylesheet内に現れる順序】 において より後に現れる`宣言$ほど優先される。 この目的においては： ◎ The last declaration in document order wins. For this purpose:

• ~stylesheetたちは、 `最終-~CSS~stylesheet~list$と同じに順序付けられる。 ◎ Style sheets are ordered in [[final CSS style sheets]] order.
• `import$at 規則で~importされた~stylesheet内の宣言は、 その規則が その~stylesheetで代用されたかのように，順序付けられる。 ◎ Declarations from imported style sheets are ordered as if their style sheets were substituted in place of the @import rule.
• 大元の文書から独立に~linkされた複数の~stylesheet内の宣言は、 それらの~stylesheetが，~host文書~言語により決定される~link順で連結されたかのように扱われる。 ◎ Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language.
• `~style属性$ `CSSSTYLEATTR$r 内の宣言は、 その属性が現れた要素たちの文書~順序に則って順序付けられ，どの~stylesheetよりも後に配置される。 ◎ Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets. [CSSSTYLEATTR]

`~cascadeの出力@ は、 各~要素の各~prop用のすべての`宣言d値$を，この節に述べた規則に従って~sortした~listである （空にもなり得る）。 ◎ The output of the cascade is a (potentially empty) sorted list of declared values for each property on each element.

6.2. ~cascade法における出自

各~style規則には、 `出自@ （ `cascade origin^en ）がある — それは、 規則が~cascadeのどの段階に入るかを決定する【`出自と重要度$cCを見よ】。 ~CSSは、 中核的な`出自$として，次の 3 種を定義する： ◎ Each style rule has a cascade origin, which determines where it enters the cascade. CSS defines three core origins:

`作者~出自@ （ `author origin^en ） ◎ Author Origin

文書~言語の規約に則って，作者が~source文書~用に指定する~stylesheet。 例えば，~HTMLにおいては、［ 文書~内に含められる ］ことも［ 外部へ~linkされる ］こともある。 ◎ The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.

`利用者~出自@ （ `user origin^en ） ◎ User Origin

利用者は、 特定0の文書~用に，~style情報を指定することもある。 例えば、［ 利用者が~stylesheetを包含する~fileを指定する ］ことも［ ~UAが利用者~stylesheet（あるいは，そのように挙動するもの）を生成する~UIを供する ］こともある。 ◎ The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).

`~UA出自@ （ `user agent origin^en ） ◎ User-Agent Origin

適合~UAは、 既定の~stylesheet（あるいは，そのように挙動するもの）を適用するモノトスル。 ~UAの既定の~stylesheetは、 文書~言語の要素を［ 文書~言語にて一般に期待されている呈示を満たす仕方 ］で呈示するべきである （例：視覚系~browserは、 ~HTMLの `em^e 要素を~italic~fontで呈示するなど） — 例： `~HTMLの~UA~stylesheet＠~HTMLrendering#the-css-user-agent-style-sheet-and-presentational-hints$ `HTML$r。 ◎ Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See e.g. the HTML user agent style sheet. [HTML]

【 この仕様も含む~CSS仕様 全般にわたり、 この出自を指して， “〜`~levelの^em~style” と記されたり，（ “作者`~levelの^em…” , “~UA`~levelの^em…” 等々），更に省略して “利用者~style”, 等々と記されることが多い。 】

~CSSに対する拡張は、 次に挙げる追加的な`出自$も定義する： ◎ Extensions to CSS define the following additional origins:

`~animation出自@ （ `animation origin^en ） ◎ Animation Origin

CSS Animations `css-animations-1$r は、 その効果を稼働中に表現する， “~virtualな” 規則を生成する。 ◎ CSS Animations [css-animations-1] generate “virtual” rules representing their effects when running.

`遷移~出自@ （ `transition origin^en ） ◎ Transition Origin

CSS Transitions `css-transitions-1$r も、 その効果を稼働中に表現する， “~virtualな” 規則を生成する。 ◎ Like CSS Animations, CSS Transitions [css-transitions-1] generate “virtual” rules representing their effects when running.

6.3. ~important宣言： `!important^css

~CSSでは、 作者~stylesheetと利用者~stylesheetの力関係も~~考慮されている。 既定では、 作者~stylesheet内の規則が利用者~stylesheet内のそれを上書きし，利用者~stylesheet内の規則が~UAの既定の~stylesheet内の規則を上書きする。 `宣言$を`~importantな宣言$にして~cascadeにおける重みを増やすことにより，この優先順位を逆にできる。 ◎ CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet, which override those in the user-agent’s default style sheet. To balance this, a declaration can be marked important, which increases its weight in the cascade and inverts the order of precedence.

各`宣言$のうち，次に該当するものは、 `~importantな宣言@ （ “重要な宣言” ）とされ，他のすべては `通常の宣言@ とされる ⇒ `css-syntax-3$r にて定義されるとおりに `!important^css 注釈を伴う — すなわち、 その値【 `declaration-value$t 】を成す最後の 2 個の（空白でも~commentでもない）~tokenは，順に次で与えられている ⇒＃ 区切子~token【`delim-token$t】 `!^l, 識別子~token【`ident-token$t】 `important^l ◎ A declaration is important if it has a !important annotation as defined by [css-syntax-3], i.e. if the last two (non-whitespace, non-comment) tokens in its value are the delimiter token ! followed by the identifier token important. All other declarations are normal (non-important).

[hidden] { display: none !important; }

`~importantな宣言$は、 `通常の宣言$より優先される。 ［ 作者~stylesheet／利用者~stylesheet ］は`~importantな宣言$を包含してもヨイ。 `利用者~出自$に属する`~importantな宣言$は、 `作者~出自$に属する`~importantな宣言$を上書きする。 この~CSS特能は、 呈示に対する制御を［ 特別な要件（大きな~font, 色の組合n, 等々）がある利用者 ］に与えることで，文書の~accessibilityを改善する。 ◎ An important declaration takes precedence over a normal declaration. Author and user style sheets may contain important declarations, with user-origin important declarations overriding author-origin important declarations. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

`~importantな宣言$は、 その`出自$に関わらず，どの~animationよりも優先される。 これにより、 作者は，重要な事例で~animateされた値を上書きできるようになる （~animateされた値は、 通常は，他のすべての規則を上書きする）。 `css-animations-1$r ◎ Important declarations from all origins take precedence over animations. This allows authors to override animated values in important cases. (Animated values normally override all other rules.) [css-animations-1]

`~UA~stylesheet$も，`~importantな宣言$を包含してヨイ。 これらは、 他のすべての［ `作者~出自$／`利用者~出自$ ］に属する宣言を上書きする。 ◎ User-agent style sheets may also contain important declarations. These override all author and user declarations.

/* 
利用者による~stylesheet
◎
From the user’s style sheet
 */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* 
作者による~stylesheet
◎
From the author’s style sheet
 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }

6.4. ~cascade層

`出自$が作者~styleと利用者~styleの間に力関係を供するのと同じ仕方で、 `~cascade層@ は，同じ`出自$の中での力関係を組織化する有構造な仕方を供する。 単独の`~cascade層$の中の規則たちは、 一緒に~cascadeする — 層の外側にある~style規則は、 そこに差挟まれないよう。 ◎ In the same way that cascade origins provide a balance of power between user and author styles, cascade layers provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together, without interleaving with style rules outside the layer.

作者は、~style付けの懸念になる様々なもの — 要素~用の既定の~style, 第三者-主体による~library, ~theme, ~component, 上書き, その他 — に対し，それぞれを表現する~cascade層を作成して、 それらを明示的な仕方で順序し直せる — 各~層にまたがる競合を解決するために、 各~層の中の選択子や`詳細度$cCを改めることも，`出現順序$cCに依拠することもなく。 ◎ Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on order of appearance to resolve conflicts across layers.

audio {
  /* 
暗黙的な最終-層
— 詳細度 ( 0,0,1 )
◎
specificity of 0,0,1 - implicit (final) layer
 */
  display: flex;
}

@layer reset {
  audio[controls] {
    /* 
明示的な `reset^v 層
— 詳細度 ( 0,1,1 )
◎
specificity of 0,1,1 - explicit "reset" layer
 */
    display: block;
  }
}

名前を定義している`~at-規則$ — `keyframes$at や `font-face$at など — が`~cascade層$の内側で定義された場合も、 名前の衝突を解決するときに層~順序を利用する。 ◎ Name-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.

/* 
次の規則が層~順序を確立するので、
`override^v 層が優先される。
◎
establish the layer order, so the "override" layer takes precedence
 */
@layer framework, override;

@layer override {
  @keyframes slide-left {
    from { translate: 0; }
    to { translate: -100% 0; }
  }
}

@layer framework {
  @keyframes slide-left {
    from { margin-left: 0; }
    to { margin-left: -100%; }
  }
}

.sidebar { animation: slide-left 300ms; }

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer base {
  p { max-width: 70ch; }
}

@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

`layer-name@t = `ident$t [ '.' `ident$t ]*

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }

  @layer theme {
    p { color: #222; }
  }
}

@layer framework.theme {
  /* 
ここに置かれた~styleは、
`framework^v 層の内側にある `theme^v 層に追加されることになる。
◎
These styles will be added to the theme layer inside the framework layer
 */
  blockquote { color: rebeccapurple; }
}

@layer X.Y /* 
この規則が宣言する層の`名前$lyは `X.Y^v
 */ {
  ...
}

@layer X /* 
この規則が宣言する層の`名前$lyは `X^v （以下同様）
 */ {
  @layer Y /* `X.Y^v */
}

@layer A /* `A^v */ {
  @layer A /* `A.A^v */ {
    @layer B /* `A.A.B^v */ {
      ...
    }
  }

  @layer B /* `A.B^v */ { ... }

  @layer A.B /* 
`A.B^v ではなく `A.A.B^v
 */ { ... }

  @layer X.Y /* 
`X.Y^v ではなく `A.X.Y^v
（層 `A^v の中からは、
外側にある層 `X^v や その中の層を参照rできない）
 */ { ... }
}

@layer A.B /* 
~top-levelにあるので、
そのまま `A.B^v
 */

/* bootstrap-base.css */
/* 
各~下位-~fileを包装する【！無名】匿名~層
◎
unnamed wrapper layers around each sub-file
 */
@import url(base-forms.css) layer;
@import url(base-links.css) layer;
@import url(base-headings.css) layer;

/* bootstrap.css */
/* 
`base^v 層~内に組み込まれた内部的な各~名前は、
~accessから隠される。
◎
the internal names are hidden from access, subsumed in "base"
 */
@import url(bootstrap-base.css) layer(base);

/* author.css */
/* 
作者は、
`bootstrap.base^v 層には~accessできるが，【！無名】匿名~層の中へはできない。
◎
author has access to bootstrap.base layer, but not into unnamed layers
 */
@import url(bootstrap.css) layer(bootstrap);

/* 
`bootstrap^v 層に追加的な~styleを追加する：
◎
Adds additional styles to the bootstrap layer:
 */
@layer bootstrap {...}

/* 
`未層$な~styleは、
層~順序においては最後に来る
◎
unlayered styles come last in the layer order
 */
h1 { color: darkslateblue; }

@layer reset.type {
  strong { font-weight: bold; }
}

@layer framework {
  .title { font-weight: 100; }

  @layer theme {
    h1, h2 { color: maroon; }
  }
}

@layer reset {
  [hidden] { display: none; }
}

@media (min-width: 30em) {
  @layer layout {
    .title { font-size: x-large; }
  }
}

@media (prefers-color-scheme: dark) {
  @layer theme {
    .title { color: white; }
  }
}

@layer theme, layout;

@layer `layer-name$t? {
	`rule-list$t
}

@layer framework {
  h1, h2 { color: maroon; background: white;}

  @media (prefers-color-scheme: dark) {
    h1, h2 { color: red; background: black; }
  }
}

@layer `layer-name$t#;

@layer default, theme, components;
@import url(theme.css) layer(theme);

@layer default {
  audio[controls] {
    display: block;
  }
}

@layer default;
@import url(theme.css) layer(theme);
@layer components;

@layer default {
  audio[controls] {
    display: block;
  }
}

@import url(default.css) layer(default);
@layer theme;
@import url(components.css) layer(components);

@layer theme {
  audio[controls] {
    display: block;
  }
}

6.5. ~CSSによるものでない呈示~用~hintの優先順位

~UAは、 ~source文書の~markup内の呈示~用~hint†を尊守してもヨイ。 例えば `HTML$r における `bgcolor^a 属性や `s$e 要素。 文書~言語に基づく~style付けは，すべて、 対応する~CSS規則に翻訳した上で，次のいずれかの出自に属する規則として`~cascade$に入するモノトスル： ◎ The UA may choose to honor presentational hints in a source document’s markup, for example the bgcolor attribute or s element in [HTML]. All document language-based styling must be translated to corresponding CSS rules and enter the cascade as rules in either＼

• `~UA出自$ ◎ the UA-origin or＼

• `作者~呈示~用~hint出自@ — これは：

  • 定例の［ `~UA出自$と`作者~出自$ ］の合間にある，特別~目的な出自である。
  • `~cascade$の目的においては，独立な`出自$として扱われるが、 `revert$v ~keywordの目的においては， `作者~出自$の一部を成すものと見なされる （が、 `revert-layer$v ~keywordにおいては，そうでない）。 【したがって、`作者~出自$の中で利用される `revert$v は，`作者~呈示~用~hint出自$に属する規則も一緒に巻戻すことになる。】
  ◎ a special-purpose author presentational hint origin between the regular user origin and the author origin.＼ For the purpose of cascading this author presentational hint origin is treated as an independent origin; however for the purpose of the revert keyword (but not for the revert-layer keyword) it is considered part of the author origin.

文書~言語は、 そのような呈示~用~hintが，この どちらの`出自$に属するものとして~cascadeに入するかを定義してもヨイ — その場合、 ~UAは，それに則って挙動するモノトスル。 例えば，~SVGは、 その`呈示~属性$を`作者~出自$に対応付けている。 ◎ A document language may define whether such a presentational hint enters the cascade as UA-origin or author-origin; if so, the UA must behave accordingly. For example, [SVG11] maps its presentation attributes into the author origin.

【† 呈示~用~hint（ `presentational hint^en ） — 本来は~CSSが受持つべき，呈示~用の役割も担う（担っていた）~markup （参考：`~HTMLが定義する呈示~用~hint＠~HTMLrendering#presentational-hints$）。 これらの規則の`詳細度$cCは、 この仕様では定義されない — 過去においては、 詳細度 ( 0, 0, 0 ) になるものと定義されていたが。 したがって、 他が指定されない限り，詳細度で~sortされることもない （`作者~呈示~用~hint出自$は、 独立な出自を成すので，詳細度を定義する必要もない）。 】

注記： 呈示~用~hintのうち，`~UA出自$に属する規則として`~cascade$に入するものは、［ `作者~出自$／`利用者~出自$ ］に属する~styleで上書きできる。 `作者~呈示~用~hint出自$に属する規則として`~cascade$に入するものは、 `作者~出自$に属する~styleで上書きできるが、 `利用者~出自$に属する`~important$でない~styleからは，上書きできない。 ~host言語は、 これらを考慮した上で，呈示~用~hint用に適切な`出自$を選ぶべきである。 ◎ Note: Presentational hints entering the cascade as UA-origin rules can be overridden by author-origin or user-origin styles. Presentational hints entering the cascade as author presentational hint origin rules can be overridden by author-origin styles, but not by non-important user-origin styles. Host languages should choose the appropriate origin for presentational hints with these considerations in mind.

7.1. 初期~値

各~propには、 その~prop定義~表tにて，その `初期~値@ （ `initial value^en ）が定義される。 ~prop %P が`継承d~prop$でない, かつ所与の要素において %P の`~cascaded値$は無い場合、 その要素における %P の`指定d値$は %P の`初期~値$になる。 ◎ Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

7.2. 継承法

~prop値は `継承@ （ `inheritance^en ）により，親~要素から その各~子~要素へ伝播する。 要素の~propの `継承d値@ （ `inherited value^en ）は、 要素の親~要素の~propの`算出d値$で与えられる。 親~要素がない根~要素~用の`継承d値$は、 ~propの`初期~値$で与えられる。 ◎ Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. For the root element, which has no parent element, the inherited value is the initial value of the property.

継承は、 ~shadowを伴う~DOM~treeに対しては，`平坦~化された要素~tree$に対し演算する。 ◎ For a [DOM] tree with shadows, inheritance operates on the flattened element tree.＼

注記： すなわち，ある `slot$e 要素 %slot にアテガわれた要素は、 ~styleを — `~light~tree$の親から直にではなく — %slot から継承する。 ◎ This means that slotted elements inherit from the slot they’re assigned to, rather than directly from their light tree parent.＼

注記： 各 `疑似要素$は、 その定義に述べられる，`仮想の~tag列$ `CSS-PSEUDO-4$r に則って~prop値を継承する。 ◎ Pseudo-elements inherit according to the fictional tag sequence described for each pseudo-element. [CSS-PSEUDO-4]

一部の~propは、 その~prop定義~表tにて， `継承d~prop@ （ `inherited property^en ）であるものと定義される。 これは、 `~cascaded値$が無いときは，その値が`継承$により決定されることを意味する。 ◎ Some properties are inherited properties, as defined in their property definition table. This means that, unless the cascade results in a value, the value will be determined by inheritance.

【 所与の~propが継承されるか否かが，何に基づいて裁定されるかは、 `DESIGN-PRINCIPLES$r `§ ~CSS~propが継承されるかどうかについて適切な選択を為すこと＠~DESIGN-PRINCIPLES#css-inherited-or-not$ を見よ。 】

~propを明示的に継承させることもできる。 `inherit$v ~keywordを見よ。 ◎ A property can also be explicitly inherited. See the inherit keyword.

注記： 継承は，文書~treeに従うものであり、 生成される`~box~tree$における組み替え — 合間に`匿名~box$が挟まれるなど — からは影響されないことに注意。 ◎ Note: Inheritance follows the document tree and is not intercepted by anonymous boxes, or otherwise affected by manipulations of the box tree.

7.3. 明示的な~default法

以下では、 各種`~CSS全域~keyword$を定義する。 これらの値をとる~prop宣言は、 特定0の`~default法$の挙動を明示的に指定する。 `css-values-3$r にて指定される様に、 すべての~CSS~propは，これらの値を受容する。 ◎ Several CSS-wide property values are defined below; declaring a property to have these values explicitly specifies a particular defaulting behavior. As specified in CSS Values and Units [css-values-3], all CSS properties can accept these values.

~keyword［ `revert$v, `revert-layer$v ］は、 `~cascadeに依存する~keyword@ である — その利用は、 一部の文脈では制約され得る （他の`~CSS全域~keyword$は許容される一方で）。 ◎ The keywords revert and revert-layer are cascade-dependent keywords; some contexts may restrict their use while allowing the other CSS-wide keywords.

@layer one {
  div { height: 100px }
}

@layer two {
  div { height: 200px }
  div { height: revert-layer }
}

@layer two {
  div { height: 200px }
  div { block-size: revert-layer }
}

8.1. `CSSLayerBlockRule^I ~interface

`CSSLayerBlockRule$I ~interfaceは、 `~block構文$による `layer$at を表現する： ◎ The CSSLayerBlockRule interface represents the @layer block rule:

[`Exposed$=Window]
interface `CSSLayerBlockRule@I : `CSSGroupingRule$I {
  readonly attribute `CSSOMString$ `name$m;
};

`name@m 属性は、 当の~at-規則により宣言された`名前$ly（ `layer-name$t ）を表現する — 当の層が匿名な場合、 空~文字列になる。 ◎ Its name attribute represents the layer name declared by the at-rule itself, and is an empty string if the layer is anonymous.

@layer outer {
  @layer foo.bar { }
}

8.2. `CSSLayerStatementRule^I ~interface

`CSSLayerStatementRule$I ~interfaceは、 `一文~構文$による `layer$at を表現する： ◎ The CSSLayerStatementRule interface represents the @layer statement:

[`Exposed$=Window]
interface `CSSLayerStatementRule@I : `CSSRule$I {
  readonly attribute `FrozenArray$<`CSSOMString$> `nameList$m;
};

`nameList@m 属性は、 当の~at-規則により宣言された`名前$lyからなる~listを表現する — 各~名前は、 `CSSLayerBlockRule$I の `name$m 属性と同じ規則に従って正規化される。 ◎ Its nameList attribute represents the list of layer names declared by the at-rule, normalized following the same rule as the CSSLayerBlockRule’s name attribute.