1. 序論
~CSSの根底をなす設計原則の一つに`~cascading$( ~cascade処理規則, cascading )がある。 これにより、複数の~stylesheetを文書の呈示に波及させれるようになる。 同じ [要素, ~prop] の組合わせに対し,複数の宣言が与えられている下での値の競合は、何らかの方法で解決される必要がある。 ◎ One of the fundamental design principles of CSS is cascading, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved.
逆に、 [要素, ~prop] の組合わせに値を設定する宣言が無い場合についても,解決される必要がある。 この場合、値は,`継承$や~propの`初期値$を通して見出される。 ◎ The opposite problem arises when no declarations try to set a the value for an element/property combination. In this case, a value is be found by way of inheritance or by looking at the property’s initial value.
`~cascading$と`~default法$を経ることにより,入力に与えられた一連の宣言から、各~要素の各~prop用の`指定値$が出力される。 ◎ The cascading and defaulting process takes a set of declarations as input, and outputs a specified value for each property on each element.
この仕様は、文書~内のすべての要素~上のすべての~propについて,それぞれの指定値を見出すための規則を述べる。 頁~文脈およびその~margin~boxの下で,指定値を見出すための規則は、 `CSS3PAGE$r にて述べられる。 ◎ The rules for finding the specified value for all properties on all elements in the document are described in this specification. The rules for finding the specified values in the page context and its margin boxes are described in [CSS3PAGE].
1.1. ~module間の相互作用
この節は規範的である。 ◎ This section is normative.
この~moduleは、 `CSS21$r の 6 章にて定義される[ ~prop値のあてがわれ方, ~cascading, 継承 ]用の規則を置換し, それを拡張する。 ◎ This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in [CSS21] chapter 6.
他の~CSS~moduleは、ここに定義される構文と特色機能の一部の定義を伸張するかもしれない。 例えば Media Queries Level 4 仕様は、この~moduleと組合せる下で,この仕様に利用される `media-query$t 値~型の定義を伸張する ◎ Other CSS modules may expand the definitions of some of the syntax and features defined here. For example, the Media Queries Level 4 specification, when combined with this module, expands the definition of the <media-query> value type as used in this specification.
この仕様の目的においては、`~text~node$は、それに結付けられている`要素$の子~要素であり,~propたちの全部的な集合を備えているものとする。 ~text~nodeは 選択子の対象になれないので、その算出値すべては,`~default法$を通してあてがわれる。 ◎ For the purpose of this specification, text nodes are treated as element children of their associated element, and possess the full set of properties; since they cannot be targetted by selectors all of their computed values are assigned by defaulting.
2. ~stylesheetの~import法: `import^at 規則
`import@at 規則により,利用者は 他の~stylesheetから~style規則を~import(取り込む)できるようになる。 `import$at 規則が妥当な~stylesheetを指しているならば、 ~UAは、次の二つの例外を除き, `import$at 規則の場所にその内容が記されていたかのように扱わ~MUST: ◎ The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule, with two exceptions:
- ある特色機能が,適用されるのは[ 特定0の~stylesheetのみであり,~importされたそれには適用されない ]ものと明示的に定義している場合( `namespace$at 規則など)、それは~importされた~stylesheetには適用されない。 ◎ If a feature explicitly defines that it only applies to a particular stylesheet, and not any imported ones (such as the @namespace rule), then it doesn’t apply to the imported stylesheet.
- ある特色機能が,~stylesheet内の複数の構成子に相対的な位置に依拠する場合( `else$at 規則は,別の`条件付き~group規則$に後続するものとする要件や、 `charset$at 規則には,他の内容が先行してはならないとする要件など)、それが適用されるのは,同じ~stylesheet内の構成子たちの合間に限られる。 ◎ If a feature relies on the relative position of two or more constructs in a stylesheet (such as the requirement that an @else rule follow another conditional group rule, or the requirement that @charset must not have any other content preceding it), it only applies between constructs in the same stylesheet.
例えば,[ import された~stylesheetからの~style規則 ]の中の宣言は、それが~stylesheetの中の `import$at の地点にそのままの形で記されたかのように,~cascadeと相互作用する。 同様に,[ `視野が絞られ$た~stylesheetの中に~importされた~stylesheet ]内の~style規則は、同じように視野が絞られる。 ◎ For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import. Similarly, style rules in a stylesheet imported into a scoped stylesheet are scoped in the same way.
~stylesheet内では、どの `import$at 規則も, `charset$at を除く 他のすべての at-規則/~style規則よりも,前に位置してい~MUST。 ( `charset$at については,存在するならば~stylesheetの先頭に位置してい~MUST)。 さもなければ `import$at 規則は無効とされる。 `import$at の構文は次で与えられる: ◎ Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid. The syntax of @import is:
@import [ `url$t | `string$t ] [ supports( [ `supports-condition$t | `declaration$t ] ) ]? `media-query-list$t? ;
`url$t / `string$t は、~importされることになる~stylesheetの~URLを与える。 `~import条件@ と総称される,任意選択の[ [ `supports-condition$t | `declaration$t ], および `media-query-list$t ]は、その~stylesheetが どのような条件の下で適用されるかを言明する。 ◎ where the <url> or <string> gives the URL of the style sheet to be imported, and the optional [<supports-condition>|<declaration>] and <media-query-list> (collectively, the import conditions ) state the conditions under which it applies.
次の 条件付き `import^at 規則 は、~UAが `display$p: `flex^v を`~supportする$場合にのみ~stylesheetを読み込み, 表示域~横幅が `400px^v 以下の 携帯機器( `handheld^en )に対してのみ~stylesheetを適用する: ◎ The following conditional @import rule only loads the style sheet when the UA supports display: flex, and only applies the style sheet on a handheld device with a maximum viewport width of 400px.
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);
`string$t が供されている場合、それは,同じ引数を伴う1個の `url$t として解釈され~MUST。 ◎ If a <string> is provided, it must be interpreted as a <url> with the same value.
次の 2 行( `url$f によるものと, 文字列そのままのもの)は、意味的に等価な `import$at 構文になる: ◎ The following lines are equivalent in meaning and illustrate both @import syntaxes (one with url() and one with a bare string):
@import "mystyle.css"; @import url("mystyle.css");
2.1. 条件付き `import^at 規則
import は, `~import条件$により,[ 媒体 / 特色機能~support ]依存にすることもできる。 `~import条件$ が不在の下では,無条件に~importされる(その `media-query-list$t 用の値 `all^v の指定も,同じ効果になる)。 `~import条件$が合致しない場合、~importされる~stylesheet内の規則は適用されない — import された~stylesheetが,所与の媒体~queryを伴う[ `media$at / `supports$at ]~blockで括られたときとちょうど同じ様に。 ◎ The 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$at 規則を媒体~依存に仕立てる例を以下に示す: ◎ The following rules illustrate how @import rules can be made media-dependent:
@import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import url("narrow.css") handheld and (max-width: 400px);
~UAは従って, `~import条件$が合致しない条件付き~importについては、~fetchingなしに済ませられる。 加えて、~importによる~stylesheetの適用が `supports-condition$t により阻まれる場合には、その~stylesheetを(他の~linkを通して読込まれるのでない限り)~fetchしてはならず、その~import規則に対応する `CSSImportRule.styleSheet^c 値は,(他の~linkを通して読込まれる場合でも) ~NULL を返さ~MUST。 ◎ 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).
作者が、より新しい~UAの~network処理能に響かせることなく,旧来の~UAに~fallback規則を供する方法を,次の規則に示す: ◎ The following rule illustrates how an author can provide fallback rules for legacy user agents without impacting network performance on newer user agents:
@import url("fallback-layout.css") supports(not (display: flex)); @supports (display: flex) { ... }
`media-query@t は、 `media_query_list$P 生成規則に対応し,`媒体~query$として解釈される。 `supports-condition@t は、 `supports_condition$P 生成規則に対応し, `supports$at 条件として解釈される。 `supports-condition$t に代わって `declaration@t ( `declaration$P 生成規則)が与えられた場合、 `supports_declaration_condition$P 生成規則として解釈された上で(すなわち,暗黙の丸括弧が追加される), `supports-condition$t として扱われ~MUST。 ◎ A <media-query> corresponds to the media_query_list production and is interpreted as a media query, and a <supports-condition> corresponds to a supports_condition production and is interpreted as an @supports condition. If a <declaration> (a declaration production) is given in place of a <supports-condition>, it must be interpreted as a supports_declaration_condition production (i.e. the extra set of parentheses is implied) and treated as a <supports-condition>.
例えば、次の二行は等価になる: ◎ For example, the following two lines are equivalent:
@import "mystyle.css" supports(display: flex); @import "mystyle.css" supports((display: flex));
`~import条件$の評価とその全部的な構文は Media Queries `MEDIAQ$r, および CSS Conditional Rules `CSS3-CONDITIONAL$r にて定義される。 ◎ The evaluation and full syntax of the import conditions are defined by the Media Queries [MEDIAQ] and CSS Conditional Rules [CSS3-CONDITIONAL] specifications.
2.2. ~importによる~stylesheetの処理
同じ~stylesheetが文書~内の複数の場所から~importまたは~linkされている場合、 ~UAは,それらの~linkをそれぞれが独立する~stylesheetを指しているかのように処理し~MUST。 ◎ 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.
注記: これは資源の~fetchingに要件を課すものではない。 ~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 origin of an imported style sheet is the origin of the style sheet that imported it.
~importされた~stylesheetの`環境~符号化法$は、それを~importした~stylesheetの符号化法で与えられる。 `CSS3SYN$r ◎ The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [CSS3SYN]
2.3. ~CSS~stylesheetの Content-Type
~importされた~stylesheetの処理は、~link先の資源の実際の型【媒体~型】に依存する — 型は、次にしたがって決定される:
- ~host文書が`過去互換~mode$下にある, かつ ~host文書と~importされた~stylesheetは`同一生成元$である場合の型は、 `text/css^c 。
- 他の場合、資源に Content-Type ~metadata が伴われているならば,型は その~metadataにより決定される。
- 他の場合の型は、 `text/css^c 。
~link先の資源の型が `text/css^c である場合、~CSS~stylesheetとして解釈され~MUST。 他の場合、~network~errorとして解釈され~MUST。 ◎ 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.
3. 略式~prop
作者が数種の~propの値を単独の~propで一括して指定できるようにするため、一部の~propは `略式~prop@ ( `shorthand^en )とされている。 `略式~prop$は、そのすべての 冗長形 `下位prop@ ( `longhand sub-property^en, または, 略して[ `longhand^en / `sub-property^en ])を,その場で展開されたかのように設定する。 ◎ Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.
`略式~prop$から値が省略されて “消失した” それぞれの`下位prop$には、他から定義されない限り,その`初期値$があてがわれる。 ◎ When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.
注記: すなわち,`略式~prop$宣言は常に、そのすべての `下位prop$を設定する — それらが明示的に設定されなくても。 不用意に`略式~prop$を利用した場合,一部の`下位prop$を気付かないうちに再設定することになりかねないが、注意して利用すれば,気付かないうちに他の~sourceから~cascadeされた`下位prop$を再設定して,“白紙状態” に戻すことを保証してくれる。 ◎ This means that a shorthand property declaration always sets all of its sub-properties, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties. Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources.
例えば, `background-color$p: `green^v; ではなく `background$p: `green^v; と記すことにより、以前のどこかの宣言で 背景に `background-image$p による画像が設定されているかもしれないときでも,背景色だけにされるように上書きできる。 ◎ For example, writing background: green rather than background-color: green ensures that the background color overrides any earlier declarations that might have set the background to an image with background-image.
【 “上書き” — `~cascading$における`出現順序$による順位付けの結果として,そうなる(より高次の順位付けの宣言値(例えばより`詳細度$が高いもの)まで上書きするわけではない)。 】
例えば,CSS Level 1 の `font$p ~propは、 `font-style$p, `font-variant$p, `font-weight$p, `font-size$p, `line-height$p, `font-family$p を一括して設定するための,`略式~prop$である。 したがって,次の様な複数の宣言は: ◎ For example, the CSS Level 1 font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family all at once. The multiple declarations of this example:
h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; }
次の様に書き直せる ◎ can therefore be rewritten as
h1 { font: bold 12pt/14pt Helvetica }
`font$p に対する新たな`下位prop$が更に導入されれば、略式~prop宣言は,それらも その初期値に再設定することになる。 ◎ As more font sub-properties are introduced into CSS, the shorthand declaration resets those to their initial values as well.
【 次の様な場合もあることに注意: `border-width$p のような~propは、略式~prop `border$p の下位propであると同時に,下位propに `border-top-width$p, `border-left-width$p, … 等々を持つ略式~propでもある。 この様な場合の `border$p の “下位prop” は、連鎖的に辿った末端の下位propを指しているように見受けられる — が、この場合の “中間” の~prop(この例では `border-width$p 等々)が,下位propに[含まれる/含まれない]のどちらに定義されているのかは、はっきりしない — どちらに解釈したとしても,~cascadeに現れる結果は変わらないと見受けられるので(末端の下位propに限定する必要がある所では,その旨を付記した方が誤解は少ないであろう)。 あるいは、そうなることを利用して,意図的に曖昧に定義されているように思われる。 実際、何が[ 略式~prop/下位prop ]と見なされるかは,実装にも依存する — 仕様が拡張されて、それまでは末端の~propであったものが,より細分化された下位propを持つ様になることもあるので(例えば `overflow$p ~propに対する `overflow-x$p, `overflow-y$p )。 】
一部の`略式~prop$は、その`下位prop$の値に直には対応しないような,異なる構文や特別な~keywordを持ち得る(そのような`略式~prop$は,その値の展開を明示的に定義することになる)。 ◎ In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties. (In such cases, the shorthand will explicitly define the expansion of its values.)
また、略式~propにおいて `再設定のみ@ になる`下位prop$もある: それは、他の`下位prop$と同様に,略式~propの指定の中で値が指定されていない場合は,初期値に再設定されるが、それ以外の値に設定する構文が,略式~propに備わっていないものである(下記の `~CSS全域~keyword$は別として)。 例えば、 `border$p 略式~propは, `border-image$p をその初期値 `none^v に再設定するが、それ以外の値に設定する構文を備えていない。 `CSS3BG$r ◎ In other cases, a property might be a reset-only sub-property of the shorthand: Like other sub-properties, it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the border shorthand resets border-image to its initial value of none, but has no syntax to set it to anything else. [CSS3BG]
`略式~prop$が いずれかの`~CSS全域~keyword$ `CSS3VAL$r として指定されている場合、そのすべての`下位prop$は,`再設定のみ$のものも含め,その~keywordに設定される。 (これらの~keywordは、略式~propに限らず,単独の宣言の中で他の値と組合せれないことに注意。) ◎ If a shorthand is specified as one of the CSS-wide keywords [CSS3VAL], it sets all of its sub-properties to that keyword, including any that are reset-only sub-properties. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)
`略式~prop$を `!important$css として宣言することは、そのすべての`下位prop$を `!important$css として宣言することに等価になる。 ◎ Declaring a shorthand property to be !important is equivalent to declaring all of its sub-properties to be !important.
3.1. 別名化
~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の別名にされる — 構文解析-時点で,文字大小対応( `case-mapping^en )演算の下で新たな~prop名に変換することにより。 この変換は、~CSSOMにおいても†,文字列~引数, ~prop検索の両者に適用される: 古い~prop向けの要請は、透過的に,新たな~propに転送される。 【† ~CSSOM以外では、何が該当する?】 ◎ When the old property’s syntax is identical to or a subset of the value space of the new property’s syntax, 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 lookups: requests for the old property transparently transfer to the new property instead.
-
例えば `old-name^p は `new-name^p 用の`旧来の別名n$である場合、
getComputedStyle(%el).oldName
は `newName^c ~propに算出される~styleを返すことになり,el.style.setPropertyValue(`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.setPropertyValue("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$であるものと定義され,その利用は非推奨にされる。 それ以外の点では、定例の略式と正確に同じに挙動する — ~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$である( §頁~分断~propの別名 `CSS3-BREAK$r を見よ)。 ◎ 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値の直列化-法 を見よ)には、[ `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 1 §5.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 ◎値 `initial$v | `inherit$v | `unset$v | `revert$v ◎初 個々の~propを見よ ◎適 個々の~propを見よ ◎継 個々の~propを見よ ◎百 個々の~propを見よ ◎算 個々の~propを見よ ◎ア 個々の~propを見よ ◎表終`all$p ~propは、 `direction$p と `unicode-bidi$p を除く,すべての~CSS~propを再設定する`略式~prop$である。 `~CSS全域~keyword$ のみが,その値として受容される。 ◎ The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords.
除外された~propは,実際には~markup~levelの特色機能であり、 作者~stylesheetには設定されるべきでない。 (それらは~UAから~supportされていない文書~言語を~style付けするための~CSS~propとしてのみ存在する。) 作者は、 HTML の `dir^e 属性などの,適切な~markupを代わりに用いるべきである。 `CSS3-WRITING-MODES$r ◎ Note: The excepted properties 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. [CSS3-WRITING-MODES]
例えば,要素~上に `all$p: `initial^v; が指定された場合、すべての継承は阻まれ,その要素~上のすべての~propは[ 作者, 利用者, UA ]~levelの~cascadeの中に一切の規則が現れなかったかの様に,再設定されることになる。 ◎ For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade.
これは、頁~外の~styleの継承が望まれないような,頁~内に含められた “~widget” の根~要素に有用になり得る。 ただし、その要素に適用される “既定の” ~style(例えば `div^e などの塊~要素に対し,~UA~stylesheetからあてがわれる `display$p: `block^v; など)も,消し飛ばすことになることに注意。 ◎ This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div>) will also be blown away.
4. 値の処理
~UAは、文書の構文解析と文書~木を構築し終えたならば,木~内のどの要素に対しても,および 対応する整形~構造の中のどの~boxに対しても、その~propのうち,~~目的の媒体~型を適用~対象にするものすべてに対し,値をあてがわ~MUST。 ◎ Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the tree, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type.
所与の[ 要素/~box ]の~CSS~propの最終的な値は、次の様な複数の段階を経て計算される: ◎ The final value of a CSS property for a given element or box is the result of a multi-step calculation:
- まず最初に、各 要素に対し,要素を`適用-対象$とする各~propに対し,[ `要素に適用され$ている`宣言値$ ]すべてが収集される。 そのような`宣言値$は、各~要素の各~propごとに,~zero個以上いくつでもあり得る。 ◎ First, all the declared values applied to an element are collected, for each property on each element. There may be zero or many declared values applied to the element.
- `~cascading$により,`~cascaded値$を得る。 `~cascaded値$は、各~要素の各~propごとに,高々1個までである。 ◎ Cascading yields the cascaded value. There is at most one cascaded value per property per element.
- `~default法$により,`指定値$を得る。 どの要素も,~propごとにきっかり1個の`指定値$を持つ。 ◎ Defaulting yields the specified value. Every element has exactly one specified value per property.
- 値の依存性を解決して,`算出値$を得る。 どの要素も,~propごとにきっかり1個の`算出値$を持つ。 ◎ Resolving value dependencies yields the computed value. Every element has exactly one computed value per property.
- 文書の整形( `formatting^en )を経ることで,`使用値$を得る。 要素~上の~propが`使用値$を持つのは、要素が その~propの`適用-対象$である場合に限られる。 ◎ Formatting the document yields the used value. An element only has a used value for a given property if that property applies to the element.
- 最後に,使用値は、表示~環境による拘束に基づいて,`実際の値$に変形される。 `使用値$と同じく、`実際の値$も,要素が ~propの`適用-対象$である場合に限り~~存在する。 ◎ Finally, the used value is transformed to the actual value based on constraints of the display environment. As with the used value, there may or may not be an actual value for a given property on an element.
【 要素が ~prop の `適用-対象@ であるとは、その~propが要素の具現化に効果を及ぼし得る — 言い換えれば、その要素は,~prop定義表の “適用対象” の欄に挙げられている — ことを意味する。 個々の~prop宣言が “`要素に適用され$ている” こととは、意味が異なることに注意(そのことを明確化するため,この訳では語尾に “対象” を付与している)。 】
4.1. 宣言値
`要素に適用され$ている各~prop宣言が、その要素~上の~prop用の `宣言値@ ( `declared value^en )を与える。 詳細は宣言の選別法にて。 ◎ 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$の結果を表現する。 それは、一連の`宣言値$から,~cascadeを経て(`~cascadeの出力$の中で整列されて)選定される値である。 `~cascadeの出力$が空~listである場合、`~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.
4.3. 指定値
所与の~propの `指定値@ ( `specified value^en )は、~stylesheet作者がその要素に意図した値である。 多くの場合、`~cascaded値$が`指定値$になるが,`~cascaded値$が無い場合は、`~default法$により`指定値$が~~導出され,`~cascaded値$に置き換わる。 これにより、どの要素のどの~propにも,`指定値$の存在が保証される。 ~propの`~cascaded値$が`~CSS全域~keyword$であるときには、特別に取扱われ,`指定値$を その~keywordから要求されるものに設定する。 §明示的な~default法 を見よ。 ◎ 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.
4.4. 算出値
`算出値@ ( `computed value^en )とは、 `指定値$を,~prop定義表の “算出値” の欄に従って解決した結果である。 一般に,指定値は`継承$による伝播の過程で絶対化される。 ◎ 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の値” と記されたときは,およそ,算出値を指し( “〜に算出される” という句も同様)、 “%foo ~propに指定された値” と記されたときは,およそ,指定値を指すと見られる。 しかしながら、どちらを指すかは文脈に応じて判断する必要もあるかもしれない。 あるいは、どちらに解釈しようが結果は同じになる場合には,単に “~propの値” と記されることもあろう。 】
注記: `継承$において親から子へ転送される値は、`指定値$ではなく `算出値$である。 歴史的な理由から、`算出値$は `getComputedStyle()^c 関数から返される値になるとは限らない。 【この関数が返す値は解決値と呼ばれる。】 ◎ 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.
`指定値$は、絶対的な値(すなわち、 `red^v や `2mm^v など,別の値に相対的でない値) または相対的な値(すなわち、 `auto^v や `2em^v など,別の値に相対的な値)のいずれもとり得る。 一般に、相対的な値から算出値を得るときは,絶対化される: ◎ A specified value can be either absolute (i.e., not relative to another value, as in red or 2mm) or relative (i.e., relative to another value, as in auto, 2em). Computing a relative value generally absolutizes it:
- 相対的~単位( `em$u, `ex$u, `vh$u, `vw$u )を伴う値は、適切な基準~sizeを乗算して絶対化され~MUST。 ◎ values with relative units (em, ex, vh, vw) must be made absolute by multiplying with the appropriate reference size
- 一定の~keyword(例えば `smaller^v, `bolder^v )は、それらの定義に従って置換され~MUST。 ◎ certain keywords (e.g., smaller, bolder) must be replaced according to their definitions
- 一部の~prop上の百分率~値は、(~propにて定義される)基準~値と乗算され~MUST。 ◎ percentages on some properties must be multiplied by a reference value (defined by the property)
- 妥当な相対~URLは、絶対~URLに解決され~MUST。 ◎ valid relative URLs must be resolved to become absolute.
下の表の 例 (f), (g), (h) を見よ。 ◎ See examples (f), (g) and (h) in the table below.
注記: 一般に,`指定値$を解決して`算出値$を得る際には、文書の~layoutや,他の重い, あるいは並列実行が困難な演算 — ~network ~requestの解決や, 要素やその親 以外の所から値を検索取得するなど — は、可能な限り避けられている。 ◎ Note: In general, the computed value resolves the specified value as far as possible without laying out the document or performing other expensive or hard-to-parallelize operations, such as resolving network requests or retrieving values other than from the element and its parent.
【 言い換えれば,算出値は、概ね,~stylesheet, 文書~木, その他の確定的な情報のみから決定でき,(~layout開始時には未知の)他の要因からは左右されない値を表す。 】【 参考: ~CSSによる~animationや遷移における値の補間は、 算出値に基づいて行われる。 】
`算出値$は、要素が~propの`適用-対象$でない(~prop定義表の “適用対象” の欄に挙げられていない)としても,存在する。 しかしながら、要素が`適用-対象$であるかどうかに依存して,`算出値$の決定-法が変化する~propもある。 ◎ The computed value exists even when the property does not apply (as defined by the “Applies To” line). 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 )は、`算出値$を,文書の~layoutに利用される絶対的な理論値に仕上げる計算を完了した結果である。 要素が~propの`適用-対象$でない場合、要素は,その~prop用の`使用値$を持たない。 ◎ 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 layout of the document. If the property does not apply to this element, then the element has no used value for that property.
【 他の各種~CSS仕様によく現れる, “使用〜( `used^en 〜)” のような句も、同様の概念を表すと見られる。 ( この~siteの CSS 関連の日本語訳 に現れる語 “使用” は、原則的に,この意味と考えられる “used” の対訳に限って用いている。 他の意味の “used” には、別の対訳( “利用される” など)が用いられるが、中には,この意味の “使用” を指すものもあるかもしれない。 ) 】
例えば,宣言 `width$p: `auto^v は、要素の先祖の~layoutを知ることなしには,長さに解決され得ない。 したがって`使用値$は `100px^v のような絶対的な長さになる一方で,`算出値$は `auto^v になる。 `CSS21$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. [CSS21]
別の例として、 `div^e は `break-before$p の算出値に `auto^v をとり得るが、その使用値 `page^v を,その最初の子からの伝播を通して獲得する。 `CSS3-BREAK$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. [CSS3-BREAK]
要素が~propの`適用-対象$でない場合、`使用値$もない。 したがって,例えば `flex$p ~propは、 ~flex~item でない要素~上では `使用値$はない。 ◎ Lastly, if a property does not apply to an element, it has no used value; so, 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の実際の値は、要素の後に頁~分断があるかどうかを反映しない。 同様に, `orphans$p の実際の値は、要素の中の実際の orphan 行数を反映しない。 下の表の例 (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. 例
~prop | 選定された宣言 | ~cascaded値 | 指定値 | 算出値 | 使用値 | 実際の値 | |
---|---|---|---|---|---|---|---|
(a) | `text-align$p | text-align: left | `left^v | `left^v | `left^v | `left^v | `left^v |
(b) | `border-top-width$p, `border-right-width$p, `border-bottom-width$p, `border-left-width$p | border-width: inherit | `inherit$v | `4.2px^v | `4.2px^v | `4.2px^v | `4px^v |
(c) | `width$p | (なし) | (なし) | `auto^v† | `auto^v | `120px^v | `120px^v |
(d) | `list-style-position$p | list-style-position: inherit | `inherit$v | `inside^v | `inside^v | `inside^v | `inside^v |
(e) | `list-style-position$p | list-style-position: initial | `initial$v | `outside^v† | `outside^v | `outside^v | `outside^v |
(f) | `font-size$p | font-size: 1.2em | `1.2em^v | `1.2em^v | `14.1px^v | `14.1px^v | `14px^v |
(g) | `width$p | width: 80% | `80%^v | `80%^v | `80%^v | `354.2px^v | `354px^v |
(h) | `width$p | width: auto | `auto^v | `auto^v | `auto^v | `134px^v | `134px^v |
(i) | `height$p | height: auto | `auto^v | `auto^v | `auto^v | `176px^v | `176px^v |
(j) | `page-break-after$p | (なし) | (なし) | `auto^v† | `auto^v | `auto^v | `auto^v |
(k) | `orphans$p | orphans: 3 | `3^v | `3^v | `3^v | `3^v | `3^v |
5. 選別法
`宣言値$を見出すためには、実装はまず,それぞれの要素ごとに `要素に適用され$るすべての宣言を識別し~MUST。 所与の宣言は、次【のすべて】が満たされるならば `要素に適用され@ る: ◎ In order to find the declared values, implementations must first identify all declarations that apply to each element. A declaration applies to an element if:
- 当該の文書に現在 適用されている~stylesheetに属している。 ◎ It belongs to a style sheet that currently applies to this document.
- 偽に評価される`条件付き~group規則$( `conditional group rule^en ) `CSS3-CONDITIONAL$r により除外されていない。 ◎ It is not qualified by a conditional rule [CSS3-CONDITIONAL] with a false condition.
- それが属している~style規則の選択子 `SELECT$r が要素に合致する。 (必要なら 視野も絞る )。 ◎ It belongs to a style rule whose selector matches the element. [SELECT] (Taking scoping into account, if necessary.)
- 構文として妥当である: すなわち,宣言の~propは既知の~prop名であり, かつ その宣言の値がその~propの構文に合致している。 ◎ It is syntactically valid: the declaration’s property is a known property name, and the declaration’s value matches the syntax for that property.
これらの適用される宣言の値が、各~要素の各~prop用の`宣言値$の~listをなす。 この~listの中の どれが選ばれるかは、次節の`~cascading$にて与えられる。 ◎ The values of the declarations that apply form, for each property on each element, a list of declared values. The next section, the cascade, prioritizes these lists.
6. ~cascading
`~cascade@ (~cascade処理)は、所与の要素~上の所与の~prop用の`宣言値$たちが成す,順序の無い~listを入力にとり、以下に従って決定される優先順位により,それらの宣言を整列した上で、 【その中で最も優先度の高い】 単独の`~cascaded値$を出力する。 ◎ The cascade takes an unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value.
~cascadeにおいては、以下の判定基準に従って,宣言が整列される。 先に示される判定基準が後続の判定基準よりも優先される: ◎ The cascade sorts declarations according to the following criteria, in descending order of priority:
- `出自と重要度@( `origin^en と `importance^en )
-
宣言の`出自$は、~~字義通りの~~意味に基づく。 宣言が`~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 !important (see below). The precedence of the various origins is, in descending order:
- 遷移~宣言 `CSS3-TRANSITIONS$r ◎ Transition declarations [CSS3-TRANSITIONS]
- ~importantにされた~UA宣言 ◎ Important user agent declarations
- ~importantにされた 利用者 宣言 ◎ Important user declarations
- ~importantにされた 作者 宣言 ◎ Important author declarations
- ~animation 宣言 `CSS3-ANIMATIONS$r ◎ Animation declarations [CSS3-ANIMATIONS]
- 通常の作者~宣言 ◎ Normal author declarations
- 通常の利用者~宣言 ◎ Normal user declarations
- 通常の~UA宣言 ◎ Normal user agent declarations
上の~listの中で,より先に挙げた`出自$に属する宣言が より後に挙げた`出自$に属する宣言よりも優先される。 ◎ Declarations from origins earlier in this list win over declarations from later origins.
【 ~importantの有無により,[ 作者/利用者/~UA ]宣言の優先順位は逆になる。 】
- `視野@( `scope^en )
- 宣言は、[ `視野根@ ( `scoping root^en )と呼ばれる要素を根とする,文書の部分木 ]のみに影響するように, `視野が絞られ@ ることもある。 【そのような宣言は、視野付き( `scoped^en )ともいう。】 ◎ A declaration can be scoped to a subtree of the document so that it only affects its scoping element and that element’s descendants. For example, [HTML5] defines scoped <style> elements, whose style sheets are scoped to the element’s parent.
- 例えば, `HTML5$r は、視野が絞られた `style^e 要素を定義する。 この~stylesheetは、その要素の親(を根とする部分木)に視野が絞られる。 【この特色機能は HTML から廃された。】 ◎ ↑
- 2 個の視野付き宣言の`視野根$が先祖/子孫の関係にある場合、通常の規則に対しては,子孫~側の`視野根$を持つ宣言が優先される。 `~important$にされた規則に対しては,先祖~側の`視野根$を持つ宣言が優先される。 ◎ If the scoping elements of two declarations have an ancestor/descendant relationship, then for normal rules the declaration whose scoping element is the descendant wins, and for important rules the declaration whose scoping element is the ancestor wins.
- 注記: 言い換えれば、通常の宣言( ~importantにされていない宣言)に対しては,視野が内側に入る方の宣言が他方を上書きする一方で, `!important^css 規則に対しては,視野が 外側 になる方の宣言が他方を上書きする。 ◎ Note: In other words, for normal declarations the inner scope’s declarations override, but for !important rules outer scope’s override.
- この段の目的においては、視野付きでない宣言は,文書の根~要素に`視野が絞られ$ているものと見なされる。 `~style属性$による通常の宣言は,その属性を有する要素に視野が絞られているものと見なされる一方で、 `~style属性$による`~important$宣言は,文書の根~要素に視野が絞られているものと見なされる。 `CSSSTYLEATTR$r ◎ For the purpose of this step, all unscoped declarations are considered to be scoped to the root element. Normal declarations from style attributes are considered to be scoped to the element with the attribute, whereas important declarations from style attributes are considered to be scoped to the root element. [CSSSTYLEATTR]
- 注記: この不規則な取扱いは、単に[ `~style属性$の詳細度は,他のどの作者~規則よりも高い ]とされていた,~CSS Level 1 / Level 2 に定義される[ ~style属性における `!important^css 宣言の挙動 ]に合致させるためである。 `CSS21$r ◎ Note: This odd handling of !important style attribute declarations is to match the behavior defined in CSS Levels 1 and 2, where style attributes simply have higher specificity than any other author rules. [CSS21]
- `詳細度@( `specificity^en )
- それぞれの宣言は、それが現れる~style規則(の選択子)と同じ詳細度を持つ。 選択子の 詳細度の算出-方法 は、 Selectors ~module `SELECT$r にて述べられている。 この段の目的においては、~style規則に属さない宣言( ~style属性の内容 など)は、どの選択子よりも高い詳細度を持つものと見なされる。 詳細度が高い宣言ほど,より優先される。 ◎ 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. For the purpose of this step, declarations that do not belong to a style rule (such as the contents of a style attribute) are considered to have a specificity higher than any selector. The declaration with the highest specificity wins.
- `出現順序@ ( `order of appearance^en )
-
文書~順 【文書~内(~stylesheet内)に現れる順序】 において後の宣言が,先に現れるものより優先される。 この目的においては: ◎ The last declaration in document order wins. For this purpose:
- `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属性$からの宣言は、その属性が現れた要素たちの文書順に従って順序~付けられ,どの~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.
`~cascadeの出力@ は、各~要素~上の各~prop用のすべての`宣言値$を,この節に述べた規則に従って整列した~listである(空にもなり得る)。 ◎ The output of the cascade is a (potentially empty) sorted list of declared values for each property on each element.
6.1. ~cascadingにおける出自
各~style規則は、それが~cascadeのどの段階に取り込まれるかを決定する, `出自@ ( `cascade origin^en )を持つ。 ~CSSでは 3 種類の中心的な`出自$が定義されている: ◎ Each style rule has a cascade origin, which determines where it enters the cascade. CSS defines three core origins:
- `作者~出自@( `author origin^en )
- 文書~言語の規約に従って,~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 )
- 利用者は、個々の文書~用に,~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 )
- 適合~UAは、既定の~stylesheet(あるいはそのように挙動するもの)を適用し~MUST。 ~UAの既定の~stylesheetは、文書~言語の要素を,文書~言語にて一般に期待されている呈示を満たす様に呈示するべきである(例えば 視覚系~browserは, HTML の EM 要素を斜字体~fontで呈示するなど)。 例としては HTML ~UA~stylesheet `HTML5$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. [HTML5]
【 この仕様も含む~CSS仕様 全般にわたり、この出自を指して, “〜~levelの~style” と記されたり,( “作者~levelの…” , “~UA~levelの…” 等々),更に省略して “利用者~style”, 等々と記されることが多い。 】
~CSSに対する拡張は、次の追加の`出自$も定義する: ◎ Extensions to CSS define the following additional origins:
- `~animation出自@( `animation origin^en )
- CSS Animations `CSS3-ANIMATIONS$r は、稼働中にその効果を表現する, “virtual” 規則を生成する。 ◎ CSS Animations [CSS3-ANIMATIONS] generate “virtual” rules representing their effects when running.
- `遷移~出自@( `transition origin^en )
- CSS Animations 同様, CSS Transitions `CSS3-TRANSITIONS$r も、稼働中にその効果を表現する, “virtual” 規則を生成する。 ◎ Like CSS Animations, CSS Transitions [CSS3-TRANSITIONS] generate “virtual” rules representing their effects when running.
6.2. ~important宣言: `!important^css
~CSSでは、作者と利用者の手による~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 made important, which increases its weight in the cascade and inverts the order of precedence.
`CSS3SYN$r にて定義されるように, `!important@css を伴う宣言 — すなわち、その値の中の最後の 2 個の(空白でも~commentでもない)~tokenが,[ 区切子~token "`!^c", 識別子~token "`!important^c" ]の並びである宣言 — は、`~important$であるとされる。 ◎ A declaration is important if it has a !important annotation, as defined by [CSS3SYN]. i.e. if the last two (non-whitespace, non-comment) tokens in its value are the delimiter token ! followed by the identifier token important.
[hidden] { display: none !important; }
`~important$宣言は、通常の宣言より優先される。 作者/利用者~stylesheetに `!important$css 宣言が含められてもよい。 利用者 `!important$css 宣言は、作者 `!important$css 宣言を上書きする。 この~CSS特色機能を利用すれば、利用者の手による,呈示~制御~用の特別な要件(大きな~font, 色の組合わせ, 等々)を与えることで、文書の~accessibilityも向上させられる。 ◎ An important declaration takes precedence over a normal declaration. Author and user style sheets may contain !important declarations, with user !important declarations overriding author !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よりも優先される。 これにより、作者は,重要な事例で~animated値を上書きできるようになる(~animated値は通常,他のすべての規則を上書きする)。 `CSS3-ANIMATIONS$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.) [CSS3-ANIMATIONS]
`!important$css 宣言は~UA~stylesheetにも含められてよい。 これらは、作者/利用者によるすべての宣言を上書きする。 ◎ User agent style sheets may also contain !important declarations. These override all author and user declarations.
次の例の 利用者~stylesheet内の 1 個目の規則は, `!important$css 宣言を含むので、作者~stylesheetの対応する宣言を上書きする。 2 個目の規則の宣言も `!important$css により優先されることになる。 しかしながら,利用者~stylesheet内の 3 個目の宣言には `!important$css はないので、作者~stylesheetの中の(`略式~prop$の~styleを設定する) 2 個目の規則の方が優先されることになる。 また、 3 個目の作者~規則は `!important$css にされている 2 個目の作者~規則の方が優先されることになる。 すなわち、 `!important$css 宣言は,同じ作者~stylesheetの中でも機能する。 ◎ The first rule in the user’s style sheet in the following example contains an !important declaration, which overrides the corresponding declaration in the author’s style sheet. The declaration in the second rule will also win due to being marked !important. However, the third declaration in the user’s style sheet is not !important and will therefore lose to the second rule in the author’s style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second declaration is !important. This shows that !important declarations have a function also within author style sheets.
/* 利用者による~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.3. ~CSSによるものでない呈示hintの優先順位
~UAは、~source文書の~markup内の呈示hint†を尊守してもよい。 例えば `HTML5$r の中の `bgcolor^a 属性や `s^e 要素。 文書~言語に基づくすべての~style付けは、対応する~CSS規則に転化された上で,[ ~UA~levelの規則, あるいは[ `詳細度$~zeroを伴って作者~stylesheetの先頭に置かれた,作者~levelの規則 ]]として、~cascadeの中に取り込まれ~MUST。 文書~言語は、呈示hintが ~cascadeの中で ~UA/ 作者 どちらの~levelに取り込まれるかを定義してもよい。 その場合、~UAは,それに則って挙動することが要求される。 例えば `SVG11$r では,その 呈示~属性 を作者~levelのものに対応付けている。 ◎ The UA may choose to honor presentational hints in a source document’s markup, for example the bgcolor attribute or <s> element in [HTML5]. All document language-based styling must be translated to corresponding CSS rules and either enter the cascade at the user agent level or be treated as author level rules with a specificity of zero placed at the start of the author style sheet. A document language may define whether a presentational hint enters at the UA or author level of the cascade; if so, the UA must behave accordingly. For example, [SVG11] maps its presentation attributes into the author level.
【† “presentational hints” — 本来は~CSSが受け持つ所の,呈示~用の役割も備えた~markup (参考:HTML が定義する呈示hint) 】
注記: ~cascadeの中で~UA~levelに取り込まれる呈示hintは,作者~style, 利用者~styleにより上書きできる。 ~cascadeの中で作者~levelに取り込まれる呈示hintは,作者~styleにより上書きできるが、 `!important^css でない利用者~styleからは,上書きできない。 ~host言語は、これらを考慮した上で,呈示hint用に適切な~levelを選ぶべきである。 ◎ Note: Presentational hints entering the cascade at the UA level can be overridden by author or user styles. Presentational hints entering the cascade at the author level can be overridden by author styles, but not by non-!important user styles. Host languages should choose the appropriate level for presentational hints with these considerations in mind.
7. ~default法
`~cascade$の結果(`~cascadeの出力$)が空である場合、他の何らかの仕方で`指定値$が見出され~MUST。 `継承prop$は、その既定の値( `default^en )を,`継承$を通して親~要素から取り込む。 他のすべての~propは、その`初期値$を既定の値としてとる。 ~stylesheet作者は、 `inherit$v や `initial$v ~keywordを通して,明示的に継承/初期化を要請できる。 ◎ When the cascade does not result in a value, the specified value must be found some other way. Inherited properties draw their defaults from their parent element through inheritance; all other properties take their initial value. Authors can explicitly request inheritance or initialization via the inherit and initial keywords.
7.1. 初期値
各種~propには、それぞれの~prop定義表にて,その `初期値@ ( `initial value^en )が定義される。 要素~上の~prop %P が`継承prop$でなく, かつ %P の`~cascaded値$も無い場合、その要素~上の %P の`指定値$は, %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の `継承値@ ( `inherited value^en )は、その要素の親~要素~上の~propの`算出値$で与えられる。 親~要素のない根~要素~用の`継承値$は、~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.
(疑似要素における継承は、それぞれの疑似要素の定義に述べられる,仮想の~tag並び( `fictional tag sequence^en )に従う。 `SELECT$r ) ◎ (Pseudo-elements inherit according to a fictional tag sequence described for each pseudo-element [SELECT].)
一部の~propは、その~prop定義表にて, `継承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を明示的に継承させることもできる。 `inherit$v ~keywordを見よ。 ◎ A property can also be explicitly inherited. See the inherit keyword.
注記: 継承は,文書~木に従うものであり、生成される`~box木$における組み替え — 合間に`匿名~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法$の挙動を明示的に指定する。 `CSS3VAL$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 Level 3 [CSS3VAL], all CSS properties can accept these values.
7.3.1. ~propの再設定: `initial^v ~keyword
~propの`~cascaded値$が `initial@v ~keywordになる場合、その`指定値$は,~propの`初期値$にされる。 ◎ If the cascaded value of a property is the initial keyword, the property’s specified value is its initial value.
7.3.2. 明示的な継承: `inherit^v ~keyword
~propの`~cascaded値$が `inherit@v ~keywordになる場合、その~propの`継承値$が,`指定値$および`算出値$を与える。 ◎ If the cascaded value of a property is the inherit keyword, the property’s specified and computed values are the inherited value.
7.3.3. すべての宣言を取り消す : `unset^v ~keyword
~propの`~cascaded値$が `unset@v ~keywordになる場合、~propが`継承prop$であるならば `inherit$v として扱われれ,そうでなければ `initial$v として扱われる。 この~keywordにより、以前の`~cascade$に出現した すべての`宣言値$は取り消され、継承するかどうかも~prop(`略式~prop$の場合は,そのすべての下位propのそれぞれ)に応じて,適切に扱われる。 ◎ If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial. This keyword effectively erases all declared values occurring earlier in the cascade, correctly inheriting or not as appropriate for the property (or all longhands of a shorthand).
【 “以前の…すべての” — `~cascading$による順位付けの結果、`出現順序$による順位付けに従って, “以前の” 宣言値が取り消される(`詳細度$など,より高次の順位付けにおいて優先度が高い宣言値まで上書きされるわけではない)。 】
7.3.4. ~cascadeの巻戻し: `revert^v ~keyword
【 巻戻し( `rolling back^en ): ~prop値を,他の`出自$†による既定の値(他の出自にてその~propに指定されている値)に “戻す” 。 († 下の定義により、通常は,優先順位がより低い出自による~style — `~important$にされているもの対しては, “より高い” に逆転することになる。) 】
~propの`~cascaded値$が `revert@v ~keywordになる場合の挙動は、その宣言が属する`出自$に依存する: ◎ If the cascaded value of a property is the revert keyword, the behavior depends on the origin to which the declaration belongs:
- `~UA出自$
- `unset$v に等価。 ◎ Equivalent to unset.
- `利用者~出自$
- `~cascaded値$を~UA~levelに巻戻す: すなわち,当の要素~上の~propの`指定値$は、~propに 作者~level/ 利用者~level の規則が指定されていないかのように計算される。 ◎ Rolls back the cascaded value to the user-agent level, so that the specified value is calculated as if no author-level or user-level rules were specified for this property on this element.
- `作者~出自$
- `~cascaded値$を利用者~levelに巻戻す: すなわち,当の要素~上の~propの`指定値$は、~propに作者~levelの規則が指定されていないかのように計算される。 `revert$v の目的においては、この出自には`~animation出自$も含まれる。 ◎ Rolls back the cascaded value to the user level, so that the specified value is calculated as if no author-level rules were specified for this property on this element. For the purpose of revert, this origin includes the Animation origin.
8. 変更点
2016 年 1 月 14日付 作業草案 からの変更点は: ◎ Changes since the 14 January 2016 Working Draft include:
- `revert$v は、`継承値$ではなく`~cascaded値$のみに影響することを明確化した。 ◎ Clarify that revert only affects the cascaded value, not the inherited value.
2015 年 4 月 21日付 作業草案 からの変更点は: ◎ Changes since the 21 April 2015 Working Draft include:
- `default^v ~keywordは `revert$v に改称された。 ◎ Renamed default keyword to revert.
- `supports^f 構文~内の多重~丸括弧は、宣言を 1 個だけ包含する場合には~~省けるようにされた。 ◎ Allowed dropping duplicate parentheses in supports() syntax when it only contains one declaration.
8.1. Level 3 からの追加
この仕様には、 Level 3 から,次が追加された: ◎ The following features have been added since Level 3:
- ~cascadeの巻戻し用の `revert$v ~keywordを導入した。 ◎ Introduced revert keyword, for rolling back the cascade.
- supports 条件付き `import$at 規則~用に `supports^f 構文を導入した。 ◎ Introduced supports() syntax for supports-conditional @import rules.
8.2. Level 2 からの追加
次の特色機能が Level 2 から追加された: ◎ The following features have been added since Level 2:
- `all$p 略式~prop ◎ The all shorthand
- `unset$v ~keyword ◎ The unset keyword
- [ 視野付き~style, ~animation, 遷移 ]を`~cascade$の中に組入れた。 ◎ Incorporation of scoped styles, animations, and transitions into the cascade.
謝辞
David Baron, Tantek Çelik, Simon Sapin, and Boris Zbarsky contributed to this specification.
9. ~privacyと~security上の考慮点
`import$at についての何か? — それは、他の文書へ~linkするので。 ◎ Something about @import, since it’s linking to other documents?