1. 序論
1.1. 背景
~INFORMATIVE
`CSS21$r では、`条件付き~group規則$の一種として
`media$at 規則が定義されており,その内側には(他の at-規則でない)~style規則のみが許容されている。
`media$at 規則は、媒体~特有の~stylesheetを持つ能を供する。
それは、
`import^at や
<link>
などの,~stylesheetへ~linkする特色機能でも供されている。
しかしながら, `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 規則の特色機能を置換し,それを拡張する。 また、以前の `MEDIAQ$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 [MEDIAQ] section 1.
現在の定義は, `CSS3-FONTS$r および `CSS3-ANIMATIONS$r にて定義されている at-規則に依存しているが、この依存関係は,これらの~moduleの策定がこの仕様よりも速やかに進行することが前提にある。 この~moduleの策定がより速やかに進行した場合、この依存関係は逆になる。 ◎ Its current definition depends on @-rules defined in [CSS3-FONTS] and [CSS3-ANIMATIONS], but that dependency is only on the assumption that those modules will advance ahead of this one. If this module advances faster, then the dependency will be reversed.
~CSS~stylesheetの中で これらの新たな at-規則が許容されるようにするため、この仕様は, `CSS21$r の 付録 G による `stylesheet^P 生成規則を改変する。 `CSS21$r にて定義される `media^P 生成規則をこの仕様に定義される `media$P 生成規則に置換した上で, "`ruleset | media | page^c" の後に "` | supports_rule^c" を付加する。 ◎ In order to allow these new @-rules in CSS style sheets, this specification modifies the stylesheet production in the Appendix G grammar of [CSS21] by replacing the media production defined in [CSS21] with the media production defined in this one, and additionally inserting | supports_rule alongside ruleset | media | page.
2. 条件付き~group規則の処理
この仕様は、 `条件付き~group規則@ と呼ばれる~CSS at-規則を定義する。 それは、いくつかの~CSS規則からなる~groupに,条件を結付ける。 ~testする条件には様々なものが許容されるが、[ 内容が,条件の真偽に基づいてどう利用されるか ]についての挙動は,共通する。 ◎ This specification defines some CSS @-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" の要素を
`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規則$は、随時, 真または偽に評価される条件を持つ。 ~CSS処理器は、条件が真のときは,~group規則の内側の規則を それらが~group規則の所に在ったかのように 適用し~MUST。 ~CSS処理器は、条件が偽のときは,~group規則の内側のどの規則も 適用しては~MUST_NOT。 条件の現在の状態が ~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規則の条件すべてが真になるときに限り,その末端の内側の規則が適用されることを意味する。 ◎ 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) の条件は印刷~媒体に対しては真であり, 規則 (2) の条件は表示~区画(印刷~媒体の場合は~page~box)の横幅が 12 cm 以下のときに真になる。 したがって、規則 #navigation { `display$p: `none^v } は,この~stylesheetが印刷~媒体に適用されているときに適用され、規則 .note { `float^p: `none^v } は,~stylesheetが印刷~媒体に適用されていて, かつ ~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により, CSSOM を通して】 変更されたときには、その真偽に応じて,その規則の適用-可否を反映し~MUST。 ただし、内側にある~propのうち,その算出値の効果が その値の存続期間を過ぎても持続するものと定義されているものは除く(例えば `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(括弧に括られた部分)を成す, `~group規則の本体@
`~group規則の本体$には、任意の~style規則, および[ ~stylesheetの~top-levelにて~style規則の前後いずれの側にも許容されるような,任意の at-規則 ]を包含させれる。 すなわち,~stylesheetの開始部分に存在し~MUST at-規則( `charset^at, `import^at, `namespace^at 規則など)は、`条件付き~group規則$の内側には許容されない。 `条件付き~group規則$は、入子にすることもできる。 ◎ A group rule body is allowed to contain style rules and any @-rules that are allowed at the top level of a style sheet before and after a style rule. This means that @-rules that must occur at the beginning of the style sheet (such as '@charset', '@import', and '@namespace' rules) are not allowed inside of conditional group rules. Conditional group rules can be nested.
文法においては、`条件付き~group規則$の文法に利用するための,次の生成規則が定義される。 ◎ In terms of the grammar, this specification defines the following productions for use in the grammar of conditional group rules:
注記: ~style規則は `ruleset^P 生成規則の文法の中で定義される。 ◎ Note: Style rules are defined in grammars by the ruleset production.
`nested_statement@P : `ruleset^P | `media$P | `page^P | `font_face_rule^P | `keyframes_rule^P | `supports_rule$P ; `group_rule_body@P : '{' S* `nested_statement$P* '}' S* ;
`font_face_rule^P は `CSS3-FONTS$r にて定義される。 `keyframes_rule^P は `CSS3-ANIMATIONS$r にて定義される。 `media$P と `supports_rule$P はこの仕様にて定義される。 他の生成規則は CSS21 の文法の中で定義される。 ◎ in which all the productions are defined in that grammar with the exception of font_face_rule defined in [CSS3-FONTS], keyframes_rule defined in [CSS3-ANIMATIONS], and media and supports_rule defined in this specification.
一般に、将来の~CSS仕様が,[ 何らかの他~種の規則の後に生じることが禁止されないような,新たな at-規則 ]を追加するために,この `nested_statement$P 生成規則を改変するときは、この文法が正確aであり続けられるようにするべきである。 ◎ In general, future CSS specifications that add new @-rules that are not forbidden to occur after some other types of rules should modify this nested_statement production to keep the grammar accurate.
~stylesheetには、`条件付き~group規則$の内側に許容されるもの以外の規則を利用しては~MUST_NOT。 ◎ Style sheets must not use rules other than the allowed ones inside conditional group rules.
~CSS処理器は、条件付き~group規則の内側に,許容されない規則があれば、それらを無視し~MUST。 また,~group規則の内側の妥当でない規則については、 `CSS21$rの 4.2 節 (構文解析~errorの取扱い規則), 4.1.5 節 (at-規則), 4.1.7 節 (規則~集合, 宣言~block, 選択子) の記述に従って,取扱うことが要求される。 ◎ CSS processors must ignore rules that are not allowed within a group rule, and must handle invalid rules inside of group rules as described in section 4.2 (Rules for handling parsing errors), section 4.1.5 (At-rules), and section 4.1.7 (Rule sets, declaration blocks, and selectors) of [CSS21].
4. 条件付き~group規則が許容される場所
`条件付き~group規則$は、~stylesheetの~top-level, および 他の`条件付き~group規則$の内側にて許容される。 ~CSS処理器は、それらを2節 条件付き~group規則の処理 に従って処理し~MUST。 ◎ Conditional group rules are allowed at the top-level of a style sheet, and inside other conditional group rules. CSS processors must process such rules as described above.
~style規則より後の位置には許容されない規則(例えば `charset^at, `import^at, `namespace^at 規則など)は、`条件付き~group規則$の後でも許容されない。 したがって、~stylesheetの中では,そのような規則が`条件付き~group規則$の後に置かれては~MUST_NOT。 また、~CSS処理器は,そのような規則を無視し~MUST。 ◎ Any 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. Therefore, style sheets must not place such rules after a conditional group rules, and CSS processors must ignore such rules.
5. 媒体~特有の~stylesheet: `media^at 規則
`media@at 規則は、条件が`媒体~query$であるような `条件付き~group規則$であり,[ at-~keyword `media$at, (空もとり得る)`媒体~query~list$( `MEDIAQ$r にて定義される), `~group規則の本体$ ]の並びからなる。 規則の条件は,`媒体~query$の結果で与えられる。 ◎ The @media rule is a conditional group rule whose condition is a media query. It consists of the at-keyword '@media' followed by a (possibly empty) media query list (as defined in [MEDIAQ]), followed by a group rule body. 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表示であって, かつ その表示域の横幅が初期~font~sizeの 35 倍以上である ], または[ 印刷~表示であって, かつ その表示域の横幅が初期~font~sizeの 40 倍以上である ]ときに、真になる条件 screen and (`min-width^p: `35em^v), print and (`min-width^p: `40em^v) を持つ。 これらのいずれかが成立するとき,規則の条件は真になり、規則 #section_navigation { `float^p: `left^v; `width^p: `10em^v; } が適用される。 ◎ has the condition screen and (min-width: 35em), print and (min-width: 40em), which is true for screen displays whose viewport is at least 35 times the initial font size and for print displays whose viewport is at least 40 times the initial font size. When either of these is true, the condition of the rule is true, and the rule #section_navigation { float: left; width: 10em; } is applied.
文法においては、`CSS 2.1 の文法$( `CSS21$r, 付録 G )の `media^P 生成規則が,次の様に拡張される: ◎ In terms of the grammar, this specification extends the media production in the Grammar of CSS 2.1 ([CSS21], Appendix G) into:
`media@P : MEDIA_SYM S* `media_query_list$P `group_rule_body$P ;
`group_rule_body$P 生成規則は この仕様にて定義される。 `media_query_list$P 生成規則は `MEDIAQ$r にて定義される。 他のものは `CSS 2.1 の文法$にて定義される。 【参考:Media Queries Level 4 による構文】 ◎ where the group_rule_body production is defined in this specification, the media_query_list production is defined in [MEDIAQ], and the others are defined in the Grammar of CSS 2.1 ([CSS21], Appendix G).
6. 特色機能~query: `supports^at 規則
`supports@at 規則は、~UAが [ ~CSS~prop: その値 ]の組を`~support$するかどうかを~testする,`条件付き~group規則$である。 これを,[ 新たな特色機能が~supportされていて可用なときは それを利用し,そうでなければ 上品に退行する ]ような~stylesheetを記すときに、利用できる。 ~CSSには、未~supportの[ ~prop/~propの値 ]を無視するなど,上品に退行するための既存の仕組みも備わっているが、[ 新たな~layout~systemによる特色機能 ]を利用するときなど,[ ~styleの巨大な~groupを,一定の特色機能の~supportに束ねる ]に足るものではない。 ◎ 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. 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 規則の中の条件の構文は、(`媒体~query$と多少の類似性はあるが)他の`条件付き~group規則$に対するものより少しばかり複雑になる。 何故なら: ◎ The syntax of the condition in the '@supports' rule is slightly more complicated than for the other conditional group rules (though has some similarities to media queries) since:
- 新たな特色機能による~styleと, ~fallbackの~styleを,[ ( at-規則の構文~用の前方互換な文法の規則の中で)分離できるようにする ]ため, および[ 互いが相手を上書きしないようにする ]ためには、否定( negation — `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
- 複数の特色機能が要求されるときに,それを~testするためには、論理積( conjunction — `and^css )が必要になる。 ◎ conjunction (and) is needed so that multiple required features can be tested
- ~style集合~用の,代替の特色機能が複数あるときには、論理和( disjunction — `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の[名前:値]の組, および それらを[ 論理積( `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.
これは、次を追加して, `CSS 2.1 の文法$( `CSS21$r, 付録 G )の字句~scannerを拡張する: ◎ This extends the lexical scanner in the Grammar of CSS 2.1 ([CSS21], Appendix G) by adding:
@{S}{U}{P}{P}{O}{R}{T}{S} {return `SUPPORTS_SYM@P;} {O}{R} {return `OR@P;}
次に、この字句~scannerに次のもの:
- Media Queries 仕様 `MEDIAQ$r にて定義される[ `AND$P, `NOT$P ]~token
- 上で定義された[ `OR$P, `SUPPORTS_SYM$P ]~token
- [ `declaration$P, `any$P, `unused$P ]生成規則
- `CSS21$r の 4.1.1 節 (~token化) にて定義される~CSSの中核~構文から採られた `FUNCTION$P ~token
を追加した上で,次を追加することにより、 `CSS 2.1 の文法$を拡張する:
◎ This then extends the grammar in the Grammar of CSS 2.1, using the lexical scanner there, with the additions of AND and NOT tokens defined in the Media Queries specification [MEDIAQ] and the OR and SUPPORTS_SYM tokens defined above, and with declaration, any, and unused productions and the FUNCTION token taken from the core syntax of CSS defined in section 4.1.1 (Tokenization) of [CSS21], by adding:`supports_rule@P : `SUPPORTS_SYM$P `S$P* `supports_condition$P `group_rule_body$P ; `supports_condition@P : `supports_negation$P | `supports_conjunction$P | `supports_disjunction$P | `supports_condition_in_parens$P ; `supports_condition_in_parens@P : ( '(' `S$P* `supports_condition$P ')' `S$P* ) | `supports_declaration_condition$P | `general_enclosed$P ; `supports_negation@P : `NOT$P `S$P* `supports_condition_in_parens$P ; `supports_conjunction@P : `supports_condition_in_parens$P ( `AND$P `S$P* `supports_condition_in_parens$P )+ ; `supports_disjunction@P : `supports_condition_in_parens$P ( `OR$P `S$P* `supports_condition_in_parens$P )+ ; `supports_declaration_condition@P : '(' `S$P* `declaration$P ')' `S$P* ; `general_enclosed@P : ( `FUNCTION$P | '(' ) ( `any$P | `unused$P )* ')' `S$P* ;
`supports-condition@t 生成規則は `supports_condition$P 文法に合致するものとして定義される。 ◎ The <supports-condition> production is defined as matching the supports_condition grammar, defined above.
実装は、上の文法に基づいて
`supports$at
規則を構文解析し~MUST。
上の文法を解釈する際には、演算子 "|
" の前に位置する生成規則を,後に位置するものより先に合致させ~MUST。
◎
Implementations must parse @supports rules based on the above grammar, and when interpreting the above grammar, must match the production before an | operator in preference to the one after it.
上の文法は、前方互換性の理由から~~意図的に緩くされている。 `general_enclosed$P 生成規則が,将来の拡張性のために相応のものを許容しているので。 上の文法に則って構文解析できない `supports$at 規則(すなわち `general_enclosed$P 生成規則を含みつつ,この緩い文法に合致しない規則)は、妥当でない。 ~stylesheetは、そのような規則を用いては~MUST_NOT。 処理器は、そのような規則を(そのすべての内容も含め)無視し~MUST。 ◎ 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$P
- 結果は、子のいずれかの文法記号の結果になる。 ◎ The result is the result of the single child term.
- `supports_condition_in_parens$P
- 結果は、子の `supports_condition$P または `supports_declaration_condition$P 文法記号の結果になる。 ◎ The result is the result of the single supports_condition or supports_declaration_condition child term.
- `supports_negation$P
- 結果は、子の `supports_condition_in_parens$P 文法記号の結果の 否定 になる。 ◎ The result is the negation of the result of the supports_condition_in_parens child term.
- `supports_conjunction$P
- 結果は、子の すべて の `supports_condition_in_parens$P 文法記号の結果が真であれば真, 他の場合は偽になる。 ◎ The result is true if the result of all of the supports_condition_in_parens child terms is true; otherwise it is false.
- `supports_disjunction$P
- 結果は、子の いずれか の `supports_condition_in_parens$P 文法記号の結果が真であれば真, 他の場合は偽になる。 ◎ The result is true if the result of any of the supports_condition_in_parens child terms is true; otherwise it is false.
- `supports_declaration_condition$P
- 結果は、~CSS処理器が 括弧~内の宣言を`~support$するならば真, 他の場合は偽になる。 ◎ The result is whether the CSS processor supports the declaration within the parentheses.
- `general_enclosed$P
- 結果は常に偽になる。 加えて,~stylesheetには、この文法~生成規則に合致する `supports$at 規則が書かれては~MUST_NOT。 (言い換えれば、この生成規則は,将来の拡張性のためのみに存在するものであり、現~levelの仕様の下では,妥当な~stylesheetの記述の一部にはならない)。 ◎ The result is always false. Additionally, style sheets must not write @supports rules that match this grammar production. (In other words, this production exists only for future extensibility, and is not part of the description of a valid style sheet in this level of the specification.) Note that future levels may define functions or other parenthesized expressions that can evaluate to true.
- 注記: 将来の~levelにて、真に評価され得るような,[ 関数式, あるいは括弧で括られる他の式 ]が、定義され得る。 ◎ ↑
`supports$at 規則の条件は、 `supports_rule$P 文法記号の子である `supports_condition$P 文法記号の結果で与えられる。 ◎ The condition of the '@supports' rule is the result of the supports_condition term that is a child of the supports_rule term.
例えば,次の規則: ◎ 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$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)) { // ... }
代わりに,次の様に書かれ~MUST: ◎ 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されている宣言が,式の中の唯一の成分であるときは、括弧で括られ~MUST。 ◎ 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 { // ... }
代わりに次の様に書かれ~MUST: ◎ 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 4.1.8 節 (宣言と~prop)には,~propや値が妥当でないときの取扱い規則が規定されている。 仕様を実装しない あるいは部分的に実装する~CSS処理器は、自身が実装しない, あるいは実用~levelで~supportしない値のどの部分も,この[ ~propや値が妥当でないときの取扱い規則 ]に則って妥当でないものとして扱わ~MUST — したがって,その宣言を構文解析~errorとして破棄し~MUST。 ◎ 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処理器は、(~propと値からなる)宣言を(構文解析~errorとして破棄せずに)受理するとき,その宣言を `~support@ するとされる。 所与の値を実装しない, あるいは実用~levelで~supportしない処理器は、その宣言を受理したり, それを~supportすると主張しては~MUST_NOT。 ◎ 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). If a processor does not implement, with a usable level of support, the value given, then it must not accept the declaration or claim support for it.
注記: 利用者の選好により~supportが実質的に不能化された~propや値は、依然として,この定義の下では`~support$するものと見なされることに注意。 例えば、利用者が 色を上書きする高~contrast~modeを可能化したために, `color^p ~propの宣言の効果が失われたとしても、依然として,~CSS処理器はその~propを`~support$するものと見なされる。 他方、試験的な~CSS特色機能の~supportを可能化-/不能化するような,開発者~用の選好は、この`~support$の定義に影響する。 ◎ 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$されると見なされるためには、その値のすべての部分が実装されてい~MUST。 ◎ 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. `CSSGroupingRule^I ~interface
`CSSGroupingRule$I ~interfaceは、他の規則を入子にして包含する at-規則を表現する。 ◎ The CSSGroupingRule interface represents an at-rule that contains other rules nested inside itself.
[`Exposed$=Window] interface `CSSGroupingRule@I : `CSSRule$I { readonly attribute `CSSRuleList$I `cssRules$m; unsigned long `insertRule$m(`CSSOMString$ rule, unsigned long %index); void `deleteRule$m(unsigned long %index); };
- `cssRules@m
- 取得子は、~group化~規則の内側に入子にされた~CSS規則の~listを表現する `CSSRuleList^I ~objを返さ~MUST。 ◎ The cssRules attribute must return a CSSRuleList object for the list of CSS rules nested inside the grouping rule.
- `insertRule(rule, index)@m
-
被呼出時には、~CSS規則 %rule を, `cssRules^m から返される~CSS規則~listの中の %index の位置に挿入し~MUST。 %index 以降の規則は,一つずつ後にずらされることになる。 ただし,次に該当する場合は、例外が投出され~MUST:
- %index が `cssRules.length^m より大きい場合:
- `IndexSizeError^E
- 規則に構文~errorがあって構文解析-不能な場合:
- `SyntaxError^E
- これには、規則の内側の構成子における~error取扱い規則により取扱われる構文~errorは含まれないが、所与の文字列が単独の~CSS規則に構文解析されない場合(例えば文字列が空のとき)や, その単独の~CSS規則の後に 空白でも~commentでもないものが来る場合は含まれる。
- 指定された所に規則を挿入できない場合:
- `HierarchyRequestError^E
- 例えば、 `import^at 規則が~group規則の内側に挿入された場合など。
- これは、 %index ~parameterをそのまま返す。 ◎ The return value is the index parameter.
- `deleteRule(index)@m
- 被呼出時には、 `cssRules$m から返される~CSS規則~listから, %index に位置する~CSS規則を除去し~MUST — ただし,[ %index ~GTE `cssRules.length^m ]の場合は、 `IndexSizeError^E を投出し~MUST。 ◎ The deleteRule operation must remove a CSS rule from the CSS rule list returned by cssRules at index. It must throw INDEX_SIZE_ERR if index is greater than or equal to cssRules.length.
7.3. `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 { attribute `CSSOMString$ `conditionText$m; };
- `conditionText@m
-
この属性は、規則の条件を表現する。 この条件は `CSSConditionRule$I の派生~interfaceによって様々であり、それらの派生~interfaceはこの属性に対し,異なる挙動を指定し得る(例えば,下の `CSSMediaRule$I )。 その種の規則~特有の挙動が不在の下では、次の規則が適用される: ◎ 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:
- 取得子は、結付けられている条件を直列化した結果を返さ~MUST。 ◎ The conditionText attribute, on getting, must return the result of serializing the associated condition.
-
設定子は、次を走らせ~MUST。 ◎ On setting the conditionText attribute these steps must be run:
- 所与の値の前後の空白 並びを取り除く。 ◎ Trim the given value of white space.
- 所与の値が、所与の規則に対する適切な条件 生成規則の文法に合致する場合、結付けられている~CSS条件を所与の値で置換する。 ◎ If the given value matches the grammar of the appropriate condition production for the given rule, replace the associated CSS condition with the given value.
- 他の場合、何もしない。 ◎ Otherwise, do nothing.
7.4. `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; };
- `media@m
- 取得子は、[ `media$at at-規則で指定された,`媒体~query$の~list ]に対する `MediaList$I ~objを返さ~MUST。 ◎ The media attribute must return a MediaList object for the list of media queries specified with the @media at-rule.
- `conditionText$m
-
基底~interface `CSSConditionRule$I にて定義される,この属性には、この~interface特有の挙動が定義される:
- 取得子は、この規則の `media$m 上の `mediaText$m 属性の値を返さ~MUST。 ◎ The conditionText attribute (defined on the CSSConditionRule parent rule), on getting, must return the value of media.mediaText on the rule.
- 設定子は、この規則の `media$m 上の `mediaText$m 属性に所与の値を設定し~MUST。 ◎ Setting the conditionText attribute must set the media.mediaText attribute on the rule.
7.5. `CSSSupportsRule^I ~interface
`CSSSupportsRule$I ~interfaceは `supports$at 規則を表現する。 ◎ The CSSSupportsRule interface represents a @supports rule.
[`Exposed$=Window] interface `CSSSupportsRule@I : `CSSConditionRule$I { };
- `conditionText$m
-
基底~interface `CSSConditionRule$I にて定義される,この属性には、この~interface特有の挙動が定義される:
- 取得子は、指定されている条件を返さ~MUST。
- 指定されている条件が、この仕様に適合するどの実装の下でも同じ結果に評価されるようにするため、返される条件には,いかなる論理的な簡約も施されてはならない(この仕様の `general_enclosed$P 拡張性の仕組みにより許容される将来の拡張を実装する実装も含め)。 言い換えれば、~token~streamの簡約は許容されるが(空白を, 1 個の~spaceに縮約したり, 省略できる所では省略するなど)、論理的な簡約(不要な括弧の除去や, 評価結果に基づく,簡約など)は許容されない。
7.6. `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
- 被呼出時には、[ %property が~UAが`~support$する~CSS~propの名前に~literalとして合致する, かつ %value がその~propで~supportされる値として成功裡に構文解析される場合は ~T / 他の場合は ~F ]を返さ~MUST。 (~literalとして合致とは、~CSS~escape処理は遂行されず, 先頭や末尾の空白は剥がされないことを意味する。 したがって, %property の先頭や末尾に空白があったり, %property に~CSS~escapeが含まれていても、 ~F が返される。) ◎ When the supports() method is invoked with two arguments property and value, it must return true if property is a literal match for the name of a CSS property that the UA supports, and value would be successfully parsed as a supported value for that property. (Literal match means that no CSS escape processing is performed, and leading and trailing whitespace are not stripped, so any leading whitespace, trailing whitespace, or CSS escapes equivalent to the name of a property would cause the method to return false.) Otherwise, it must return false.
- `~supports0(conditionText)@m
-
被呼出時には、 %conditionText に対し次のいずれかを行った結果が[ 真になるならば ~T / 他の場合は ~F ]を返さ~MUST:
- `supports_condition$P として構文解析して, 評価した結果
- `declaration$P として構文解析した結果を暗黙の丸括弧で括って, `supports_condition$P として評価した結果
~privacy/~security上の考慮点
この仕様により,新たな~security上の考慮点が導入されることはない。 ◎ This spec introduces no new security considerations.
この仕様における様々な特色機能は、主に `media$at 規則に結付けられるが,ある程度 `supports$at 規則にも結付けられ、利用者の[ ~hardwareと~software, および 環境設定と状態 ]についての情報を,~Web内容に供する。 そのような情報のほとんどは、この仕様~内の特色機能ではなく `MEDIAQ$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 [MEDIAQ] 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.
この情報は、集成することにより,利用者の 指紋収集 の正確性を向上するためにも利用され得る。 ◎ This information can also, in aggregate, be used to improve the accuracy of fingerprinting of the user.
8. 変更点
この仕様に加えられた 2013 年 4月 4 日 勧告候補 からの主要な変更点は: ◎ The following (non-editorial) changes were made to this specification since the 13 December 2012 Working Draft:
- Media Queries と一貫させるため、 `and^css / `or$css / `not$css ~keywordの前後に空白を要求する要件を外した。 (それら自体は CSS の~token化における より謎めいたある側面に依拠する,ある CSS ~minimizerの出力との互換性により拘束される)。 空白(または~comment)は、これらの~keywordの後には,依然として要求されることに注意 — さもなければ、それらの~keywordと それに続く開き丸括弧は,関数の~~開始~tokenに~token化されることになるので。 ◎ Drop 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()^css 関数と一貫させるため。 ◎ Allow the supports() method to imply parentheses for simple declarations, for consistency with the @import rule’s supports() function.
- IDL ~codeに抜けていたセミコロンを修正した。 ◎ Fixed missing semicolons in IDL code.
- 他の~moduleの変更に呼応して,~link, 各種用語, 例示~codeを更新した。 ◎ Updated links, terminology, and example code in response to changes to other modules.
- [ ~privacy/~security上の考慮点 ]節を追加した。 ◎ 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 community.