CSS Conditional Rules Module Level 3 （日本語訳）

◎要約

この~moduleは、 ~stylesheetの一部分に対する — 処理器の能力や~stylesheetが適用されている文書により条件付けられる — 条件付き処理~用の~CSS特能を包含する。この~moduleは、 `CSS1$r の上に築かれた `CSS21$r の機能性を含み，それを拡張する。 ~level 2 に対する主な拡張には、次が挙げられる ⇒＃ `media$at の内側に一定の~at-規則を入子にすることを許容する／条件付き処理~用の `supports$at 規則の追加 ◎ This module contains the features of CSS for conditional processing of parts of style sheets, conditioned on capabilities of the processor or the document the style sheet is being applied to. It includes and extends the functionality of CSS level 2 [CSS21], which builds on CSS level 1 [CSS1]. The main extensions compared to level 2 are allowing nesting of certain at-rules inside @media, and the addition of the @supports rule for conditional processing.

~CSSisaLANG

1. 序論

1.1. 背景0

◎非規範的

`CSS21$r では、 `条件付き~group規則$の一種として `media$at 規則が定義されていて，その内側には（他の~at-規則でない）~style規則のみが許容されている。 `media$at 規則は、 ~stylesheetを媒体に特有にする能を供する。それは、 ~stylesheetへ~linkする特能 — `import$at や `link$e など — においても供されている。しかしながら， `media$at 規則の内容に課される制約があるため、媒体に特有な~stylesheetの中で~at-規則を孕む~CSS特能を利用する場合，媒体ごとに別々な~stylesheetを利用するよう強いられる。 ◎ [CSS21] defines one type of conditional group rule, the @media rule, and allows only style rules (not other @-rules) inside of it. The @media rule provides the ability to have media-specific style sheets, which is also provided by style sheet linking features such as @import and link. The restrictions on the contents of @media rules made them less useful; they have forced authors using CSS features involving @-rules in media-specific style sheets to use separate style sheets for each medium.

この仕様は、 `条件付き~group規則$を，その内容に他の~at-規則も許容するよう拡張する。これにより，作者は、単独の~stylesheetの中で［ ~at-規則を孕む~CSS特能, 媒体に特有な~stylesheet ］を組合せることが可能になる。 ◎ This specification extends the rules for the contents of conditional group rules to allow other @-rules, which enables authors to combine CSS features involving @-rules with media specific style sheets within a single style sheet.

この仕様は、作者と利用者からの要件に取組むための，別種の`条件付き~group規則$ — `supports$at — も定義する。 ◎ This specification also defines an additional type of conditional group rule, @supports, to address author and user requirements.

`supports$at 規則は、［ ~CSS~propとその値に対する実装~supportの有無］により条件付けられる~CSSを許容する。この規則は、作者にとって新たな~CSS特能の利用を格段に容易にし，それらの特能を~supportしない実装~用に良好な~fallbackを供する。これは特に、［新たな~layoutの仕組みを供する~CSS特能］あるいは［互いに関係する~styleたちが成す集合が， ~prop用の~supportの有無により条件付けられる必要がある事例］において重要になる。 ◎ The @supports rule allows CSS to be conditioned on implementation support for CSS properties and values. This rule makes it much easier for authors to use new CSS features and provide good fallback for implementations that do not support those features. This is particularly important for CSS features that provide new layout mechanisms, and for other cases where a set of related styles needs to be conditioned on property support.

1.2. ~module間の相互作用

この~moduleは、 `CSS21$r § 7.2.1 にて定義される `media$at 規則の特能を置換し，それを拡張する。また、以前の `MEDIAQUERIES-4$r § 1 による規範的でない改変を組入れる。 ◎ This module replaces and extends the @media rule feature defined in [CSS21] section 7.2.1 and incorporates the modifications previously made non-normatively by [MEDIAQUERIES-4] section 1.

2. 条件付き~group規則の処理

この仕様は、 `条件付き~group規則@ と呼ばれる~CSS`~at-規則$を定義する。それは、いくつかの~CSS規則からなる~groupに，ある条件を結付ける。 ~testする条件には様々なものが許容されるが、［その内容が，条件の真偽に基づいてどう利用されるか］については，共通な挙動を共有する。 ◎ This specification defines some CSS at-rules, called conditional group rules, that associate a condition with a group of other CSS rules. These different rules allow testing different types of conditions, but share common behavior for how their contents are used when the condition is true and when the condition is false.

例えば、次の規則では…： ◎ For example, this rule:

@media print {
  /* 
印刷~時には、
~navi~controlを隠す
◎
hide navigation controls when printing
 */
  #navigation { display: none }
}

…当の~stylesheetが印刷~媒体に利用されるときに限り，特定0の~CSS規則が適用されるようにする（ここでは、 ~ID `navigation^l を伴う要素の `display$p を `none^v にする）。 ◎ causes a particular CSS rule (making elements with ID “navigation” be display:none) apply only when the style sheet is used for a print medium.

各 `条件付き~group規則$は、随時, `真^i または `偽^i に評価される条件を持つ。 ~CSS処理器は、 ~group規則の内側にある規則を［条件が `真^i のときは，それらが~group規則の所に在ったかのように適用する／条件が `偽^i のときは，どれも適用しない］モノトスル。条件の現在の状態が~CSS~obj~modelに影響することはない — ~group規則の内容は、常に~group規則の中にあり続ける。 ◎ Each conditional group rule has a condition, which at any time evaluates to true or false. When the condition is true, CSS processors must apply the rules inside the group rule as though they were at the group rule’s location; when the condition is false, CSS processors must not apply any of rules inside the group rule. The current state of the condition does not affect the CSS object model, in which the contents of the group rule always remain within the group rule.

したがって，複数の`条件付き~group規則$が入子にされている場合、その末端の~group規則の内側にある規則は，それらの~group規則の条件がすべて `真^i になるときに限り適用されることになる。 ◎ This means that when multiple conditional group rules are nested, a rule inside of both of them applies only when all of the rules' conditions are true.

例えば，規則たちが成す集合が次のように入子にされている場合： ◎ For example, with this set of nested rules:

@media print { /* 規則 (1) */
  /* 
印刷~時には、
~navi~controlを隠す
◎
hide navigation controls when printing
 */
  #navigation { display: none }
  @media (max-width: 12cm) { /* 規則 (2) */
    /* 
狭い~pageに印刷するときは、
`.note^css を~flow内に保つ
◎
keep notes in flow when printing to narrow pages
 */
    .note { float: none }
  }
}

規則 (1) の条件は印刷~媒体に対しては `真^i であり，規則 (2) の条件は表示~区画（印刷~媒体の場合は~page~box）の横幅が 12 cm 以下のときに `真^i になる。したがって、規則 #navigation { `display$p: `none^v } は，この~stylesheetが印刷~媒体に適用されているときに適用され、規則 .note { `float^p: `none^v } は，~stylesheetが印刷~媒体に適用されていて, `かつ^em ~page~boxの横幅が 12 cm 以下のときに限り適用される。 ◎ the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule #navigation { display: none } applies whenever this style sheet is applied to print media, and the rule .note { float: none } is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.

~CSS処理器は、 `条件付き~group規則$の条件が変化したときには、その真偽に応じて，その規則の適用-可否を反映するモノトスル。【例えば，~scriptにより動的に変更された場合に加えて、特に `media$at 規則の場合，環境の変化に伴って条件の真偽が変化する場合もあろう。】ただし、内側にある~propのうち，［その算出d値の効果が，その値の存続期間を過ぎても持続する］ものと定義されているもの（ `CSS3-TRANSITIONS$r や `CSS3-ANIMATIONS$r における一部の~propなど）は除く。 ◎ When the condition for a conditional group rule changes, CSS processors must reflect that the rules now apply or no longer apply, except for properties whose definitions define effects of computed values that persist past the lifetime of that value (such as for some properties in [CSS3-TRANSITIONS] and [CSS3-ANIMATIONS]).

3. 条件付き~group規則の内容

どの`条件付き~group規則$も，自身の~block内に `rule-list$t をとるものと定義される。 — すなわち、 ~stylesheetの~top-levelにて通常に許容される，どの規則も — 他から制約されない限り — 受容する。（例えば， `import$at 規則は、 ~stylesheetが実際に始まる所に現れなければナラナイので，別の規則の内側では妥当でない。） ◎ All conditional group rules are defined to take a <rule-list> in their block, and accept any rule that is normally allowed at the top-level of a stylesheet, and not otherwise restricted. (For example, an @import rule must appear at the actual beginning of a stylesheet, and so is not valid inside of another rule.)

`rule-list$t の内側にある規則のうち，妥当でない, または未知なものは、 `無効$と見なして無視するモノトスル — が、 `条件付き~group規則$を無効~化することはない。 ◎ Invalid or unknown rules inside the <rule-list> must be considered invalid and ignored, but do not invalidate the conditional group rule.

`条件付き~group規則$内で利用される`名前空間接頭辞$は、宣言-済みでなければナラナイ — さもなければ`無効$になる。 ◎ Any namespace prefixes used in a conditional group rule must have been declared, otherwise they are invalid.

例えば，`~CSS有修飾~名$を包含している次の規則は、妥当になる — その`名前空間接頭辞$は、ある名前空間~URLに束縛されているので： ◎ For example, this rule containing a CSS qualified name is valid, because the namespace prefix has been bound to a namespace url:

@namespace x url(http://www.w3.org/1999/xlink);
@supports (content: attr(x|href)) {
  // do something
}

例えば，次の規則に対しては： ◎ For example, to determine whether this rule is valid:

@supports (content: attr(n|tooltip)) {
  // do something
}

~UAは、それが妥当かどうか決定するため，［名前空間~mapに諮って、接頭辞 `n^l に対応する名前空間~URLは存在するかどうか調べる］ことになる。 ◎ The user agent will consult the namespace map to see whether a namespace url exists corresponding to the "n" prefix.

4. 条件付き~group規則が許容される場所

`条件付き~group規則$は、 ~style規則が許容される所（~stylesheetの~top-level, および他の条件付き~group規則の中）では，どこでも許容される。 ~CSS処理器は、それらを `§ 条件付き~group規則の処理＠#processing$ に従って処理するモノトスル。 ◎ Conditional group rules are allowed wherever style rules are allowed (at the top-level of a style sheet, as well as within other conditional group rules). CSS processors must process such rules as described above.

~style規則より後には許容されない`~at-規則$ （例： `charset$at, `import$at, `namespace$at ）は、 `条件付き~group規則$の後でも許容されない — したがって、そのように配置されたものは`無効$になる。 ◎ Any at-rules that are not allowed after a style rule (e.g., @charset, @import, or @namespace rules) are also not allowed after a conditional group rule, and are therefore invalid when so placed.

5. 媒体に特有な~stylesheet： `media^at 規則

`media@at 規則は、条件として`媒体~query$を伴う，`条件付き~group規則$である。その構文は： ◎ The @media rule is a conditional group rule whose condition is a media query. Its syntax is:

@media `media-query-list$t {
	`rule-list$t
}

それは、次の並びからなり， `媒体~query$を評価した結果が規則の条件を与える ⇒＃ at-~keyword `media$at, `媒体~query~list$ `MEDIAQUERIES-4$r （空もとり得る）, 任意な規則を包含している~block ◎ It consists of the at-keyword @media followed by a (possibly empty) media query list (as defined in [MEDIAQUERIES-4]), followed by a block containing arbitrary rules. The condition of the rule is the result of the media query.

次の `media$at 規則： ◎ This @media rule:

@media screen and (min-width: 35em), print and (min-width: 40em) {
  #section_navigation { float: left; width: 10em; }
}

の条件 screen and (`min-width^p: `35em^v), print and (`min-width^p: `40em^v) は、次のいずれかが満たされるとき， `真^i になる： ◎ has the condition screen and (min-width: 35em), print and (min-width: 40em), which is true＼

~screen表示であって，その表示域の横幅は初期~font~sizeの 35 倍以上である ◎ for screen displays whose viewport is at least 35 times the initial font size＼
印刷~表示であって，その表示域の横幅は初期~font~sizeの 40 倍以上である ◎ and for print displays whose viewport is at least 40 times the initial font size.＼

このとき，規則 #section_navigation { `float^p: `left^v; `width^p: `10em^v; } が適用される。 ◎ When either of these is true, the condition of the rule is true, and the rule #section_navigation { float: left; width: 10em; } is applied.

6. 特能~query： `supports^at 規則

`supports@at 規則は、 `条件付き~group規則$であり， ~UAが~CSS~propの［名前, 値］が成す~pairたち【！property:value pairs】を`~support$するかどうかを~testする。これを利用すれば、［新たな特能が~supportされていて可用ならばそれを利用し，さもなければ上品に退行する］ような~stylesheetを書ける。これらの~queryは、 `~CSS特能~query@ あるいは（俗に） `~supports~query@ と呼ばれる。 ◎ The @supports rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs. Authors can use it to write style sheets that use new features when available but degrade gracefully when those features are not supported. These queries are called CSS feature queries or (colloquially) supports queries.

注記： ~CSSは，上品に退行するための既存の仕組み — 未~supportな［ ~prop／~propの値］を無視するなど — も備えているが、［新たな~layout~systemによる特能］を利用するときなど，［ ~styleの巨大な~groupを，一定の特能の~supportに束ねる］には，常に足るとは限らない。 ◎ Note: CSS has existing mechanisms for graceful degradation, such as ignoring unsupported properties or values, but these are not always sufficient when large groups of styles need to be tied to the support for certain features, as is the case for use of new layout system features.

`supports$at 規則~内の条件の構文は、 `MEDIAQUERIES-4$r における `media-condition$t のそれに類似する — `未知^i な値に対する論理は伴わないことを除いて： ◎ The syntax of the condition in the @supports rule is similar to that defined for <media-condition> in [MEDIAQUERIES-4], but without the "unknown" value logic:

［新たな特能を用いる~style, ~fallback用の~style ］を［（~at-規則の構文~用の前方-互換な文法の規則の中で）分離できるようにする］ため, および［一方が他方を上書きしないようにする］ためには、否定（ `negation^en — `not^css ）が必要になる。 ◎ negation is needed so that the new-feature styles and the fallback styles can be separated (within the forward-compatible grammar’s rules for the syntax of @-rules), and not required to override each other.
複数の特能が要求されるとき，それらの~supportを~testするためには、論理積（ `conjunction^en — `and^css ）が必要になる。 ◎ conjunction (and) is needed so that multiple required features can be tested.
~styleたちが成す集合~用に代替な特能が複数あるときには、論理和（ `disjunction^en — `or^css ）が必要になる。特に、それらの代替の一部が，~vendor接頭辞~付き~propの［名前／値］であるとき。 ◎ disjunction (or) is needed when there are multiple alternative features for a set of styles, particularly when some of those alternatives are vendor-prefixed properties or values.

したがって， `supports$at 規則の構文では、 ~propの［名前, 値］が成す~pair【！property:value pairs】たち, およびそれらを［論理積（ `and^css ）, 論理和（ `or^css ）, 否定（ `not^css ）］により任意に組み合わせる~testが許容される。 ◎ Therefore, the syntax of the @supports rule allows testing for property:value pairs, and arbitrary conjunctions (and), disjunctions (or), and negations (not) of them.

`supports$at 規則の構文は： ◎ The syntax of the @supports rule is:

@supports `supports-condition$t {
	`rule-list$t
}

`supports-condition$t は、次で定義される： ◎ with <supports-condition> defined as:

`supports-condition@t
	= not `supports-in-parens$t
	| `supports-in-parens$t [ and `supports-in-parens$t ]*
	| `supports-in-parens$t [ or `supports-in-parens$t ]*
`supports-in-parens@t
	= ( `supports-condition$t )
	| `supports-feature$t
	| `general-enclosed$t
`supports-feature@t
    = `supports-decl$t
`supports-decl@t
	= ( `declaration^t )

【 `declaration^t 生成規則への参照が与えられていないが（過去には， `CSS-CASCADE^r にて定義されていたものと見受けられる）、それが， %名前: %値 の形をとる~propの［名前, 値］が成す~pair（ `declaration-list$t を成す 1 個の宣言）を表す。】

上の文法は、前方-互換性の理由を目的に，ごく緩くされている — `general-enclosed$t 生成規則が，将来の拡張能を得るために相応のものを許容しているので。上の文法に則って構文解析できない `supports$at 規則（すなわち，この［ `general-enclosed$t 生成規則も含めた緩い文法］に合致しない規則）は、妥当でない。 ~stylesheetには、そのような規則を利用してはナラナイ。処理器は、そのような規則を（そのすべての内容も含め）無視するモノトスル。 ◎ The above grammar is purposely very loose for forwards-compatibility reasons, since the <general-enclosed> production allows for substantial future extensibility. Any @supports rule that does not parse according to the grammar above (that is, a rule that does not match this loose grammar which includes the <general-enclosed> production) is invalid. Style sheets must not use such a rule and processors must ignore such a rule (including all of its contents).

これらの各文法~項は、次に従って，真偽値による結果に結付けられる： ◎ Each of these grammar terms is associated with a boolean result, as follows:

`supports-condition$t
`supports-in-parens$t: 結果は、子~下位式の結果になる。 ◎ The result is the result of the child subexpression.
not `supports-in-parens$t: 結果は、子 `supports-in-parens$t 項の `否定^em になる。 ◎ The result is the negation of the <supports-in-parens> term.
`supports-in-parens$t [ and `supports-in-parens$t ]*: 結果は、［子 `supports-in-parens$t 項はすべて `真^i ならば `真^i ／ ~ELSE_ `偽^i ］になる。 ◎ The result is true if all of the <supports-in-parens> child terms are true, and false otherwise.
`supports-in-parens$t [ or `supports-in-parens$t ]*: 結果は、［子 `supports-in-parens$t 項はすべて `偽^i ならば `偽^i ／ ~ELSE_ `真^i ］になる。 ◎ The result is false if all of the <supports-in-parens> child terms are false, and true otherwise.
`supports-decl$t: 結果は、［ ~UAが括弧~内の宣言を`~support$するならば `真^i ／ ~ELSE_ `偽^i ］になる。 ◎ The result is true if the UA supports the declaration within the parentheses.
`general-enclosed$t: 結果は、 `偽^i になる。 ◎ The result is false.; 作者は、 `general-enclosed$t を利用してはナラナイ。これが存在するのは、将来の互換性を得るために限られる — 新たな構文が追加されても，旧~UAにおいて `supports-condition$t が無効~化され過ぎないよう。 ◎ Authors must not use <general-enclosed> in their stylesheets. It exists only for future-compatibility, so that new syntax additions do not invalidate too much of a <supports-condition> in older user agents.

`supports$at 規則の条件は、その導入部を成す `supports-condition$t 項の結果で与えられる。 ◎ The condition of the @supports rule is the result of the <supports-condition> in its prelude.

例えば，次の規則： ◎ For example, the following rule

@supports ( display: flex ) {
  body, #navigation, #content { display: flex; }
  #navigation { background: blue; color: white; }
  #article { background: white; color: black; }
}

は、 `display$p: `flex^v が`~support$されるときに限り， `supports$at 規則の内側にある規則を適用する。 ◎ applies the rules inside the @supports rule only when display: flex is supported.

`display$p: `flex^v が`~support$されないときに代替を供するために利用できる，追加的な `supports$at 規則を次の例に示す： ◎ The following example shows an additional @supports rule that can be used to provide an alternative for when display: flex is not supported:

@supports not ( display: flex ) {
  body { width: 100%; height: 100%; background: white; color: black; }
  #navigation { width: 25%; }
  #article { width: 75%; }
}

`width$p 宣言は、 `~flex~layout$には害を及ぼし得るので，非~flex~style内に限り在ることが重要になることに注意。 ◎ Note that the width declarations may be harmful to the flex-based layout, so it is important that they be present only in the non-flex styles.

次の例では、 `box-shadow$p ~propの`~support$の有無を — その~vendor接頭辞（ `-foo-^css ）付き~versionも含めて — 検査する。それは、（接頭辞~付きの~versionも含め）`~support$されるときには， ~boxの~border（ `border$p ）に代わって影（ `box-shadow$p ）が見えるように指定する。 ◎ The following example checks for support for the box-shadow property, including checking for support for vendor-prefixed versions of it. When the support is present, it specifies both box-shadow (with the prefixed versions) and border in a way what would cause the box to become invisible were box-shadow not supported.

.noticebox {
  border: 1px solid black;
  padding: 1px;
}
@supports ( box-shadow: 0 0 2px black inset ) or
          ( -foo-box-shadow: 0 0 2px black inset ) {
  .noticebox {
    -foo-box-shadow: 0 0 2px black inset;
    box-shadow: 0 0 2px black inset;
    /* 
上の規則を `supports$at 規則の中で上書きする
◎
override the rule above the @supports rule
 */
    border: none;
    padding: 2px;
  }
}

混同を避けるため、構文においては， `and^css も `or^css も明示的に指定することが要求される（~commaや~spaceで代用するのではなく）。同様に，優先順位の混同を避けるため、［ `and^css, `or^css, `not^css ］演算子が混在するときは，括弧の利用が要求される。 ◎ To avoid confusion between and and or, the syntax requires that both and and or be specified explicitly (rather than, say, using commas or spaces for one of them). Likewise, to avoid confusion caused by precedence rules, the syntax does not allow and, or, and not operators to be mixed without a layer of parentheses.

例えば，次の規則は妥当でない： ◎ For example, the following rule is not valid:

@supports (transition-property: color) or
          (animation-name: foo) and
          (transform: rotate(10deg)) {
  /* ... */
}

作者は代わりに，次のいずれかとして書かなければナラナイ： ◎ Instead, authors must write one of the following:

@supports ((transition-property: color) or
           (animation-name: foo)) and
          (transform: rotate(10deg)) {
  /* ... */
}

あるいは

@supports (transition-property: color) or
          ((animation-name: foo) and
           (transform: rotate(10deg))) {
  /* ... */
}

~testされている宣言は、式を成す唯一の~~成分であるときは，括弧で括らなければナラナイ。 ◎ The declaration being tested must always occur within parentheses, when it is the only thing in the expression.

例えば，次の規則は妥当でない： ◎ For example, the following rule is not valid:

@supports display: flex {
  /* ... */
}

代わりに，次のように書かなければナラナイ： ◎ Instead, authors must write:

@supports (display: flex) {
  /* ... */
}

構文では、余分な括弧も許容される。この融通性は、作者にとって有用になるときもある（例えば、式の一部分を~commentで外すとき）。また、著作~toolにとっても有用になり得る。 ◎ The syntax allows extra parentheses when they are not needed. This flexibility is sometimes useful for authors (for example, when commenting out parts of an expression) and may also be useful for authoring tools.

例えば，次のように書いてもよい： ◎ For example, authors may write:

@supports ((display: flex)) {
  /* ... */
}

~testされる宣言の末尾の `!important^css は許容される。宣言の妥当性には影響しないが。 ◎ A trailing !important on a declaration being tested is allowed, though it won’t change the validity of the declaration.

例えば，次の規則は妥当である： ◎ For example, the following rule is valid:

@supports (display: flex !important) {
  /* ... */
}

6.1. ~supportの定義

前方-互換性を得るため、 `CSS21$r `§ 宣言と~prop＠~CSS22/syndata.html#declaration$ には，［ ~prop, その値］が［妥当でないときの取扱い規則］が定義されている。ある仕様を［実装しない／部分的に実装する］~CSS処理器は、値を成すある部分を［実装しないなど，利用-可能な~levelで~supportしない］場合には，この［妥当でないときの取扱い規則］に則って妥当でないものとして扱う — したがって、当の宣言を構文解析-~errorとして破棄する — モノトスル。 ◎ For forward-compatibility, section 4.1.8 (Declarations and properties) of [CSS21] defines rules for handling invalid properties and values. CSS processors that do not implement or partially implement a specification must treat any part of a value that they do not implement, or do not have a usable level of support for, as invalid according to this rule for handling invalid properties and values, and therefore must discard the declaration as a parse error.

~CSS処理器は、 `~style規則$の中の（~propと値からなる）宣言を（構文解析-~errorとして破棄せずに）受容するならば，その宣言を `~support@ するとされる。 ~CSS処理器は、所与の［ ~prop, その値］いずれかを［実装しないなど，利用-可能な~levelで~supportしない］場合には，当の宣言を［受容しないモノトスル, ~supportするものと主張してはナラナイ］。 ◎ A CSS processor is considered to support a declaration (consisting of a property and value) if it accepts that declaration (rather than discarding it as a parse error) within a style rule. If a processor does not implement, with a usable level of support, both the property and the value given, then it must not accept the declaration or claim support for it.

注記：［ ~prop／値］の~supportが［利用者-選好により実質的に不能化された］としても、この定義の下では，`~support$するものと見なされることに注意。例えば，［利用者が色を上書きする高~contrast~modeを可能化したために， `color$p ~propの宣言による効果が失われた］としても、 ~CSS処理器は， `color^p ~propを`~support$するものと見なされる。他方，試験的な~CSS特能~用にその~supportを［可能化する／不能化する］ような開発者~用の選好は、この`~support$の定義に影響する。 ◎ Note: Note that properties or values whose support is effectively disabled by user preferences are still considered as supported by this definition. For example, if a user has enabled a high-contrast mode that causes colors to be overridden, the CSS processor is still considered to support the color property even though declarations of the color property may have no effect. On the other hand, a developer-facing preference whose purpose is to enable or disable support for an experimental CSS feature does affect this definition of support.

これらの規則（およびそれらの間の等価性）は、作者が［実装-済みな特能が正しく働くよう，~fallbackを利用する］ことを許容する（先に現れた宣言を後の宣言で上書きする `CSS1$r 宣言のイミにおいても，あるいはこの仕様の `supports$at 規則が供する新たな能力があるときでも）。これは、とりわけ，複合的な値にも適用される — すなわち，［ ~style規則の内側, あるいは `supports$at 規則の宣言~条件の中］の宣言が`~support$されると見なされるためには、その値を成すすべての部分が実装されなければナラナイ。 ◎ These rules (and the equivalence between them) allow authors to use fallback (either in the [CSS1] sense of declarations that are overridden by later declarations or with the new capabilities provided by the @supports rule in this specification) that works correctly for the features implemented. This applies especially to compound values; implementations must implement all parts of the value in order to consider the declaration supported, either inside a style rule or in the declaration condition of an @supports rule.

7. API

7.1. `CSSRule^I ~interfaceに対する拡張

`CSSRule$I ~interfaceは、次により拡張される： ◎ The CSSRule interface is extended as follows:

partial interface `CSSRule$I {
    const unsigned short `SUPPORTS_RULE@m = 12;
};

7.2. `CSSConditionRule^I ~interface

`CSSConditionRule$I ~interfaceは、条件と［文の~block］からなる，すべての種類の “条件付き” ~at-規則を表現する【基底~interfaceである】。 ◎ The CSSConditionRule interface represents all the “conditional” at-rules, which consist of a condition and a statement block.

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

`conditionText@m 属性は、規則の条件を表現する。この条件は， `CSSConditionRule$I の派生d~interfaceに応じて様々であり、それらの派生d~interfaceは，この属性に対し異なる挙動を指定できる（例えば，下の `CSSMediaRule$I ）。そのような［規則に特有な挙動］が無い下では、次の規則が適用される： ◎ conditionText of type CSSOMString • The conditionText attribute represents the condition of the rule. Since what this condition does varies between the derived interfaces of CSSConditionRule, those derived interfaces may specify different behavior for this attribute (see, for example, CSSMediaRule below). In the absence of such rule-specific behavior, the following rules apply:

取得子~手続きは、結付けられた条件を直列化した結果を返す。 ◎ The conditionText attribute, on getting, must return the result of serializing the associated condition.

7.3. `CSSMediaRule^I ~interface

`CSSMediaRule$I ~interfaceは `media$at ~at-規則を表現する： ◎ The CSSMediaRule interface represents a @media at-rule:

[`Exposed$=Window]
interface `CSSMediaRule@I : `CSSConditionRule$I {
    [`SameObject$, `PutForwards$=`mediaText$m] readonly attribute `MediaList$I `media$m;
    readonly attribute `boolean$ `matches$m;
};

`media@m 取得子~手続きは、［コレが表現する `media$at ~at-規則にて指定された，`媒体~query~list$【！`媒体~query$たちが成す~list】］用の `MediaList$I ~objを返す。 ◎ The media attribute must return a MediaList object for the list of media queries specified with the @media at-rule.

`matches@m 取得子~手続きは ⇒ ~RET ~IS［コレが表現する規則は［次を満たす文書］に付された~stylesheet内に在る］ ⇒ その `Window$I に関して，コレの `media$m が表現する`媒体~query~list$【！`媒体~query$】を評価した結果 ~EQ `真^i【！matches】 ◎ matches of type boolean, readonly • The matches attribute returns true if the rule is in an stylesheet attached to a document whose Window matches this rule’s media media query, and returns false otherwise.

基底~interface `CSSConditionRule$I 上で定義される `conditionText$m 属性の取得子には、この~interfaceに特有な挙動が定義される： ◎ conditionText of type CSSOMString (CSSMediaRule-specific definition for attribute on CSSConditionRule)

取得子~手続きは ⇒ ~RET コレの `media$m の `mediaText$m 属性の値 ◎ The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the value of media.mediaText on the rule.

7.4. `CSSSupportsRule^I ~interface

`CSSSupportsRule$I ~interfaceは `supports$at 規則を表現する。 ◎ The CSSSupportsRule interface represents a @supports rule.

[`Exposed$=Window]
interface `CSSSupportsRule@I : `CSSConditionRule$I {
  readonly attribute `boolean$ `~matches0$m;
};

`~matches0@m 取得子~手続きは ⇒ ~RET ~IS［コレの `conditionText$m が表現する`~CSS特能~query$を評価した結果 ~EQ `真^i ］ ◎ matches of type boolean, readonly • The matches attribute returns the evaluation of the CSS feature query represented in conditionText.

`CSSConditionRule$I 上で定義される `conditionText$m 属性の取得子には、この~interfaceに特有な挙動が定義される：

取得子~手続きは、指定された条件を返す。

指定された条件が［この仕様に適合するどの実装の下でも同じ結果に評価される］ようにするため、返される条件には，いかなる論理的な簡約も施さないモノトスル（［ `general-enclosed$t による，この仕様における拡張能の仕組み］により許容される，将来の拡張を実装する実装も含む）。言い換えれば、 ~token~streamの簡約（空白~列を 1 個の~spaceに~~縮約する, 空白を省略できる所では省略する, など）は許容されるが，論理的な簡約（不要な括弧の除去, 評価-結果に基づく簡約, など）は許容されない。

◎ conditionText of type CSSOMString (CSSSupportsRule-specific definition for attribute on CSSConditionRule) • The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the condition that was specified, without any logical simplifications, so that the returned condition will evaluate to the same result as the specified condition in any conformant implementation of this specification (including implementations that implement future extensions allowed by the <general-enclosed> extensibility mechanism in this specification). In other words, token stream simplifications are allowed (such as reducing whitespace to a single space or omitting it in cases where it is known to be optional), but logical simplifications (such as removal of unneeded parentheses, or simplification based on evaluating results) are not allowed.

7.5. `CSS^I ~nsと `supports()^m 関数

`CSS$I ~nsは、他に属さない，~CSSに関係する有用な関数を保持する。 ◎ The CSS namespace holds useful CSS-related functions that do not belong elsewhere.

partial namespace `CSS$I {
  `boolean$ `supports$m(`CSSOMString$ %property, `CSSOMString$ %value);
  `boolean$ `~supports0$m(`CSSOMString$ %conditionText);
};

`supports(property, value)@m ~method手続きは： ◎ supports(CSSOMString property, CSSOMString value), returns boolean ◎ When the supports(property, value) method is invoked with two arguments property and value:

~RET ~IS［ ~AND↓ ］：
- ~OR↓：
  - %property は［ある定義-済みな, かつ~UAが~supportする~CSS~prop ］に`~ASCII大小無視$で合致する
  - %property は`~custom~prop名~文字列$である
- %value を %property ~propの`文法に則って構文解析-$した結果 ~NEQ `失敗^i
◎ If property is an ASCII case-insensitive match for any defined CSS property that the UA supports,＼ or is a custom property name string,＼ and value successfully parses according to that property’s grammar, return true. ◎ Otherwise, return false.

注記： ~prop名に対しては，~CSS~escapeや空白~処理は遂行されないので、 `CSS.supports(" width", "5px")^c は ~F を返すことになる — ` width^l は、先頭に~spaceがあることに因り，どの~propの名前でもないので。 ◎ Note: No CSS escape or whitespace processing is performed on the property name, so CSS.supports(" width", "5px") will return false, as " width" isn’t the name of any property due to the leading space.

注記： `!important^css ~flagは、 ~prop文法の一部を成さないので， %value を無効として構文解析させることになる — `element.style.setProperty()＠~CSSOM1#dom-cssstyledeclaration-setproperty$c の %value 引数のときと同じく。 ◎ Note: !important flags are not part of property grammars, and will cause value to parse as invalid, just as they would in the value argument to element.style.setProperty().

`~supports0(conditionText)@m ~method手続きは： ◎ supports(CSSOMString conditionText), returns boolean ◎ When the supports(conditionText) method is invoked with a single conditionText argument:

« %conditionText, %conditionText を丸括弧で括った文字列 » を成す ~EACH( %文字列 ) に対し：
1. %結果 ~LET %文字列を `supports-condition$t の`文法に則って構文解析-$した結果
2. ~IF［ %結果 ~EQ `失敗^i ］ ⇒ ~CONTINUE
3. ~IF［ %結果を `supports-condition$t として評価した結果 ~EQ `真^i ］ ⇒ ~RET ~T
◎ If conditionText, parsed and evaluated as a <supports-condition>, would return true, return true. ◎ Otherwise, If conditionText, wrapped in parentheses and then parsed and evaluated as a <supports-condition>, would return true, return true.
~RET ~F ◎ Otherwise, return false.

`名前空間接頭辞$【！名前空間】は、 %conditionText 引数においては，常に無効と見なされる — `document.querySelector("a|b")＠~DOM4#dom-parentnode-queryselector$c のときと同じく。 ◎ All namespaces in the conditionText argument are considered invalid, just as they are in document.querySelector("a|b").

~securityの考慮点

この文書に対し提起された~securityの課題は無い。 ◎ No security issues have been raised against this document

~privacyの考慮点

この仕様における様々な特能は、主に `media$at 規則に結付けられるが，ある程度は `supports$at 規則にも結付けられ、利用者の［ ~hardwareと~software, および環境設定と状態］についての情報を，~Web内容に供する。そのような情報のほとんどは、この仕様~内の特能ではなく `MEDIAQUERIES-4$r 内の特能を通して供される。しかしながら， `supports$at 規則は、利用者の~software, およびそれが［ある種の特能を［可能化-／不能化- ］し得るような，既定でない設定群の下で稼働しているかどうか］について，何らかの追加的な詳細を供するかもしれない。 ◎ Various features in this specification, associated mainly with the @media rule but also to some degree with the @supports rule, provide information to Web content about the user’s hardware and software and their configuration and state. Most of the information is provided through the features in [MEDIAQUERIES-4] rather than through the features in this specification. However, the @supports rule may provide some additional details about the user’s software and whether it is running with non-default settings that may enable or disable certain features.

そのような情報のほとんどは、他の~APIを通しても決定できる。しかしながら、この仕様における特能も，この情報を~Web上に公開する仕方の一つになる。 ◎ Most of this information can also be determined through other APIs. However, the features in this specification are one of the ways this information is exposed on the Web.

この情報は、集成することにより，利用者の `指紋収集＠https://www.w3.org/2001/tag/doc/unsanctioned-tracking/$ の正確度を向上するためにも利用され得る。 ◎ This information can also, in aggregate, be used to improve the accuracy of fingerprinting of the user.

変更点

（編集上のものは除く。）【変更~箇所の引用は省略する。】 ◎ ↓

`2024年 8 月 15日勧告候補~草案＠~TR/2020/CRD-css-conditional-3-20240815/$ からの変更点 ◎ The following (non-editorial) changes were made to this specification since the 15 August 2024 Candidate Recommendation Draft:: （まだ無い） ◎ none
`2022年 1 月 13日勧告候補~snapshot＠~TR/2020/CR-css-conditional-3-20220113/$ からの変更点 ◎ The following (non-editorial) changes were made to this specification since the 13 January 2022 Candidate Recommendation Snapshot:: `supports()$m は［ ~custom~propの値が妥当でない場合は ~F を返す］モノトスルことを明確化した。 ◎ Clarified that supports() must return false for invalid custom property values; ~Web~IDLにおける `bool^c を `boolean^c に修正した。 ◎ Fixed Web IDL, "bool" should have been "boolean"; ~CSS処理器は、［ ~prop, その値］どちらも~supportするモノトスル【さもなければ，`~support$するものとは定義されない】ことを明確化した。（ `8795$issue ） ◎ Clarified that a processor must support both the property and the value (Issue 8795); `CSSMediaRule$I, `CSSSupportsRule$I 【！`media^at, `supports^at】に `matches^m を追加した。（ `4240$issue ） ◎ Added .matches to @media and @supports (Issue 4240); ［構文解析~algo, ~block生成規則］の名前を新たな名前へ更新した。 ◎ Updated to the new parsing algo names and block production names.; 読専になった `CSSMediaRule$I の `conditionText^m 用の設定子~手続き【！procedure to set】を除去した。（ `pull #8796＠https://github.com/w3c/csswg-drafts/pull/8796$ ） ◎ Removed procedure to set readonly CSSMediaRule.conditionText (PR 8796); `CSSConditionRule$I の `conditionText$m を読専にした。 ◎ Made conditionText readonly.
`2020年 12 月 8日勧告候補~snapshot＠~TR/2020/CR-css-conditional-3-20201208/$ からの変更点 ◎ The following (non-editorial) changes were made to this specification since the 8 December 2020 Candidate Recommendation Snapshot:: 【`~support$の定義が基づく】 ~prop宣言を破棄するか否かは、［ ~at-規則ではなく，~style規則］【の中のそれら】に限り適用されることを明確化した。 ◎ Clarified that discarding property declarations only applies to style rules, not at-rules; `!important^css は、 ~prop文法の一部を成さないことを明確化した。 ◎ Clarified that !important is not part of the property grammar; ~securityと~privacyの考慮点を別々な節に分割した。 ◎ Split Security and Privacy into separate sections; `supports$at 規則の条件付き構文を参照rする用語［ `~CSS特能~query$, `~supports~query$ ］を定義して、他所から参照し易くした。 ◎ Defined the terms CSS feature queries and supports queries to refer to the conditional syntax of the @supports rules, to allow better cross-referencing.; `~CSS特能~query$の真偽-論理から `未知^i 値を除去して、代わりに，認識されない構文は `偽^i に評価されるものと定義した。（ `6175$issue ） ◎ Removed the “unknown” value in CSS feature queries’ boolean logic, defining unrecognized syntaxes as “false” instead. (Issue 6175); `条件付き~group規則$の`配置＠#use$を明確化した。（ `5697$issue ） ◎ Clarified placement of conditional group rules. (Issue 5697)
`2013 年 4月 4日勧告候補＠~TR/2013/CR-css3-conditional-20130404/$ からの変更点 ◎ The following (non-editorial) changes were made to this specification since the 4 April 2013 Candidate Recommendation:: `~supports0(conditionText)$m の引数における`名前空間接頭辞$【！名前空間】は、無効になることを明確化した。 ◎ Clarified that namespaces in conditionText are invalid; 新たな編集者を追加した。 ◎ New editors added; “文法に合致する” ではなく，明示的に`文法に則って構文解析-$する~algoを~callするようにした。 ◎ Added explicit call to parse rather than "matches the grammar"; `CSSOM-1$r にてすでに定義されていた `CSSGroupingRule$I を除去した。 ◎ Removed duplicate CSSGroupingRule, which is already defined by CSSOM; `supports(property, val)$m の~textを~algoの形に書き直して，`登録-済み~custom~prop$の構文に対する~~扱いを判り易くした。 ◎ Rewrote the supports() text into algorithm form, to make it easier to express that you pay attention to the syntax of registered custom properties in the supports(prop, val) form.; `supports^at 選択子【 `supports-selector-fn$t 】の定義を~level 4 へ移動した。 ◎ Moved the definition of @supports selector to css-conditional-4.; `supports$at 規則は、もはや~risk下でなくなった。 ◎ @supports' is no longer at risk.; `CSS21$r による文法ではなく， `CSS-SYNTAX-3$r による文法を利用するよう書き直した。 ◎ Rewrote to use CSS Syntax grammars, not CSS 2.1 grammars; `CSS$I を~interfaceから~Web~IDLに互換な~nsに変更した。 ◎ Changed from CSS Interface to WebIDL-compatible CSS namespace; `Media Queries＠~TR/css3-mediaqueries/$cite との一貫性を得るため、［ `and^css ／`or^css ／ `not^css ］~keywordの前後に空白を要求する要件を外した。（それら自体は CSS の~token化におけるより謎めいたある側面に依拠する，ある~CSS最小~化器の出力との互換性により拘束される）。空白（または~comment）は、これらの~keywordの`後には^em，依然として要求されることに注意 — さもなければ、それらの~keywordとそれに続く開き丸括弧は，関数の~~開始~tokenに~token化されることになるので。 ◎ Dropped requirement for spaces around and, or, and not keywords for consistency with Media Queries (which are themselves constrained by compatibility with the output of some CSS minimizers that rely on some of the more arcane aspects of CSS tokenization). Note that white space--or a comment--is still required after these keywords, since without it they and the ensuing opening parenthesis will be tokenized as a function opening token.; `~supports0()$m ~methodにおいて、単純な宣言に対する暗黙な丸括弧も許容した — `import$at 規則の `supports$f 関数との一貫性を得るため。 ◎ Allowed the supports() method to imply parentheses for simple declarations, for consistency with the @import rule’s supports() function.; ~IDL~codeに抜けていた~semicolonを修正した。 ◎ Fixed missing semicolons in IDL code.; 他の~moduleに対する変更に呼応して，［ ~link, 各種用語, 例示~code ］を更新した。 ◎ Updated links, terminology, and example code in response to changes to other modules.; 綴りと文法~上の誤りを正した。 ◎ Spelling and grammatical corrections; `§ ~securityの考慮点＠#security$, `§ ~privacyの考慮点＠#privacy$ を追加した。 ◎ Added section on privacy and security considerations.

謝辞

Thanks to the ideas and feedback from Tab Atkins, Arthur Barstow, Ben Callahan, Tantek Çelik, Alex Danilo, Elika Etemad, Pascal Germroth, Björn Höhrmann, Paul Irish, Brad Kemper, Anne van Kesteren, Vitor Menezes, Alex Mogilevsky, Chris Moschini, James Nurthen, Simon Pieters, Florian Rivoal, Simon Sapin, Nicholas Shanks, Ben Ward, Zack Weinberg, Estelle Weyl, Boris Zbarsky, and all the rest of the `www-style＠https://lists.w3.org/Archives/Public/www-style/$ community.