1. 序論
この文書は CSS Object Model (以下, “CSSOM” )の中核を成す特能を正式に指定する。 ~CSSOMに基づく他の仕様, および他の~CSSに関係する仕様は、これらの特能に対する拡張を定義する。 ◎ This document formally specifies the core features of the CSS Object Model (CSSOM). Other documents in the CSSOM family of specifications as well as other CSS related specifications define extensions to these core features.
~CSSOMの中核をなす特能は、作者~定義な~scriptから~styleに関係する状態~情報への~accessおよび操作を可能にするための,基本的な能力を供することを~~目的とする。 ◎ The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.
以下で定義される特能は、 W3C DOM Working Group の手による先行の仕様, 主に `DOM-LEVEL-2-STYLE$r を基にしている。 この文書の目的は:
- (~testし易さと相互運用能を改善するため)より技術的な~~詳細を供して,先行の仕事を改善する。
- 限られた~~範囲にしか実装されておらず,この文脈において最早~本質的とは見なされていない一部の特能を、非推奨にする, または除去する。
- 広く実装されてきている, あるいはそうなるものと予期されている,ある種の拡張を新たに指定する。
【この訳に固有の表記規約】
この訳の,~algoや定義の記述に利用されている各種記号( ~LET, コレ, ~IN, ~IF, ~THROW, 等々)の意味や定義の詳細は、~SYMBOL_DEF_REFを~~参照されたし。
加えて、次の記法も用いる:
- ~SP は、 `1 個の^em[ 文字 `0020^U0 `SPACE^cn ]を表す。
- `~ACI@ — この表記が添えられた ~EQ/~NEQ/~IN/~NIN は、`~ASCII大小無視$による比較に基づくことを意味する。
- `Document$I ~objを指して,単に`文書$とも記すことにする。
- 整数~index %~index に対する “%~index 番” という表記は、 0 番から数えるとする。
- 原文の語 `group of selectors^en ( “一群の選択子たち” )は、 `Selectors Level 3^cite までの呼称によるが、この訳では, `Selectors Level 4^cite に基づく呼称 “選択子~list” ( `list of selectors^en )に変更している。
- ~prop(特に,この仕様においては、略式~prop)に対する `正準的~順序@ とは、その~propの定義表に指示されるそれを表す。
2. 各種用語
この仕様は、次に挙げる文書の各種用語を使役している ⇒ `DOM$r `HTML$r `CSS3SYN$r `ENCODING$r `URL$r `FETCH$r `XML-STYLESHEET$r `XML$r ◎ This specification employs certain terminology from the following documents: DOM, HTML, CSS Syntax, Encoding, URL, Fetch, Associating Style Sheets with XML documents and XML. [DOM] [HTML] [CSS3SYN] [ENCODING] [URL] [FETCH] [XML-STYLESHEET] [XML] ◎ When this specification talks about object A where A is actually an interface, it generally means an object implementing interface A. ◎ The terms set and unset to refer to the true and false values of binary flags or variables, respectively. These terms are also used as verbs in which case they refer to mutating some value to make it true or false, respectively.
`~supportされる~style付け言語@ は~CSSを指す。 ◎ The term supported styling language refers to CSS.
注記: UA が他の~style付け言語も~supportするようになった場合,この仕様も必要に応じて更新されることが予期されている。 ◎ Note: If another styling language becomes supported in user agents, this specification is expected to be updated as necessary.
`~supportされる~CSS~prop@ は、~UAが実装する~CSS~propであって,~vendor接頭辞~付きの~propも含まれるが、`~custom~prop$は除外される。 `~supportされる~CSS~prop$は、この仕様における比較~目的においては,小文字~化するモノトスル。 ◎ The term supported CSS property refers to a CSS property that the user agent implements, including any vendor-prefixed properties, but excluding custom properties. A supported CSS property must be in its lowercase form for the purpose of comparisons in this specification.
この仕様においては、どの要素にも,[ `before$pe, `after$pe ]疑似要素は存在するものと見做される — それ用の~boxは生成されないとしても。 ◎ In this specification the ::before and ::after pseudo-elements are assumed to exist for all elements even if no box is generated for them.
~IDL~interface~member(~method/属性)が別の~memberを~callするとき†は、~UAは,~memberの内部~APIを呼出すモノトスル — すなわち、作者は~custom ECMAScript[ ~prop/関数 ]で上書きして,~memberのふるまいを変更することはできない。 【† この訳においては、 “~obj上の `foo^m ~method手続き( 引数… )” ( `foo^m は~memberの名前)のように記される。】 ◎ When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can’t change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript.
他が言明されない限り、文字列の比較は `文字大小区別$で行われる。 ◎ Unless otherwise stated, string comparisons are done in a case-sensitive manner.
2.1. 直列化-時の成句的な手続き
`文字を~escapeする@ ときは、所与の ( 文字 %c ) に対し,次の連結を返す ⇒# ❝\, %c ◎ To escape a character means to create a string of "\" (U+005C), followed by the character.
`文字を符号位置として~escapeする@ ときは、所与の ( 文字 %c ) に対し,次の連結を返す ⇒# ❝\, 基数 16 の下で, %c の Unicode 符号位置を最小個数の`~ASCII 16 進~数字(小文字)$で表現する文字~並び, ~SP ◎ To escape a character as code point means to create a string of "\" (U+005C), followed by the Unicode code point as the smallest possible number of hexadecimal digits in the range 0-9 a-f (U+0030 to U+0039 and U+0061 to U+0066) to represent the code point in base 16, followed by a single SPACE (U+0020).
`識別子を直列化する@ ときは、所与の ( 文字列 %入力 ) に対し,次を走らせた結果を返す: ◎ To serialize an identifier means to create a string represented by the concatenation of, for each character of the identifier:
【 これは ~CSS識別子 を作成する。 】
- ~IF[ %入力 ~EQ ❝- ] ⇒ ~RET `文字を~escapeする$( ❝- ) ◎ ↓↓
- %結果 ~LET 空~文字列 ◎ ↑
-
%入力 を成す ~EACH( 文字 %c ) に対し,先頭から順に ⇒ %結果 に[ %c に応じて,次に与える文字列 ]を付加する: ◎ ↑
- `0000^U0 `NULL^cn
- `FFFD^U0 `REPLACEMENT CHARACTER^cn ◎ If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).
- `0001^U0 〜 `001F^U0
- `007F^U0
- `文字を符号位置として~escapeする$( %c ) ◎ If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, then the character escaped as code point.
- ❝0 〜 ❝9
-
- ~IF[ これは初回の~~反復である ] ⇒ `文字を符号位置として~escapeする$( %c )
- ~ELIF[ これは 2 回目の~~反復である ]~AND[ %入力 の最初の文字 ~EQ ❝- ] ⇒ `文字を~escapeする$( %c )
- ~ELSE ⇒ %c
- `0080^U0 以上
- ❝-
- ❝_
- ❝A 〜 ❝Z
- ❝a 〜 ❝z
- %c ◎ If the character is not handled by one of the above rules and is greater than or equal to U+0080, is "-" (U+002D) or "_" (U+005F), or is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to U+005A), or \[a-z] (U+0061 to U+007A), then the character itself.
- その他
- `文字を~escapeする$( %c ) ◎ Otherwise, the escaped character.
- ~RET %結果 ◎ ↑
`文字列を直列化する@ ときは、所与の ( 文字列 %入力 ) に対し,次を走らせた結果を返す: ◎ To serialize a string means\
【 これは ~CSS文字列 を作成する。 】
- %結果 ~LET ❝" ◎ to create a string represented by '"' (U+0022), followed by\
-
%入力 を成す ~EACH( 文字 %c ) に対し,先頭から順に ⇒ %結果 に[ %c に応じて,次に与える文字列 ]を付加する ⇒# `0000^U0 NULL ならば `FFFD^U0 `REPLACEMENT CHARACTER^cn / { `0001^U0 〜 `001F^U0, `007F^U0 } ならば `文字を符号位置として~escapeする$( %c ) / { ❝", ❝\ } ならば `文字を~escapeする$( %c ) / ~ELSE_ %c ◎ the result of applying the rules below to each character of the given string, followed by '"' (U+0022): ◎ If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD). ◎ If the character is in the range [\1-\1f] (U+0001 to U+001F) or is U+007F, the character escaped as code point. ◎ If the character is '"' (U+0022) or "\" (U+005C), the escaped character. ◎ Otherwise, the character itself.
- %結果 に ❝" を付加する ◎ ↑
- ~RET %結果 ◎ ↑
注記: ❝' は~escapeされない。 文字列は常に ❝" で括られた形で直列化されるので。 ◎ Note: "'" (U+0027) is not escaped because strings are always serialized with '"' (U+0022).
`~CSS~URLに直列化する@ ときは、所与の ( 文字列 %url ) に対し,次の連結を返す ⇒# `url(^l, `文字列を直列化する$( %url ), ❝) ◎ To serialize a URL means to create a string represented by "url(", followed by the serialization of the URL as a string, followed by ")".
`~LOCALに直列化する@ ときは、所与の ( 文字列 %local ) に対し,次の連結を返す ⇒# `local(^l, `文字列を直列化する$( %local ), ❝) ◎ To serialize a LOCAL means to create a string represented by "local(", followed by the serialization of the LOCAL as a string, followed by ")".
`~comma区切りで直列化する@ ときは、所与の ( 文字列~list %~list ) に対し,次の結果を返す ⇒ %~list を `, ^l (すなわち[ ❝, ~SP ]並び)で`連結する$ ◎ To serialize a comma-separated list concatenate all items of the list in list order while separating them by ", ", i.e., COMMA (U+002C) followed by a single SPACE (U+0020).
`空白~区切りで直列化する@ ときは、所与の ( 文字列~list %~list ) に対し,次の結果を返す 【この用語は利用されていない】 ⇒ %~list を ~SP で`連結する$ ◎ To serialize a whitespace-separated list concatenate all items of the list in list order while separating them by " ", i.e., a single SPACE (U+0020).
注記: 上の規則に則って~listを直列化する際には、その先頭/末尾に余分な空白は挿入されない。 他が言明されない限り、空~listは,空~文字列に直列化される。 ◎ Note: When serializing a list according to the above rules, extraneous whitespace is not inserted prior to the first item or subsequent to the last item. Unless otherwise specified, an empty list is serialized as the empty string.
3. `CSSOMString^I
~CSSOM~interfaceにおいては、ほとんどの文字列に `CSSOMString@I 型が利用される。 各~実装は、それを `USVString$I, `DOMString$I のいずれかとして定義することを選ぶことになる: ◎ Most strings in CSSOM interfaces use the CSSOMString type. Each implementation chooses to define it as either USVString or DOMString:
typedef `USVString$ CSSOMString;
あるいは: ◎ Or, alternatively:
typedef DOMString CSSOMString;
注記: この相違が~web内容から観測-可能になるのは、`~surrogate$符号単位が孕まれるときに限られる。 `DOMString$I は それらを保全する一方で、 `USVString$I は それらを `FFFD^U0 `REPLACEMENT CHARACTER^cn に置換する。 ◎ The difference is only observable from web content when surrogate code units are involved. DOMString would preserve them, whereas USVString would replace them with U+FFFD REPLACEMENT CHARACTER.
実装は、実質的に,この置換を行うか行わないか選べることになる。 ◎ This choice effectively allows implementations to do this replacement, but does not require it.
`USVString$I を利用すれば、実装は,~memory内で文字列を内部的に表現するときに~UTF-8を利用-可能になる。 特定的には,`~surrogate$符号位置は、きちんと形成された~UTF-8には許容されないので,実質的にこの置換が要求される。 ◎ Using USVString enables an implementation to use UTF-8 internally to represent strings in memory. Since well-formed UTF-8 specifically disallows surrogate code points, it effectively requires this replacement.
他方、文字列を 16-bit `符号単位$として内部的に表現する実装は、この置換を行う~cost避けることを選好するかもしれない。 ◎ On the other hand, implementations that internally represent strings as 16-bit code units might prefer to avoid the cost of doing this replacement.
4. 媒体~query
`媒体~query$は `MEDIAQUERIES$r にて定義される。 この節では、~APIや直列化の形も含めた,`媒体~query$を取り巻く種々の概念を定義する。 ◎ Media queries are defined by [MEDIAQUERIES]. This section defines various concepts around media queries, including their API and serialization form.
4.1. 媒体~queryの構文解析-法
`媒体~query~listとして構文解析する@ ~algoは `MEDIAQUERIES$r にて定義される 【参照】 。 それは、所与の ( `媒体~query~list$用の文字列 ) に対し,一連の`媒体~query$からなる~listを返す。 ◎ To parse a media query list for a given string s into a media query list is defined in the Media Queries specification. Return the list of media queries that the algorithm defined there gives.
注記: 結果が “無視される” `媒体~query$は、 `not all^l に転換されることになる。 ◎ Note: A media query that ends up being "ignored" will turn into "not all".
`媒体~queryとして構文解析する@ ときは、所与の ( 文字列 %文字列 ) に対し,次の結果に含まれる`媒体~query$の個数が[ 1 個だけならば その`媒体~query$ / ~ELSE_ ~NULL ]を返す ⇒ `媒体~query~listとして構文解析する$( %文字列 ) ◎ To parse a media query for a given string s means to follow the parse a media query list steps and return null if more than one media query is returned or a media query if a single media query is returned.
注記: ここでも, “無視される” `媒体~query$は、 `not all^l に転換されることになる。 ◎ Note: Again, a media query that ends up being "ignored" will turn into "not all".
4.2. 媒体~queryの直列化-法
`媒体~query~listを直列化する@ ときは、所与の ( `媒体~query~list$ %~list ) に対し,次を走らす:
- %結果~list ~LET %~list 内の各~itemに `媒体~queryを直列化する$ を適用して得られる同順の~list
- ~RET `~comma区切りで直列化する$( %結果~list )
`媒体~queryを直列化する@ ときは、所与の ( `媒体~query$ %媒体~query ) に対し,次を走らす: ◎ To serialize a media query let s be the empty string, run the steps below:
- %文字列 ~LET 空~文字列 ◎ ↑
- ~IF[ %媒体~query は否定形である ] ⇒ %文字列 に次を順に付加する ⇒# `not^l, ~SP ◎ If the media query is negated append "not", followed by a single SPACE (U+0020), to s.
- %型 ~LET `~ASCII小文字~化する$( `識別子を直列化する$( %媒体~query の`媒体~型$ ) ) ◎ Let type be the serialization as an identifier of the media type of the media query, converted to ASCII lowercase.
- ~IF[ %媒体~query に`媒体~特能$は含まれていない ] ⇒ ~RET 次の連結 ⇒# %文字列, %型 ◎ If the media query does not contain media features append type, to s, then return s.
- ~IF[ %型 ≠ `all^l ]~OR[ %媒体~query は否定形である ] ⇒ %文字列 に次を順に付加する ⇒# %型, ~SP, `and^l, ~SP ◎ If type is not "all" or if the media query is negated append type, followed by a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.
-
%媒体~query を成す ~EACH( `媒体~特能$ %特能 ) に対し: ◎ Then, for each media feature:
- %文字列 に次を順に付加する ⇒# ❝(, `~ASCII小文字~化する$( %特能 の名前 ) ◎ Append a "(" (U+0028), followed by the media feature name, converted to ASCII lowercase, to s.
- ~IF[ %特能 に値は与えられている ] ⇒ %文字列 に次を順に付加する ⇒# ❝:, ~SP, `媒体~特能~値を直列化する$( %特能 の値 ) ◎ If a value is given append a ":" (U+003A), followed by a single SPACE (U+0020), followed by the serialized media feature value, to s.
- %文字列 に ❝) を付加する ◎ Append a ")" (U+0029) to s.
- ~IF[ この~~反復は最後でない ] ⇒ %文字列 に次を順に付加する ⇒# ~SP, `and^l, ~SP ◎ If this is not the last media feature append a single SPACE (U+0020), followed by "and", followed by a single SPACE (U+0020), to s.
- ~RET %文字列 ◎ Return s.
例を示す(長い行は折り~~返されている): ◎ Here are some examples of input (first column) and output (second column):
入力 | 出力 |
---|---|
`not screen and (min-WIDTH:5px) AND (max-width:40px)^css | `not screen and (min-width: 5px) and (max-width: 40px)^css |
`all and (color) and (color)^css | `(color) and (color)^css |
4.2.1. 媒体~特能~値の直列化-法
これは~CSS値の直列化に対応付けることを通して定義されるべきであろう — その上で,`媒体~特能$については~CSS値を通して定義されるように。 ◎ This should probably be done in terms of mapping it to serializing CSS values as media features are defined in terms of CSS values after all.
`媒体~特能~値を直列化する@ ときは、所与の ( 名前 %v の`媒体~特能$の値 ) に対し,下の一覧の 1 列目にて %v に一致する行の 2 列目に与える直列化~形式を利用する: ◎ To serialize a media feature value named v locate v in the first column of the table below and use the serialization format described in the second column:
`媒体~特能$ | 直列化 |
---|---|
`width$d | ... |
`height$d | ... |
`device-width$d | ... |
`device-height$d | ... |
`orientation$d | 値に応じて ⇒# `portrait^v ならば `portrait^l / `landscape^v ならば `landscape^l |
`aspect-ratio$d | ... |
`device-aspect-ratio$d | ... |
`color$d | ... |
`color-index$d | ... |
`monochrome$d | ... |
`resolution$d | ... |
`scan$d | 値に応じて ⇒# `progressive^v ならば `progressive^l / `interlace^v ならば `interlace^l |
`grid$d | ... |
他の仕様はこの一覧を拡張でき,また~vendor接頭辞~付きの`媒体~特能$は~custom直列化~形式を持ち得る。 ◎ Other specifications can extend this table and vendor-prefixed media features can have custom serialization formats as well.
4.3. 媒体~queryの比較-法
`媒体~queryを比較する@ ときは、所与の 2 個の`媒体~query$ ( %m1, %m2 ) に対し,[ 次が満たされるならば ~T / ~ELSE_ ~F ]を返す ⇒ `媒体~queryを直列化する$( %m1 ) ~EQ `媒体~queryを直列化する$( %m2 ) ◎ To compare media queries m1 and m2 means to serialize them both and return true if they are a case-sensitive match and false if they are not.
4.4. `MediaList^I ~interface
`MediaList$I ~interfaceを実装する~objには, `媒体~query~collection@ が結付けられる。 ◎ An object that implements the MediaList interface has an associated collection of media queries.
[`Exposed$=Window] interface `MediaList@I { `stringifier@m attribute [`LegacyNullToEmptyString$] `CSSOMString$ `mediaText$m; ~RA `~UL$ `length$m; getter `CSSOMString$? `item$m(`~UL$ %index); `undefined$ `appendMedium$m(`CSSOMString$ %medium); `undefined$ `deleteMedium$m(`CSSOMString$ %medium); };
~objが`~supportする~prop~index$は、 0 以上[ ~collectionで表現される`媒体~query~collection$に含まれている媒体~queryの総数 ]未満とする。 ◎ The object’s supported property indices are the numbers in the range zero to one less than the number of media queries in the collection of media queries represented by the collection. If there are no such media queries, then there are no supported property indices.
`~MediaList~objを作成する@ ときは、所与の ( 文字列 %~text ) に対し,次を走らす: ◎ To create a MediaList object with a string text, run the following steps:
- %MediaList ~LET 新たな `MediaList$I ~obj ◎ Create a new MediaList object.
- %MediaList の `mediaText$m 属性 ~SET %~text ◎ Set its mediaText attribute to text.
- ~RET %MediaList ◎ Return the newly created MediaList object.
`mediaText$m 設定子~手続きは: ◎ Setting the mediaText attribute must run these steps:
- コレの`媒体~query~collection$を空にする ◎ Empty the collection of media queries.
- ~IF[ 所与の値 ~EQ 空~文字列 ] ⇒ ~RET ◎ If the given value is the empty string, then return.
- コレの`媒体~query~collection$に,次の結果を成す すべての媒体~queryを付加する ⇒ `媒体~query~listとして構文解析する$( 所与の値 ) ◎ Append all the media queries as a result of parsing the given value to the collection of media queries.
`appendMedium(medium)@m ~method~手続きは: ◎ The appendMedium(medium) method must run these steps:
- %m ~LET `媒体~queryとして構文解析する$( %medium ) ◎ Let m be the result of parsing the given value.
- ~IF[ %m ~EQ ~NULL ] ⇒ ~RET ◎ If m is null, then return.
- コレの`媒体~query~collection$を成す ~EACH( %n ) に対し ⇒ ~IF[ `媒体~queryを比較する$( %m, %n ) ~EQ ~T ] ⇒ ~RET ◎ If comparing m with any of the media queries in the collection of media queries returns true, then return.
- コレの`媒体~query~collection$に %m を付加する ◎ Append m to the collection of media queries.
`deleteMedium(medium)@m ~method~手続きは: ◎ The deleteMedium(medium) method must run these steps:
- %m ~LET `媒体~queryとして構文解析する$( %medium ) ◎ Let m be the result of parsing the given value.
- ~IF[ %m ~EQ ~NULL ] ⇒ ~RET ◎ If m is null, then return.
- コレの`媒体~query~collection$を成す ~EACH( %n ) に対し ⇒ ~IF[ `媒体~queryを比較する$( %m, %n ) ~EQ ~T ] ⇒# %n をコレの`媒体~query~collection$から除去する ◎ Remove any media query from the collection of media queries for which comparing the media query with m returns true.\
- ~IF[ 前~段で除去されたものはない ] ⇒ ~THROW `NotFoundError$E ◎ If nothing was removed, then throw a NotFoundError exception.
5. 選択子
`選択子$は `Selectors^cite 仕様にて定義される。 この節では主にそれらを直列化する方法を定義する。 ◎ Selectors are defined in the Selectors specification. This section mainly defines how to serialize them.
5.1. 選択子の構文解析-法
`選択子~listとして構文解析する@ ときは、所与の ( 文字列 %値 ) に対し:
- %結果 ~LET %値 を `selector-list$t の`文法に則って構文解析-$した結果
- ~RET[ %結果 ~NEQ `失敗^i ならば %結果 / ~ELSE_ ~NULL ]
5.2. 選択子の直列化-法
`選択子~listを直列化する@ ときは、所与の ( `選択子~list$ %~list ) に対し,次の結果を返す ⇒ `~comma区切りで直列化する$( %~list 内の各~itemに `選択子を直列化する$を適用して得られる同順の~list ) ◎ To serialize a group of selectors serialize each selector in the group of selectors and then serialize a comma-separated list of these serializations.
`選択子を直列化する@ ときは、所与の ( `複体~選択子$ %複体~選択子 ) に対し,次を走らせた結果の文字列を返す: ◎ To serialize a selector\
- %結果 ~LET 空~文字列 ◎ let s be the empty string,\
-
%複体~選択子 を成す ~EACH( `合体~選択子$ %合体~選択子 ) に対し,順に: ◎ run the steps below for each part of the chain of the selector, and finally return s:
- ~IF[ %合体~選択子 は 1 個の`全称~選択子$のみからなる ] ⇒ %結果 に次を付加する ⇒ `単体~選択子を直列化する$( %合体~選択子 ) ◎ If there is only one simple selector in the compound selectors which is a universal selector, append the result of serializing the universal selector to s.
- ~ELSE ⇒ %合体~選択子 を成す ~EACH( `単体~選択子$ %単体~選択子 ) に対し ⇒ ~IF[ %単体~選択子 は`全称~選択子$でない ]~OR[ %単体~選択子 の`~ns接頭辞$は`既定の~ns$でない~nsに対応する ] ⇒ %結果 に次を付加する ⇒ `単体~選択子を直列化する$( %単体~選択子 ) ◎ Otherwise, for each simple selector in the compound selectors that is not a universal selector of which the namespace prefix maps to a namespace that is not the default namespace serialize the simple selector and append the result to s.
-
~IF[ %合体~選択子 は %複体~選択子 内の最後の`合体~選択子$でない ]:
- %結果 に ~SP を付加する
- %結合子 ~LET %合体~選択子 と次の`合体~選択子$の合間にある`結合子$
- ~IF[ %結合子 は ~SP のみでない ] ⇒ %結果 に次を順に付加する ⇒# %結合子, ~SP
- ~ELIF[ %合体~選択子 内に`疑似要素$がある ] ⇒ %結果 に次を順に付加する ⇒# `::^l, その疑似要素の名前 ◎ If this is the last part of the chain of the selector and there is a pseudo-element, append "::" followed by the name of the pseudo-element, to s.
- ~RET %結果 ◎ ↑
`単体~選択子を直列化する@ ときは、所与の ( `単体~選択子$ %選択子 ) に対し, %選択子 の種別に応じて,次を走らせた結果の文字列を返す: ◎ To serialize a simple selector let s be the empty string, run the steps below, and finally return s:
- `型~選択子$
- `全称~選択子$
-
- %結果 ~LET 空~文字列 ◎ ↑
- %接頭辞 ~LET %選択子 の`~ns接頭辞$ ◎ ↓
- ~IF[ %接頭辞 は[ `~null~ns$でも `既定の~ns$でもない~ns ]に対応する ] ⇒ %結果 に次を順に付加する ⇒# `識別子を直列化する$( %接頭辞 ), ❝| ◎ If the namespace prefix maps to a namespace that is not the default namespace and is not the null namespace (not in a namespace) append the serialization of the namespace prefix as an identifier, followed by a "|" (U+007C) to s.
- ~IF[ %接頭辞 は`~null~ns$に対応する ] ⇒ %結果 に ❝| を付加する ◎ If the namespace prefix maps to a namespace that is the null namespace (not in a namespace) append "|" (U+007C) to s.
- %結果 に %選択子 に応じて次を付加する ⇒# `型~選択子$であるならば `識別子を直列化する$( 要素~名 ) / `全称~選択子$であるならば ❝* ◎ If this is a type selector append the serialization of the element name as an identifier to s. ◎ If this is a universal selector append "*" (U+002A) to s.
- ~RET %結果 ◎ ↑
- `属性~選択子$
-
- %結果 ~LET ❝[ ◎ Append "[" (U+005B) to s.
- %接頭辞 ~LET %選択子 の`~ns接頭辞$ ◎ ↓
- ~IF[ %接頭辞 は`~null~ns$でない~nsに対応する ] ⇒ %結果 に次を順に付加する ⇒# `識別子を直列化する$( %接頭辞 ), ❝| ◎ If the namespace prefix maps to a namespace that is not the null namespace (not in a namespace) append the serialization of the namespace prefix as an identifier, followed by a "|" (U+007C) to s.
- %結果 に次を付加する ⇒ `識別子を直列化する$( %選択子 の属性~名 ) ◎ Append the serialization of the attribute name as an identifier to s.
-
~IF[ %選択子 に属性~値が指定されている ]:
-
%結果 に[
`属性~選択子$の種別に応じて,次のいずれか適切なもの
]を付加する
⇒#
❝=,
`~=^l,
`|=^l,
"
^=
", "$=
", `*=^l - %結果 に次を付加する ⇒ `文字列を直列化する$( %選択子 の属性~値 )
-
%結果 に[
`属性~選択子$の種別に応じて,次のいずれか適切なもの
]を付加する
⇒#
❝=,
`~=^l,
`|=^l,
"
-
~IF[ 属性~選択子 `has the case-sensitivity flag present^en† ] ⇒ %結果 に次を順に付加する ⇒# ~SP, ❝i ◎ If the attribute selector has the case-sensitivity flag present, append " i" (U+0020 U+0069) to s.
【† 属性~値の 文字大小は区別されない なら真 — “`case-sensitivity^en” と意味が正反対であるが。 】
- %結果 に ❝] を付加する ◎ Append "]" (U+005D) to s.
- ~RET %結果 ◎ ↑
- `~class選択子$
- ~RET 次の連結 ⇒# ❝., `識別子を直列化する$( %選択子 の class 名 ) ◎ Append a "." (U+002E), followed by the serialization of the class name as an identifier to s.
- `ID 選択子$
- ~RET 次の連結 ⇒# ❝#, `識別子を直列化する$( %選択子 の ID ) ◎ Append a "#" (U+0023), followed by the serialization of the ID as an identifier to s.
- `疑似類$
-
- %結果 ~LET 次の連結 ⇒# ❝:, %選択子 (`疑似類$)の名前 ◎ ↓
- ~IF[ %選択子 は引数をとる`疑似類$でない ] ⇒ ~RET %結果 ◎ If the pseudo-class does not accept arguments append ":" (U+003A), followed by the name of the pseudo-class, to s.
-
%結果 に次を順に付加する ⇒# ❝(, 下に与える文字列, ❝) ◎ Otherwise, append ":" (U+003A), followed by the name of the pseudo-class, followed by "(" (U+0028), followed by the value of the pseudo-class argument(s) determined as per below, followed by ")" (U+0029), to s.
文字列は、 %選択子 に応じて: ◎ ↑
- `lang()$ps
- `~comma区切りで直列化する$( 各 引数に`文字列を直列化する$ を適用して得られる同順の~list ) ◎ The serialization of a comma-separated list of each argument’s serialization as a string, preserving relative order.
- `nth-child()$ps
- `nth-last-child()$ps
- `nth-of-type()$ps
- `nth-last-of-type()$ps
- <an+b> の直列化-法を利用して,引数を直列化した結果 【引数には "`of …^css" 以下を成す部分もあるが、ここには述べられていない。】 ◎ The result of serializing the value using the rules to serialize an <an+b> value.
- `not()$ps
- `選択子~listを直列化する$( 引数たち ) ◎ The result of serializing the value using the rules for serializing a group of selectors.
- ~RET %結果 ◎ ↑
6. ~CSS
6.1. ~CSS~ss
`~CSS~ss@ とは、~CSS仕様にて定義される~ssを表現する抽象的な概念である。 ~CSSOMにおいては、`~CSS~ss$は `CSSStyleSheet$I ~objにより表現される。 各`~CSS~ss$ %~ss には、以下に挙げる状態~itemが結付けられる: ◎ A CSS style sheet is an abstract concept that represents a style sheet as defined by the CSS specification. In the CSSOM a CSS style sheet is represented as a CSSStyleSheet object. A CSS style sheet has a number of associated state items:
- `種別@ss ◎ type
- `text/css^l ◎ The literal string "text/css".
- `所在@ss ◎ location
- 作成-時に指定される。 [ %~ss が埋込d`~CSS~ss$である場合は ~NULL / ~ELSE_ %~ss に対する最初の 【リダイレクト前の】 要請の`絶対~URL文字列$ ]。 %~ss が存続する限り,変化しない。 ◎ Specified when created. The absolute-URL string of the first request of the CSS style sheet or null if the CSS style sheet was embedded. Does not change during the lifetime of the CSS style sheet.
- `親~CSS~ss@ss ◎ parent CSS style sheet
- 作成-時に指定される。 %~ss の親の`~CSS~ss$は[ 在るならば それ / 無いならば ~NULL ]。 ◎ Specified when created. The CSS style sheet that is the parent of the CSS style sheet or null if there is no associated parent.
- `所有者~node@ss ◎ owner node
- 作成-時に指定される。 %~ss に結付けられている~DOM~nodeは[ 在るならば それ / 無いならば ~NULL ]。 ◎ Specified when created. The DOM node associated with the CSS style sheet or null if there is no associated DOM node.
- 注記: `~CSS~ss$%~ss を追加したとき、 %~ss の`所有者~node$ssは — ~NULL でないならば — ~nodeのうち[ それに`結付けられている~CSS~ss$ ~EQ %~ss ]を満たすものになる。 ◎ (下からここに移動) Note: The owner node of a CSS style sheet, if non-null, is the node whose associated CSS style sheet is the CSS style sheet in question, when the CSS style sheet is added.
- `所有者~CSS規則@ss ◎ owner CSS rule
- 作成-時に指定される。 `親~CSS~ss$ssの中で, %~ss のinclusion 【 `import$at ? 】 を生じさせた`~CSS規則$は[ 在るならば それ / 無いならば ~NULL ] ◎ Specified when created. The CSS rule in the parent CSS style sheet that caused the inclusion of the CSS style sheet or null if there is no associated rule.
- `媒体@ss ◎ media
- 作成-時に指定される, `MediaList$I ~obj ◎ Specified when created. The MediaList object associated with the CSS style sheet.
-
この~propに文字列が指定された場合、`媒体$ssは,次の結果に設定するモノトスル ⇒ `~MediaList~objを作成する$( その文字列 ) ◎ If this property is specified to a string, the media must be set to the return value of invoking create a MediaList object steps for that string.
-
この~propに`所有者~node$ssのある属性 %属性 が指定された場合 【 すなわち、 %属性 を参照するように指定された場合】 : ◎ If this property is specified to an attribute of the owner node,\
- `媒体$ssは,次の結果に設定するモノトスル ⇒ `~MediaList~objを作成する$( %属性 の値 ) ◎ the media must be set to the return value of invoking create a MediaList object steps for the value of that attribute.\
- %属性 が[ 設定-/変更-/除去- ]される度に、`媒体$ssの `MediaList^I1`mediaText$m1 属性は[ %属性 が無くなったならば ~NULL / ~ELSE_ %属性 の新たな値 ]に設定するモノトスル。 ◎ Whenever the attribute is set, changed or removed, the media’s mediaText attribute must be set to the new value of the attribute, or to null if the attribute is absent.
注記: `媒体$ssの `MediaList^I1`mediaText$m1 属性の値が変化しても, %属性 は変化しない。 ◎ Note: Changing the media’s mediaText attribute does not change the corresponding attribute on the owner node. ◎ Note: The owner node...(上に移動)
- `~title@ss ◎ title
- 作成-時に指定される。 `~CSS~ss$の~title。 空~文字列もとり得る。 ◎ Specified when created. The title of the CSS style sheet, which can be the empty string.
-
次の例では、最初の~ssの`~title$ssは空~文字列ではなく,2 個目と 3 個目の~ssについては、空~文字列になる。 ◎ In the following, the title is non-empty for the first style sheet, but is empty for the second and third style sheets.
<style title="papaya whip"> body { background: #ffefd5; } </style>
<style title=""> body { background: orange; } </style>
<style> body { background: brown; } </style>
- この~propが`所有者~node$ssの属性に指定された場合、`~title$ssは,その属性~値に設定するモノトスル。 属性が[ 設定-/変更-/除去- ]されるときは 常に、`~title$ssは[ その属性が無くなったならば空~文字列 / ~ELSE_ その属性の新たな値 ]に設定するモノトスル。 ◎ If this property is specified to an attribute of the owner node, the title must be set to the value of that attribute. Whenever the attribute is set, changed or removed, the title must be set to the new value of the attribute, or to the empty string if the attribute is absent.
- 注記: ~HTMLは、~nodeが`文書~tree内$にある場合に限り,`~title$ssを`所有者~node$ssの属性から得るものと 指定する。 ◎ Note: HTML only specifies title to be an attribute of the owner node if the node is in in a document tree.
- `代替-~flag@ss ◎ alternate flag
- 作成-時に指定される真偽値。 既定は ~F 。 ◎ Specified when created. Either set or unset. Unset by default.
-
次の`~CSS~ss$は,`代替-~flag$ssが ~T にされる: ◎ The following CSS style sheets have their alternate flag set:
<?xml-stylesheet alternate="yes" title="x" href="data:text/css,…"?>
<link rel="alternate stylesheet" title="x" href="data:text/css,…">
- `不能化~flag@ss ◎ disabled flag
- 真偽値をとり、既定は ~F とする。 ◎ Either set or unset. Unset by default.
- 注記: ~F であっても,`~CSS~ss$が具現化に実際に利用されるとは限らない。 ◎ Note: Even when unset it does not necessarily mean that the CSS style sheet is actually used for rendering.
- `~CSS規則~list@ss ◎ CSS rules
- `~CSS~ss$に結付けられている一連の`~CSS規則$からなる~list。 ◎ The CSS rules associated with the CSS style sheet.
- `生成元clean~flag@ss
- 作成-時に指定される真偽値。 ~T の場合,~APIによる`~CSS規則~list$ssに対する読取りと改変ngが許容される。 ◎ Specified when created. Either set or unset. If it is set, the API allows reading and modifying of the CSS rules.
6.1.1. `StyleSheet^I ~interface
`StyleSheet$I ~interfaceは、抽象的な基底~ssを表現する。 ◎ The StyleSheet interface represents an abstract, base style sheet.
[`Exposed$=Window] interface `StyleSheet@I { ~RA `CSSOMString$ `type$m; ~RA `USVString$? `href$m; ~RA (`Element$I or `ProcessingInstruction$I)? `ownerNode$m; ~RA `CSSStyleSheet$I? `parentStyleSheet$m; ~RA `DOMString$? `title$m; [`SameObject$, `PutForwards$=`mediaText$m] ~RA `MediaList$I `media$m; attribute `boolean$ `disabled$m; };
6.1.2. `CSSStyleSheet^I ~interface
`CSSStyleSheet$I ~interfaceは `~CSS~ss$を表現する。 ◎ The CSSStyleSheet interface represents a CSS style sheet.
[`Exposed$=Window] interface `CSSStyleSheet@I : `StyleSheet$I { ~RA `CSSRule$I? `ownerRule$m; [`SameObject$] ~RA `CSSRuleList$I `cssRules$m; `~UL$ `insertRule$m(`CSSOMString$ %rule, optional `~UL$ %index = 0); `undefined$ `deleteRule$m(`~UL$ %index); };
`ownerRule@m 取得子~手続きは ⇒ ~RET コレの`所有者~CSS規則$ss 【を表現する `CSSRule$I ((を継承する~interface)を実装する)~obj】
~NULL 以外の値を返す場合は、どの取得-~accessに対しても,常に同じ値を返すモノトスル。
◎ The ownerRule attribute must return the owner CSS rule.\ ◎ If a value other than null is ever returned, then that same value must always be returned on each get access.`cssRules@m 取得子~手続きは: ◎ The cssRules attribute must follow these steps:
- ~IF[ コレの`生成元clean~flag$ss ~EQ ~F ] ⇒ ~THROW `SecurityError$E ◎ If the origin-clean flag is unset, throw a SecurityError exception.
-
~RET コレの`~CSS規則~list$ssを表現する,読専かつ~liveな `CSSRuleList$I ~obj ◎ Return a read-only, live CSSRuleList object representing the CSS rules.
注記: 返される `CSSRuleList$I ~objは(~script側からは)読専であるが、~liveなので,内容は時間とともに変化し得る。 例えば,[ `insertRule()$m / `deleteRule()$m ]~methodの呼出ngによる変更は、返された~objに反映される。 ◎ Note: Even though the returned CSSRuleList object is read-only (from the perspective of client-authored script), it can nevertheless change over time due to its liveness status. For example, invoking the insertRule() or deleteRule() methods can result in mutations reflected in the returned object.
`insertRule(rule, index)@m ~method~手続きは: ◎ The insertRule(rule, index) method must run the following steps:
- ~IF[ コレの`生成元clean~flag$ss ~EQ ~F ] ⇒ ~THROW `SecurityError$E ◎ If the origin-clean flag is unset, throw a SecurityError exception.
- ~RET `~CSS規則~listに規則を挿入する$( コレの`~CSS規則~list$ss, %rule, %index ) ◎ Return the result of invoking insert a CSS rule rule in the CSS rules at index.
`deleteRule(index)@m ~method~手続きは: ◎ The deleteRule(index) method must run the following steps:
- ~IF[ コレの`生成元clean~flag$ss ~EQ ~F ] ⇒ ~THROW `SecurityError$E ◎ If the origin-clean flag is unset, throw a SecurityError exception.
- `~CSS規則~listから規則を除去する$( コレの`~CSS規則~list$ss, %index ) ◎ Remove a CSS rule in the CSS rules at index.
6.1.2.1. 非推奨にされた `CSSStyleSheet^I ~member
注記: これらの~memberは、既存の~siteとの互換性を得るために要求される。 ◎ Note: These members are required for compatibility with existing sites.
partial interface `CSSStyleSheet$I { [`SameObject$] ~RA `CSSRuleList$I `rules$m; `long$ `addRule$m(optional `DOMString$ %selector = "undefined", optional `DOMString$ %style = "undefined", optional `~UL$ %index); `undefined$ `removeRule$m(optional `~UL$ %index = 0); };
`addRule(selector, block, optionalIndex)@m ~method~手続きは: ◎ The addRule(selector, block, optionalIndex) method must run the following steps:
- ~IF[ %block ~NEQ 空~文字列 ] ⇒ %block に ~SP を付加する ◎ ↓
- %rule ~LET 次の連結 ⇒# %selector, ` { ^l, %block, `}^l ◎ Let rule be an empty string. ◎ Append selector to rule. ◎ Append " { " to rule. ◎ If block is not empty, append block, followed by a space, to rule. ◎ Append "}" to rule
- ~IF[ %optionalIndex ~EQ ε ] ⇒ %optionalIndex ~SET コレの`~CSS規則~list$ssを成す~CSS規則の個数 ◎ Let index be optionalIndex if provided, or the number of CSS rules in the stylesheet otherwise.
- コレ上の `insertRule$m ~method手続き( %rule, %optionalIndex ) ◎ Call insertRule(), with rule and index as arguments.
- ~RET −1 ◎ Return -1.
作者は、これらの~memberを利用せずに,標準な `CSSStyleSheet$I ~interfaceを利用するベキである — その方が `CSSGroupingRule$I と一貫する。 ◎ Authors should not use these members and should instead use and teach the standard CSSStyleSheet interface defined earlier, which is consistent with CSSGroupingRule.
6.2. ~CSS~ss~collection
以下に、各 `DocumentOrShadowRoot$I ~objに結付けられる,種々の新たな概念が定義される: ◎ Below various new concepts are defined that are associated with each DocumentOrShadowRoot object.
各 `DocumentOrShadowRoot$I ~objには、 `~CSS~ss~list@ と呼ばれる†, 0 個以上の`~CSS~ss$からなる~listが結付けられる。 これは、[ `DocumentOrShadowRoot$I ~objに結付けられている`~CSS~ss$ ]すべてを含む,`~tree順序$による~listである。 但し, HTTP `Link$h ~headerから作成される`~CSS~ss$は、それらの~headerに現れる順に,~listの先頭に置かれる。 【†原文では “`document or shadow root CSS style sheets^en” だが、長いので,この訳では `document or shadow root^en を省いて略記する。】 ◎ Each DocumentOrShadowRoot has an associated list of zero or more CSS style sheets, named the document or shadow root CSS style sheets. This is an ordered list that contains all CSS style sheets associated with the DocumentOrShadowRoot, in tree order, with CSS style sheets created from HTTP Link headers first, if any, in header order.
`~CSS~ssを作成する@ ときは、次を走らす: ◎ To create a CSS style sheet, run these steps:
-
新たな`~CSS~ss$ ~objを作成し,その各種~propを指定された値に設定した上で、`~CSS~ss~list$に その`~CSS~ssを追加する$ ◎ Create a new CSS style sheet object and set its properties as specified. ◎ Then run the add a CSS style sheet steps for the newly created CSS style sheet.
`生成元clean~flag$ss ~EQ ~F の下では、これにより,利用者の~intranetからの情報が公開され得る。 ◎ If the origin-clean flag is unset, this can expose information from the user’s intranet.
`~CSS~ssを追加する@ ときは、所与の ( ~CSS~ss %~ss ) に対し,次を走らす: ◎ To add a CSS style sheet, run these steps:
-
%~ss を,`~CSS~ss~list$内の適切な所在に追加する
(手続きの以下の部分は`不能化~flag$ssについて~~扱う)
◎ Add the CSS style sheet to the list of document or shadow root CSS style sheets at the appropriate location. The remainder of these steps deal with the disabled flag. - ~IF[ %~ss の`不能化~flag$ss ~EQ ~T ] ⇒ ~RET ◎ If the disabled flag is set, then return.
- %~title ← %~ss の`~title$ss ◎ ↓
- ~IF[ %~title ~NEQ 空~文字列 ]~AND[ %~ss の`代替-~flag$ss ~EQ ~F ]~AND[ `選好される~CSS~ss集合~名$ ~EQ 空~文字列 ] ⇒ `選好される~CSS~ss集合~名を変更する$( %~title ) ◎ If the title is not the empty string, the alternate flag is unset, and preferred CSS style sheet set name is the empty string change the preferred CSS style sheet set name to the title.
- %~CSS~ss集合~名 ~LET[ `最後の~CSS~ss集合~名$ ~NEQ ~NULL ならば それ / ~ELSE_ `選好される~CSS~ss集合~名$ ] ◎ ↓
- %~ss の`不能化~flag$ss ~SET [ 次が満たされるならば ~F / ~ELSE_ ~T ] ⇒ %~title ~IN { 空~文字列, %~CSS~ss集合~名 } ◎ If any of the following is true, then unset the disabled flag and return: • The title is the empty string. • The last CSS style sheet set name is null and the title is a case-sensitive match for the preferred CSS style sheet set name. • The title is a case-sensitive match for the last CSS style sheet set name. ◎ Set the disabled flag.
`~CSS~ssを除去する@ ときは、所与の ( `~CSS~ss$ %~ss ) に対し,次を走らす: ◎ To remove a CSS style sheet, run these steps:
- `~CSS~ss~list$から %~ss を除去する ◎ Remove the CSS style sheet from the list of document or shadow root CSS style sheets.
- %~ss の[ `親~CSS~ss$ss, `所有者~node$ss, `所有者~CSS規則$ss ] ~SET ~NULL ◎ Set the CSS style sheet’s parent CSS style sheet, owner node and owner CSS rule to null.
`持続的~CSS~ss@ とは、`~CSS~ss~list$に属する`~CSS~ss$のうち,次を満たすものである ⇒ [ `~title$ss ~EQ 空~文字列 ]~AND[ `代替-~flag$ss ~EQ ~F ] ◎ A persistent CSS style sheet is a CSS style sheet from the document or shadow root CSS style sheets whose title is the empty string and whose alternate flag is unset.
`~CSS~ss集合@ とは、[ `~CSS~ss~list$に属する`~CSS~ss$のうち,[ 空~文字列でない`~title$ss ]が互いに一致するもの ]からなる,有順序~collectionである。 ◎ A CSS style sheet set is an ordered collection of one or more CSS style sheets from the document or shadow root CSS style sheets which have an identical title that is not the empty string.
`~CSS~ss集合$に属する各`~CSS~ss$に共通な`~title$ssは、 `~CSS~ss集合~名@ と呼ばれる。 ◎ A CSS style sheet set name is the title the CSS style sheet set has in common.
`~CSS~ss集合$は、次を満たすならば `可能化~CSS~ss集合@ とされる ⇒ それに属するどの`~CSS~ss$の`不能化~flag$ssも ~F にされている ◎ An enabled CSS style sheet set is a CSS style sheet set of which each CSS style sheet has its disabled flag unset.
`~CSS~ss集合を可能化する@ ときは、所与の ( 文字列 %名前 ) に対し,次を走らす: ◎ To enable a CSS style sheet set with name name, run these steps:
- `~CSS~ss~list$を成す ~EACH( `~CSS~ss$ %~ss ) に対し ⇒ ~IF[ %~ss の`~title$ss ~NEQ 空~文字列 ] ⇒ %~ss の`不能化~flag$ss ~SET [ %~ss の`~title$ss ~EQ %名前 ならば ~F / ~ELSE_ ~T ] ◎ If name is the empty string, set the disabled flag for each CSS style sheet that is in a CSS style sheet set and return. ◎ Unset the disabled flag for each CSS style sheet in a CSS style sheet set whose CSS style sheet set name is a case-sensitive match for name and set it for all other CSS style sheets in a CSS style sheet set.
`~CSS~ss集合を選択する@ ときは、所与の ( 文字列 %名前 ) に対し,次を走らす: ◎ To select a CSS style sheet set with name name, run these steps:
- `~CSS~ss集合を可能化する$( %名前 ) ◎ enable a CSS style sheet set with name name.
- `最後の~CSS~ss集合~名$ ~SET %名前 ◎ Set last CSS style sheet set name to name.
`最後の~CSS~ss集合~名@ とは、[ どの`~CSS~ss集合$を最後に`選択した$ssか ]を決定するための概念である — 初期~時には ~NULL とする。 ◎ A last CSS style sheet set name is a concept to determine what CSS style sheet set was last selected. Initially its value is null.
`選好される~CSS~ss集合~名@ とは、[ どの`~CSS~ss$について,`不能化~flag$ssを ~F にする必要があるか ]を決定するための概念である — 初期~時には空~文字列とする。 ◎ A preferred CSS style sheet set name is a concept to determine which CSS style sheets need to have their disabled flag unset. Initially its value is the empty string.
`選好される~CSS~ss集合~名を変更する@ ときは、所与の ( 名前 %名前 ) に対し,次を走らす: ◎ To change the preferred CSS style sheet set name with name name, run these steps:
- %current ~LET `選好される~CSS~ss集合~名$ ◎ Let current be the preferred CSS style sheet set name.
- `選好される~CSS~ss集合~名$ ~SET %名前 ◎ Set preferred CSS style sheet set name to name.
- ~IF[ %名前 ~NEQ %current ]~AND[ `最後の~CSS~ss集合~名$ ~EQ ~NULL ] ⇒ `~CSS~ss集合を可能化する$( %名前 ) ◎ If name is not a case-sensitive match for current and last CSS style sheet set name is null enable a CSS style sheet set with name name.
6.2.1. HTTP `Default-Style^h ~header
HTTP `Default-Style$h ~headerを利用すれば、`選好される~CSS~ss集合~名$を設定して,[ (初期~時に)`可能化~CSS~ss集合$にされる`~CSS~ss集合$は、どれになるか ]に波及させられる。 【この~headerの構文は、この仕様には指定されていない。】 ◎ The HTTP Default-Style header can be used to set the preferred CSS style sheet set name influencing which CSS style sheet set is (initially) the enabled CSS style sheet set.
~UAは,次を行うモノトスル【いつ?】 ⇒ ~EACH( HTTP `Default-Style$h ~header %~header ) に対し,~headerが現れる順に ⇒ `選好される~CSS~ss集合~名を変更する$( %~header の値 ) ◎ For each HTTP Default-Style header, in header order, the user agent must change the preferred CSS style sheet set name with name being the value of the header.
6.2.2. `StyleSheetList^I ~interface
`StyleSheetList$I ~interfaceは`~CSS~ss$の有順序~collectionを表現する。 ◎ The StyleSheetList interface represents an ordered collection of CSS style sheets.
[`Exposed$=Window] interface `StyleSheetList@I { getter `CSSStyleSheet$I? `item$m(`~UL$ %index); ~RA `~UL$ `length$m; };
~objが`~supportする~prop~index$は、 0 以上[ ~collectionで表現される~ssの総数 ]未満とする。 ◎ The object’s supported property indices are the numbers in the range zero to one less than the number of CSS style sheets represented by the collection. If there are no such CSS style sheets, then there are no supported property indices.
6.2.3. `DocumentOrShadowRoot^I ~interface~mixinに対する拡張
partial interface mixin `DocumentOrShadowRoot$I { [`SameObject$] ~RA `StyleSheetList$I `styleSheets$m1; };
6.3. ~ssの結付け
この節では、`~CSS~ss$の`所有者~node$ssが実装する必要がある~interfaceを定義する。 `xml-stylesheet 処理命令$, および[ ~link関係~型に `stylesheet^l を含むような HTTP `Link$h ~header ]に課される要件を定義する。 ◎ This section defines the interface an owner node of a CSS style sheet has to implement and defines the requirements for xml-stylesheet processing instructions and HTTP Link headers when the link relation type is an ASCII case-insensitive match for "stylesheet".
6.3.1. ~CSS~ssの~fetching
`~CSS~ss資源を~fetchする@ ときは、所与の ( %解析済み~URL, %~referrer, %文書, %~parameters (省略時は ε ) ) に対し,次を走らす ( %~parameters は`要請$を作成する際の入力に利用される): ◎ To fetch a CSS style sheet with parsed URL parsed URL, referrer referrer, document document, optionally a set of parameters parameters (used as input to creating a request), follow these steps:
- %生成元 ~LET %文書 の`生成元$ ◎ Let origin be document’s origin.
- %要請 ~LET 次のようにされた,新たな`要請$ ⇒# `~URL$rq ~SET %解析済み~URL, `生成元$rq ~SET %生成元, `~referrer$rq ~SET %~referrer ◎ Let request be a new request, with the url parsed URL, origin origin, referrer referrer, and\
- ~IF[ %~parameters ~NEQ ε ] ⇒ %~parameters に従って, %要請 の他の~parameterを設定する ◎ if specified the set of parameters parameters.
- %応答 ~LET %要請 を利用して`~fetch$した結果 ( %応答 が得られるまで待機する) ◎ Let response be the result of fetching request. ◎ Wait until response is available.
- ~IF[ %応答 ~EQ `~network~error$ ] ⇒ ~RET ~error ◎ If response is a network error, return an error.
-
~IF[ %応答 の`Content-Type ~metadata$は `~supportされる~style付け言語$でない ]:
- ~IF[ %文書 は`過去互換~mode$下にある ]~AND[ %応答 は `~CORS同一-生成元$である ] ⇒ %応答 の`Content-Type ~metadata$を `text/css^c に変更する
- ~ELSE ⇒ ~RET ~error
- ~RET %応答 ◎ Return response.
6.3.2. `LinkStyle^I ~interface
~node %~node に `結付けられている~CSS~ss@ とは、`~CSS~ss~list$に属する`~CSS~ss$のうち[ その`所有者~node$ss ~EQ %~node ]を満たすものである。 そのような~nodeは、 `LinkStyle$I ~interfaceを実装するモノトスル。 ◎ The associated CSS style sheet of a node is the CSS style sheet in the list of document or shadow root CSS style sheets of which the owner node is said node. This node must also implement the LinkStyle interface.
interface mixin `LinkStyle@I { ~RA `CSSStyleSheet$I? `sheet$m; };
`sheet@m 取得子~手続きは ⇒ ~RET ~nodeに`結付けられている~CSS~ss$は[ 在るならば それ / 無いならば ~NULL ] ◎ The sheet attribute must return the associated CSS style sheet for the node or null if there is no associated CSS style sheet.
次の例において、~UAが~CSS( `text/css^c )を~supportしつつ,(仮想の) `text/example-sheets^c は~supportしていないとする。 この場合、前者の `style$e 要素の `sheet$m 属性は,~ssを表現する `StyleSheet$I ~objを返すが、後者の `style$e 要素の `sheet$m 属性は,~NULL を返す。 ◎ In the following fragment, the first style element has a sheet attribute that returns a StyleSheet object representing the style sheet, but for the second style element, the sheet attribute returns null, assuming the user agent supports CSS (text/css), but does not support the (hypothetical) ExampleSheets (text/example-sheets).
<style type="text/css"> body { background:lime } </style>
<style type="text/example-sheets"> $(body).background := lime </style>
注記: ~nodeが~ssを~~参照するかどうかは、当該の~nodeの意味論を定義する仕様により定義される。 ◎ Note: Whether or not the node refers to a style sheet is defined by the specification that defines the semantics of said node.
6.3.3. 仕様に課される要件
~DOMを通して~ssを結付ける新たな仕方を導入する仕様は、どの~nodeが `LinkStyle$I ~interfaceを実装するかを定義するべきである。 その場合、どの時点で`~CSS~ssを作成する$かも定義されなければナラナイ。 ◎ Specifications introducing new ways of associating style sheets through the DOM should define which nodes implement the LinkStyle interface. When doing so, they must also define when a CSS style sheet is created.
6.3.4. xml-stylesheet 処理命令を実装する~UAに課される要件
`ProcessingInstruction$I includes `LinkStyle$I;
`文書$の `~prolog@ とは、次を満たす`~node$(たちが成す集合)を指す ⇒ `文書$の`子$であって,`先行-$する どの~nodeも `Element$I でない ◎ The prolog refers to nodes that are children of the document and are not following the Element child of the document, if any.
`ProcessingInstruction$I `~node$ %node が[ `~prolog$の一部を[ 成すようになった/成さなくなった ]とき/ その`~data$が変化したとき ]には、次を走らすモノトスル: ◎ When a ProcessingInstruction node node becomes part of the prolog, is no longer part of the prolog, or has its data changed, these steps must be run:
- ~IF[ この~algoの~instanceが %node に対し現在~走っている ] ⇒# その~instanceを中止する; 適用-可能なら,結付けられている`~fetching$も停止する ◎ If an instance of this algorithm is currently running for node, abort that instance, and stop the associated fetching if applicable.
- ~IF[ %node に`結付けられている~CSS~ss$ %~ss がある ] ⇒ `~CSS~ssを除去する$( %~ss ) ◎ If node has an associated CSS style sheet, remove it.
- ~IF[ %node は `xml-stylesheet 処理命令$でない ] ⇒ ~RET ◎ If node is not an xml-stylesheet processing instruction, then return.
- ~IF[ %node に `href$xmlss `疑似属性$は指定されてない ] ⇒ ~RET ◎ If node does not have an href pseudo-attribute, then return.
- %~title ~LET [ %node に `title$xmlss `疑似属性$は指定されているならば その値 / ~ELSE_空~文字列 ] ◎ Let title be the value of the title pseudo-attribute or the empty string if the title pseudo-attribute is not specified.
- ~IF[ %node に `alternate$xmlss `疑似属性$は指定されていて,その値 ~EQ `yes^l ]~AND[ %~title ~EQ 空~文字列 ] ⇒ ~RET ◎ If there is an alternate pseudo-attribute whose value is a case-sensitive match for "yes" and title is the empty string, then return.
- 任意選択で ⇒ ~IF[ %node に `type$xmlss `疑似属性$は指定されていて,その値は`~supportされる~style付け言語$でない ] ⇒ ~RET ◎ If there is a type pseudo-attribute whose value is not a supported styling language the user agent may return.
- %入力~URL ~LET %node の `href$xmlss `疑似属性$に指定されている値 ◎ Let input URL be the value specified by the href pseudo-attribute.
- %文書 ~LET %node の`~node文書$ ◎ Let document be node’s node document
- %基底~URL ~LET %文書 の`文書~基底~URL$ ◎ Let base URL be document’s document base URL.
- %~referrer ~LET %文書 の`~address$ ◎ Let referrer be document’s address.
- %解析済み~URL ~LET `~URL構文解析する$( %入力~URL ) ◎ Let parsed URL be the return value of invoking the URL parser with the string input URL and the base URL base URL.
- ~IF[ %解析済み~URL ~EQ `失敗^i ] ⇒ ~RET ◎ If parsed URL is failure, then return.
- %応答 ~LET `~CSS~ss資源を~fetchする$( %解析済み~URL, %~referrer, %文書 ) ◎ Let response be the result of fetching a CSS style sheet with parsed URL parsed URL, referrer referrer and document document.
- ~IF[ %応答 ~EQ ~error ] ⇒ ~RET ◎ If response is an error, then return.
-
次の~propを伴う`~CSS~ssを作成する$: ◎ Create a CSS style sheet with the following properties:
- `所在$ss
- `~URLを直列化する$( %解析済み~URL ) ◎ The result of invoking the URL serializer with parsed URL.
- `親~CSS~ss$ss
- ~NULL ◎ null.
- `所有者~node$ss
- %node ◎ node.
- `所有者~CSS規則$ss
- ~NULL ◎ null.
- `媒体$ss
- `media$xmlss `疑似属性$の値が与えられていればそれ / いなければ空~文字列 ◎ The value of the media pseudo-attribute if any, or the empty string otherwise.
- `~title$ss
- %~title ◎ title.
- `代替-~flag$ss
- `alternate$xmlss `疑似属性$の値 ~EQ `yes^l ならば ~T / ~ELSE_ ~F ◎ Set if the alternate pseudo-attribute value is a case-sensitive match for "yes", or unset otherwise.
- `生成元clean~flag$ss
- %応答 は`~CORS同一-生成元$であるならば ~T / ~ELSE_ ~F ◎ Set if response is CORS-same-origin, or unset otherwise.
~CSS`環境~符号化法$は、次を走らせた結果とする: ◎ The CSS environment encoding is the result of running the following steps:
- ~IF[ 要素は `charset$xmlss `疑似属性$を持つ ] ⇒ ~IF[ `~labelから符号化法を取得する$( その疑似属性の値 ) ~NEQ `失敗^i ] ⇒ ~RET その結果 ◎ If the element has a charset pseudo-attribute, get an encoding from that pseudo-attribute’s value. If that succeeds, return the resulting encoding and abort these steps.
- ~RET `文書の文字~符号化法$ ◎ Otherwise, return the document’s character encoding. [DOM]
XML 構文解析器 %構文解析器 から作成される`文書$の文脈の下で,この節の~~規則を利用して[ `xml-stylesheet 処理命令$を表現する `ProcessingInstruction$I `~node$ %node ]から参照される~ss %~ss は、次のすべてを満たすとき,`~scriptを阻んでいる~ss$と呼ばれる: ◎ A style sheet referenced by an xml-stylesheet processing instruction using the rules in this section, in the context of the Document of an XML parser is said to be a style sheet that is blocking scripts if\
- %node は %構文解析器 により作成されたものである ◎ the ProcessingInstruction node was created by that Document's parser, and\
- %node の作成-時に %~ss は可能化されている ◎ the style sheet was enabled when the node was created by the parser, and\
- %~ss の`~ss準備済み~flag$は まだ ~T にされていない ◎ the style sheet ready flag is not yet set, and,\
-
`~event~loop$が 最後に上の~algoの最初の段に達した時点で:
- %node はその`文書$ 内に在った
- ~UA は %~ss をまだ`~give-up$していない — ~UA は %~ss をいつでも`~give-up$してヨイ。
【 `~give-up@ が正確に何を意味するかは、この仕様には定義されていない。 この時点では `give up^en したとしても, %~ss は後で処理されるかもしれない。 】【 `~ss準備済み~flag@ は、 ~HTML仕様に定義されていたが,現在は廃されている。 それに伴い,当該箇所も更新される必要がある。 】
6.3.5. HTTP `Link^h ~headerを実装する~UAに課される要件
各 HTTP `Link$h ~headerに対しては、次の手続きを走らすモノトスル: ◎ For each HTTP Link header\
- %~header値 ~LET `Link$h ~headerの値 ◎ of which\
- %関係~型~list ~LET [ %~header値 の中の一連の~link関係~型( `relation-type^c )からなる集合 ] ◎ one of the link relation types\
- ~IF[ `stylesheet^l ~NIN `~ACI$ %関係~型~list ] ⇒ ~RET ◎ is an ASCII case-insensitive match for "stylesheet" these steps must be run:
- %~title ~LET [ %~header値 の中に `title^l ~parameterは在るならば それらのうち最初のものの値 / 無いならば 空~文字列 ] ◎ Let title be the value of the first of all the title parameters. If there are no such parameters it is the empty string.
- ~IF[ %~title ~EQ 空~文字列 ]~AND[ `alternate^l ~IN `~ACI$ %関係~型~list ] ⇒ ~RET ◎ If one of the (other) link relation types is an ASCII case-insensitive match for "alternate" and title is the empty string, then return.
- %入力~URL ~LET %~header値 に指定されている URI-Reference (より詳細に規定する必要あり) ◎ Let input URL be the value specified. ◎ Be more specific
- %文書 ~LET 文書 ◎ ↓
- %基底~URL ~LET %文書 の`文書~基底~URL$ この時点で文書~objは在るのか? ◎ Let base URL be the document’s document base URL. ◎ Is there a document at this point?
- %~referrer ~LET %文書 の`~address$doc ◎ Let referrer be the document’s address.
- %生成元 ~LET %文書 の`生成元$ ◎ Let origin be the document’s origin.
- %解析済み~URL ~LET `~URL構文解析する$( %入力~URL ) ◎ Let parsed URL be the return value of invoking the URL parser with the string input URL and the base URL base URL.
- ~IF[ %解析済み~URL ~EQ `失敗^i ] ⇒ ~RET ◎ If parsed URL is failure, then return.
-
%応答 ~LET `~CSS~ss資源を~fetchする$( %解析済み~URL, %~referrer, %文書 ) ◎ Let response be the result of fetching a CSS style sheet with parsed URL parsed URL, referrer referrer and document being the document.
~HTML構文解析器が過去互換~modeかどうかまだ裁定していなかった場合はどうする? ◎ What if the HTML parser hasn’t decided on quirks/non-quirks yet?
-
次の~propを伴う`~CSS~ssを作成する$ ◎ Create a CSS style sheet with the following properties:
- `所在$ss
- `~URLを直列化する$( %解析済み~URL ) ◎ The result of invoking the URL serializer with parsed URL.
- `所有者~node$ss
- ~NULL ◎ null.
- `親~CSS~ss$ss
- ~NULL ◎ null.
- `所有者~CSS規則$ss
- ~NULL ◎ null.
- `媒体$ss
- 最初の `media^c ~parameterの値 ◎ The value of the first media parameter.
- `~title$ss
- %~title ◎ title.
- `代替-~flag$ss
- [ `alternate^l ~IN `~ACI$ %関係~型~list ならば ~T / ~ELSE_ ~F ] ◎ Set if one of the specified link relation type for this HTTP Link header is an ASCII case-insensitive match for "alternate", or false otherwise.
- `生成元clean~flag$ss
- %応答 は `~CORS同一-生成元$であるならば ~T / ~ELSE_ ~F ◎ Set if response is CORS-same-origin, or unset otherwise.
この節の~~規則を利用して HTTP `Link$h ~headerから参照される~ss %~ss のうち,所与の時点で 次のすべてを満たすものは、`~scriptを阻んでいる~ss$とされる — ~UA は,そのような~ssをいつでも`~give-up$してヨイ:
- %~ss は,その作成-時に可能化されている
- %~ss の`~ss準備済み~flag$ ~EQ ~F
- ~UA は, %~ss をまだ`~give-up$していない
6.4. ~CSS規則
`~CSS規則@ とは、~CSS仕様にて定義される規則を表す,抽象的な概念である。 `~CSS規則$は、 `CSSRule$I ~interfaceを継承する~interfaceを実装する~objで表現される。 それには,以下の状態~itemが結付けられる 【括弧内は,~itemに対応する `CSSRule^I の属性~member(この訳による補足)】 ◎ A CSS rule is an abstract concept that denotes a rule as defined by the CSS specification. A CSS rule is represented as an object that implements a subclass of the CSSRule interface, and which has the following associated state items:
- `種別@( `type$m1 ) ◎ type
- 特定0の[ 規則の種別 ]に結付けられている,負でない整数。 この~itemは、規則の作成-時に初期化され,変更されることはない。 【 `CSSRule$I を継承する特定の~interfaceに対応する。】 ◎ A non-negative integer associated with a particular type of rule. This item is initialized when a rule is created and cannot change.
- `~text@( `cssText$m1 ) ◎ text
- ~ss内で直に利用するのに適するような,規則の~text表現。 この~itemは規則の作成-時に初期化され,規則が存続する間 変更され得る。 ◎ A text representation of the rule suitable for direct use in a style sheet. This item is initialized when a rule is created and can be changed.
- `親~規則@( `parentRule$m1 ) ◎ parent CSS rule
- この規則を封入している別の`~CSS規則$への参照か, または ~NULL。 この~itemは規則の作成-時に[ そのような別の規則があるならばそれ / ~ELSE_ ~NULL ]に初期化され,~NULLに変更され得る。 ◎ A reference to an enclosing CSS rule or null. If the rule has an enclosing rule when it is created, then this item is initialized to the enclosing rule; otherwise it is null. It can be changed to null.
- `親~ss@( `parentStyleSheet$m1 ) ◎ parent CSS style sheet
- 親の`~CSS~ss$への参照か, または ~NULL。 この~itemは、規則の作成-時に結付けられている~ssへの参照に初期化され,~NULLに変更され得る。 ◎ A reference to a parent CSS style sheet or null. This item is initialized to reference an associated style sheet when the rule is created. It can be changed to null.
- `子~規則~list@ ◎ child CSS rules
- 子 `~CSS規則$の~list。 この~listは変異し得る。 ◎ A list of child CSS rules. The list can be mutated.
上の状態~itemに加え、各`~CSS規則$には,その`種別$に則って他の状態~itemも結付けられ得る。 ◎ In addition to the above state, each CSS rule may be associated with other state in accordance with its type.
`~CSS規則として構文解析する@ ときは、所与の ( 文字列 %文字列 ) に対し,次を走らす: ◎ To parse a CSS rule from a string string, run the following steps:
- %規則 ~LET %文字列 から 規則を構文解析-した結果 ◎ Let rule be the return value of invoking parse a rule with string.
- ~IF[ %規則 ~EQ 構文~error ] ⇒ ~RET %規則 ◎ If rule is a syntax error, return rule.
- %解析済み規則 ~LET 適切な~CSS仕様に則って %規則 を構文解析した上で,`無視される$ものは落とした結果 ⇒ ~IF[ ~style規則~全体が落とされた ] ⇒ ~RET 構文~error ◎ Let parsed rule be the result of parsing rule according to the appropriate CSS specifications, dropping parts that are said to be ignored. If the whole style rule is dropped, return a syntax error.
- ~RET %解析済み規則 ◎ Return parsed rule.
`~CSS規則を直列化する@ ときは、所与の ( `~CSS規則$ %規則 ) に対し,その`種別$ 【に対応する~interface】 に応じて,次に与える文字列を返す: ◎ To serialize a CSS rule, perform one of the following in accordance with the CSS rule’s type:
- `CSSStyleRule$I
-
- %結果 ~LET 次の連結 ⇒# `選択子~listを直列化する$( %規則 が表現している`~CSS~style規則$の`選択子~list$ ), ~SP, ❝{, ~SP ◎ The result of concatenating the following: ◎ The result of performing serialize a group of selectors on the rule’s associated selectors. ◎ The string " { ", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B), followed by a single SPACE (U+0020).
- %宣言~block ~LET %規則 が表現している`~CSS~style規則$の`~CSS宣言~block$【 `style$m1 】 ◎ ↓
- ~IF[ %宣言~block の`宣言列$は空でない ] ⇒ %結果 に次を順に付加する ⇒# `宣言列を直列化する$( %宣言~block ), ~SP ◎ The result of performing serialize a CSS declaration block on the rule’s associated declarations. ◎ If the rule is associated with one or more declarations, the string " ", i.e., a single SPACE (U+0020).
- %結果 に ❝} を付加する ◎ The string "}", RIGHT CURLY BRACKET (U+007D).
- ~RET %結果 ◎ ↑
- `CSSImportRule$I
-
-
%結果 ~LET 次の連結
⇒#
"
@import
", ~SP, `~CSS~URLに直列化する$( %規則 の所在【 `href$m1 】 ) ◎ The result of concatenating the following: ◎ The string "@import" followed by a single SPACE (U+0020). ◎ The result of performing serialize a URL on the rule’s location. - ~IF[ %規則 に結付けられている媒体~list %媒体~list 【 `media$m1 / `媒体~query~collection$ 】 は空でない ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `媒体~query~listを直列化する$( %媒体~list ) ◎ If the rule’s associated media list is not empty, a single SPACE (U+0020) followed by the result of performing serialize a media query list on the media list.
- %結果 に ❝; を付加する ◎ The string ";", i.e., SEMICOLON (U+003B).
- ~RET %結果 ◎ ↑
`import$at url(`import.css^l);
`import$at url(`print.css^l) print;
-
%結果 ~LET 次の連結
⇒#
"
- `CSSMediaRule$I
-
- %結果 ~LET 次の連結 ⇒# `@media^l, ~SP, `媒体~query~listを直列化する$( %規則 の媒体~query~list 【`媒体~query~collection$】 ), ~SP, ❝{ ◎ The result of concatenating the following: ◎ The string "@media", followed by a single SPACE (U+0020). ◎ The result of performing serialize a media query list on rule’s media query list. ◎ A single SPACE (U+0020), followed by the string "{", i.e., LEFT CURLY BRACKET (U+007B), followed by a newline.
- %規則 の`子~規則~list$【!cssRules:#dom-cssgroupingrule-cssrules】を成す ~EACH( %子~規則 ) に対し ⇒ %結果 に次を順に付加する ⇒# ~newline†, ~SP, ~SP, `~CSS規則を直列化する$( %子~規則 ) ◎ The result of performing serialize a CSS rule on each rule in the rule’s cssRules list, separated by a newline and indented by two spaces.
- %結果 に次を順に付加する ⇒# ~newline†, ❝} ◎ A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
- ~RET %結果 ◎ ↑
【† おそらく, `000A^U0 (LF) 】
- `CSSFontFaceRule$I
-
- %結果 ~LET 次の連結 ⇒# `@font-face {^l, ~SP, `font-family:^l, ~SP, `文字列を直列化する$( %規則 の `font-family$td ), ❝; ◎ The result of concatenating the following: ◎ The string "@font-face {", followed by a single SPACE (U+0020). ◎ The string "font-family:", followed by a single SPACE (U+0020). ◎ The result of performing serialize a string on the rule’s font family name. ◎ The string ";", i.e., SEMICOLON (U+003B).
-
~IF[ %規則 内に `src$d 記述子は在る 【! associated source list is not empty】 ]:
- %~source~list ~LET %規則 の `src$td 内の各~sourceに[ `~CSS~URLに直列化する$ / `~LOCALに直列化する$ ]のいずれか適切な方を適用して得られる同順の~list
- %結果 に次を順に付加する ⇒# ~SP, `src:^l, ~SP, `~comma区切りで直列化する$( %~source~list ), ❝;
- ~IF[ %規則 内に `unicode-range$d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `unicode-range:^l, ~SP, %規則 の `unicode-range$td を直列化した結果, ❝; ◎ If rule’s associated unicode-range descriptor is present, a single SPACE (U+0020), followed by the string "unicode-range:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'unicode-range'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- ~IF[ %規則 内に `font-variant^d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `font-variant:^l, ~SP, %規則 の `font-variant^td を直列化した結果, ❝; ◎ If rule’s associated font-variant descriptor is present, a single SPACE (U+0020), followed by the string "font-variant:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'font-variant'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- ~IF[ %規則 内に `font-feature-settings$d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `font-feature-settings:^l, ~SP, %規則 の `font-feature-settings$td を直列化した結果, ❝; ◎ If rule’s associated font-feature-settings descriptor is present, a single SPACE (U+0020), followed by the string "font-feature-settings:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'font-feature-settings'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- ~IF[ %規則 内に `font-stretch$d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `font-stretch:^l, ~SP, %規則 の `font-stretch$td を直列化した結果, ❝; ◎ If rule’s associated font-stretch descriptor is present, a single SPACE (U+0020), followed by the string "font-stretch:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'font-stretch'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- ~IF[ %規則 内に `font-weight$d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `font-weight:^l, ~SP, %規則 の `font-weight$td を直列化した結果, ❝; ◎ If rule’s associated font-weight descriptor is present, a single SPACE (U+0020), followed by the string "font-weight:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'font-weight'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- ~IF[ %規則 内に `font-style$d 記述子は在る ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `font-style:^l, ~SP, %規則 の `font-style$td を直列化した結果, ❝; ◎ If rule’s associated font-style descriptor is present, a single SPACE (U+0020), followed by the string "font-style:", followed by a single SPACE (U+0020), followed by the result of performing serialize a <'font-style'>, followed by the string ";", i.e., SEMICOLON (U+003B).
- %結果 に次を順に付加する ⇒# ~SP, ❝} ◎ A single SPACE (U+0020), followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D).
- ~RET %結果 ◎ ↑
`CSSFontFaceRule$I の各種 記述子の値を直列化する方法を定義する必要がある。 ◎ Need to define how the CSSFontFaceRule descriptors' values are serialized.
- `CSSPageRule$I
- 直列化する方法を定義する必要がある。 ◎ Need to define how CSSPageRule is serialized.
- `CSSNamespaceRule$I
-
-
%結果 ~LET 次の連結
⇒#
"
@namespace
", ~SP - ~IF[ %規則 に`~ns接頭辞$は在る【!`prefix$m1 attribute ~NEQ 空~文字列】 ] ⇒ %結果 に次を順に付加する ⇒# `識別子を直列化する$( %規則 の`~ns接頭辞$ ), ~SP, `~CSS~URLに直列化する$( %規則 の`~ns名$【!`namespaceURI$m1 attribute】 ), ❝; ◎ The literal string "@namespace", followed by a single SPACE (U+0020), followed by the serialization as an identifier of the prefix attribute (if any), followed by a single SPACE (U+0020) if there is a prefix, followed by the serialization as URL of the namespaceURI attribute, followed the character ";" (U+003B).
- ~RET %結果 ◎ ↑
-
%結果 ~LET 次の連結
⇒#
"
- `CSSKeyframesRule$I
-
-
%結果 ~LET 次の連結 ⇒# `@keyframes^l, ~SP, `識別子を直列化する$( `name$mA 属性の値 ), ~SP†, ❝{† ◎ The result of concatenating the following: ◎ The literal string "@keyframes", followed by a single SPACE (U+0020). ◎ The serialization as an identifier of the name attribute.
【† 原文には無いが、必要であろう。 】
- %規則 の`子~規則~list$【!~CSSANIM#dom-csskeyframesrule-name】を成す ~EACH( %子~規則 ) に対し ⇒ %結果 に次を順に付加する ⇒# ~newline†, ~SP, ~SP, `~CSS規則を直列化する$( %子~規則 ) ◎ The result of performing serialize a CSS rule on each rule in the rule’s cssRules list, separated by a newline and indented by two spaces.
- %結果 に次を順に付加する ⇒# ~newline†, ❝} ◎ A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
【† おそらく, `000A^U0 (LF) 】
-
- `CSSKeyframeRule$I
-
- %結果 ~LET 次の連結 ⇒# `keyText$mA 属性の値, ~SP, ❝{, ~SP ◎ The result of concatenating the following: ◎ The keyText. ◎ The string " { ", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
- %宣言~block ~LET %規則 が表現している`~CSS~style規則$の`~CSS宣言~block$ 【 `style$mA 】 ◎ ↓
- ~IF[ %宣言~block の`宣言列$は空でない ] ⇒ %結果 に次を順に付加する ⇒# `宣言列を直列化する$( %宣言~block ), ~SP ◎ The result of performing serialize a CSS declaration block on the rule’s associated declarations. ◎ If the rule is associated with one or more declarations, the string " ", i.e., a single SPACE (U+0020).
- %結果 に ❝} を付加する ◎ The string "}", RIGHT CURLY BRACKET (U+007D).
2 個の ~SP で “字下げする” 所 【~newline, ~SP, ~SP を付加する所】 は、~browserに合致するが,作業が必要である。 `5494$issue を見よ。 【入子な`~CSS規則$に対しても,同じ字下げになってしまう。】 ◎ The "indented by two spaces" bit matches browsers, but needs work, see #5494
`~CSS規則~listに規則を挿入する@ ときは、所与の ( `~CSS規則~list$ss %~list, `~CSS規則$ %規則, %index ) に対し,次を走らす: ◎ To insert a CSS rule rule in a CSS rule list list at index index, follow these steps:
- ~IF[ %index ~GT %~list の~item数 ] ⇒ ~THROW `IndexSizeError$E ◎ Set length to the number of items in list. ◎ If index is greater than length, then throw an IndexSizeError exception.
- %解析済み規則 ~SET `~CSS規則として構文解析する$( %規則 ) ◎ Set new rule to the results of performing parse a CSS rule on argument rule.
- ~IF[ %解析済み規則 ~EQ 構文~error ] ⇒ ~THROW `SyntaxError$E ◎ If new rule is a syntax error, throw a SyntaxError exception.
-
~IF[ ~CSS仕様 `CSS21$r に規定される拘束に反するために,指定された %index ( 0 が先頭)に %解析済み規則 を挿入できない ] ⇒ ~THROW `HierarchyRequestError$E ◎ If new rule cannot be inserted into list at the zero-index position index due to constraints specified by CSS, then throw a HierarchyRequestError exception. [CSS21]
注記: 例えば、~CSS~ssは,~style規則の後に `import$at ~at-ruleを含められない。 ◎ Note: For example, a CSS style sheet cannot contain an @import at-rule after a style rule.
- ~IF[ %解析済み規則 は `namespace$at ~at-ruleである ]~AND[ %~list 内に[ `import$at ~at-rule, `namespace$at ~at-rule ]以外のものが含まれている ] ⇒ ~THROW `InvalidStateError$E ◎ If new rule is an @namespace at-rule, and list contains anything other than @import at-rules, and @namespace at-rules, throw an InvalidStateError exception.
- %解析済み規則 を %~list 内の %index 番の~itemになるように挿入する ◎ Insert new rule into list at the zero-indexed position index.
- ~RET %index ◎ Return index.
`~CSS規則~listから規則を除去する@ ときは、所与の ( `~CSS規則~list$ss %~list, %index ) に対し,次を走らす: ◎ To remove a CSS rule from a CSS rule list list at index index, follow these steps:
- ~IF[ %index ~GTE %~list の長さ ] ⇒ ~THROW `IndexSizeError$E ◎ Set length to the number of items in list. ◎ If index is greater than or equal to length, then throw an IndexSizeError exception.
- %規則 ~SET %~list 内の %index 番の`~CSS規則$ ◎ Set old rule to the indexth item in list.
- ~IF[ %規則 は `namespace$at ~at-ruleである ]~AND[ %~list 内に[ `import$at ~at-rule, `namespace$at ~at-rule ]以外のものが含まれている ] ⇒ ~THROW `InvalidStateError$E ◎ If old rule is an @namespace at-rule, and list contains anything other than @import at-rules, and @namespace at-rules, throw an InvalidStateError exception.
- %~list から %index 番の %規則 を除去する ◎ Remove rule old rule from list at the zero-indexed position index.
- %規則 の[ `親~規則$ / `親~ss$ ] ~SET ~NULL ◎ Set old rule’s parent CSS rule and parent CSS style sheet to null.
6.4.1. `CSSRuleList^I ~interface
`CSSRuleList$I ~interfaceは、 `~CSS~style規則$の有順序~collectionを表現する。 ◎ The CSSRuleList interface represents an ordered collection of CSS style rules.
[`Exposed$=Window] interface `CSSRuleList@I { getter `CSSRule$I? `item$m(`~UL$ %index); ~RA `~UL$ `length$m; };
`CSSRuleList$I ~obj %O が`~supportする~prop~index$は、 0 以上[ %O が表現する~collectionを成す `CSSRule$I ~objの総数 ]未満とする。 ◎ The object’s supported property indices are the numbers in the range zero to one less than the number of CSSRule objects represented by the collection. If there are no such CSSRule objects, then there are no supported property indices.
6.4.2. `CSSRule^I ~interface
`CSSRule$I ~interfaceは,抽象的な基底`~CSS~style規則$を表現する。 各種`~CSS~style規則$は、その種別に応じて,この~interfaceを継承する別々の~interfaceで表現される。 ◎ The CSSRule interface represents an abstract, base CSS style rule. Each distinct CSS style rule type is represented by a distinct interface that inherits from this interface.
[`Exposed$=Window]
interface `CSSRule@I {
attribute `CSSOMString$ `cssText$m;
~RA `CSSRule$I? `parentRule$m;
~RA `CSSStyleSheet$I? `parentStyleSheet$m;
/*
以下の属性, 定数は歴史的
◎
the following attribute and constants are historical
*/
~RA ~US `type$m;
const ~US `STYLE_RULE@m = 1;
const ~US `CHARSET_RULE@m = 2;
const ~US `IMPORT_RULE@m = 3;
const ~US `MEDIA_RULE@m = 4;
const ~US `FONT_FACE_RULE@m = 5;
const ~US `PAGE_RULE@m = 6;
const ~US `MARGIN_RULE@m = 9;
const ~US `NAMESPACE_RULE@m = 10;
};
`parentRule@m 取得子~手続きは ⇒ ~RET コレの`親~規則$ ◎ The parentRule attribute must return the parent CSS rule.
注記: 例えば、 `media$at は規則を封入し得る。 その場合、`parentRule$m は非 ~NULL になる。 封入する規則がないときの `parentRule$m は~NULLになる。 ◎ Note: For example, @media can enclose a rule, in which case parentRule would be non-null; in cases where there is no enclosing rule, parentRule will be null.
`parentStyleSheet@m 取得子~手続きは ⇒ ~RET コレの`親~ss$ ◎ The parentStyleSheet attribute must return the parent CSS style sheet.
注記: ~NULLが返されるような唯一の~~状況は、~CSS~ssから 除去されたとき である。 ◎ Note: The only circumstance where null is returned when a rule has been removed.
注記: `文書$から[ `LinkStyle$I ~interfaceを実装する `Node^I ]が除去されても,(それだけでは) `CSSRule$I から `CSSStyleSheet$I への参照は到達できなくなるわけではない。 ◎ Note: Removing a Node that implements the LinkStyle interface from a Document instance does not (by itself) cause the CSSStyleSheet referenced by a CSSRule to be unreachable.
`type@m 属性は非推奨にされた。 その取得子~手続きは ⇒ ~RET コレがどの~interfaceの~instanceであるかに応じて,次の表に与える整数: ◎ The type attribute is deprecated. It must return an integer, as follows:
~interface | 結果 |
---|---|
`CSSStyleRule$I | 1 |
`CSSImportRule$I | 3 |
`CSSMediaRule$I | 4 |
`CSSFontFaceRule$I | 5 |
`CSSPageRule$I | 6 |
`CSSKeyframesRule$I | 7 |
`CSSKeyframeRule$I | 8 |
`CSSMarginRule$I | 9 |
`CSSNamespaceRule$I | 10 |
`CSSCounterStyleRule$I | 11 |
`CSSSupportsRule$I | 12 |
`CSSFontFeatureValuesRule$I | 14 |
`CSSViewportRule$I | 15 |
その他 | 0 |
注記: [ 整数~列挙/ 整数を`識別する^emいくつかの定数 ]を利用する実施は、旧来の設計であり、もはや~Web~APIには利用されない。 所与の~objが どの型の規則か知るには、代わりに %rule.`constructor.name^m を検査することが推奨される — それは、 `CSSStyleRule^l の様な文字列を返す。 ◎ Note: The practice of using an integer enumeration and several constants to identify the integers is a legacy design practice that is no longer used in Web APIs. Instead, to tell what type of rule a given object is, it is recommended to check rule.constructor.name, which will return a string like "CSSStyleRule".
6.4.3. `CSSStyleRule^I ~interface
`CSSStyleRule$I ~interfaceは`~CSS~style規則$を表現する。 ◎ The CSSStyleRule interface represents a style rule.
【 `~CSS~style規則@ とは、`選択子~list$と`~CSS宣言~block$の組である。 略して “~style規則” とも記される。 】
[`Exposed$=Window] interface `CSSStyleRule@I : `CSSRule$I { attribute `CSSOMString$ `selectorText$m; [`SameObject$, `PutForwards$=`CSSStyleDeclaration^I1`cssText$m1] ~RA `CSSStyleDeclaration$I `style$m; };
`selectorText$m 設定子~手続きは: ◎ On setting the selectorText attribute these steps must be run:
- %~list ~LET `選択子~listとして構文解析する$( 所与の値 ) ◎ Run the parse a group of selectors algorithm on the given value.
- ~IF[ %~list ~NEQ ~NULL ] ⇒ コレに結付けられている`選択子~list$ ~SET %~list ◎ If the algorithm returns a non-null value replace the associated group of selectors with the returned value. ◎ Otherwise, if the algorithm returns a null value, do nothing.
`指定d順@ による宣言列とは、その順序は指定された順序と同じであるが,`略式~prop$については`正準的~順序$で`下位prop$たちに展開されているものである。 同じ~propが(`略式~prop$の展開-後に)複数~回~現れる場合、~cascade法において最高位のもののみが,指定された所に位置するものとして表現するモノトスル。 `CSS3CASCADE$r ◎ The specified order for declarations is the same as specified, but with shorthand properties expanded into their longhand properties, in canonical order. If a property is specified more than once (after shorthand expansion), only the one with greatest cascading order must be represented, at the same relative position as it was specified. [CSS3CASCADE]
6.4.4. `CSSImportRule^I ~interface
`CSSImportRule$I ~interfaceは `import$at ~at-ruleを表現する。 ◎ The CSSImportRule interface represents an @import at-rule.
[`Exposed$=Window] interface `CSSImportRule@I : `CSSRule$I { ~RA `USVString$ `href$m; [`SameObject$, `PutForwards$=`mediaText$m] ~RA `MediaList$I `media$m; [`SameObject$] ~RA `CSSStyleSheet$I `styleSheet$m; };
`href@m 取得子~手続きは ⇒ ~RET `import$at ~at-ruleに指定された URL 【!*】 ◎ The href attribute must return the URL specified by the @import at-rule.
注記: 解決された URL を取得するには,結付けられている`~CSS~ss$の `StyleSheet.href$m 属性を利用する。 ◎ Note: To get the resolved URL use the href attribute of the associated CSS style sheet.
`styleSheet@m 取得子~手続きは ⇒ ~RET コレに結付けられている`~CSS~ss$ ◎ The styleSheet attribute must return the associated CSS style sheet.
注記: `import$at ~at-ruleには常に`~CSS~ss$が結付けられる。 ◎ Note: An @import at-rule always has an associated CSS style sheet.
6.4.5. `CSSGroupingRule^I ~interface
`CSSGroupingRule$I ~interfaceは 自身の内部に他の規則を入子にする~at-ruleを表現する。 ◎ The CSSGroupingRule interface represents an at-rule that contains other rules nested inside itself.
[`Exposed$=Window] interface `CSSGroupingRule@I : `CSSRule$I { [`SameObject$] ~RA `CSSRuleList$I `cssRules$m; `~UL$ `insertRule$m(`CSSOMString$ %rule, optional `~UL$ %index = 0); `undefined$ `deleteRule$m(`~UL$ %index); };
6.4.6. `CSSMediaRule^I ~interface
`CSSMediaRule$I ~interfaceは、 `CSS3-CONDITIONAL$r にて定義される。 ◎ The CSSMediaRule interface is defined in CSS Conditional Rules. [CSS3-CONDITIONAL]
6.4.7. `CSSPageRule^I ~interface
`CSSPageRule$I ~interfaceは `page$at ~at-ruleを表現する。 ◎ The CSSPageRule interface represents an @page at-rule.
`~CSS~page選択子~list$を `構文解析-@page / `直列化-@page するための~~規則を定義する必要がある。 ◎ Need to define the rules for parse a list of CSS page selectors and serialize a list of CSS page selectors.
[`Exposed$=Window] interface `CSSPageRule@I : `CSSGroupingRule$I { attribute `CSSOMString$ `selectorText$m; [`SameObject$, `PutForwards$=`CSSStyleDeclaration^I1`cssText$m1] ~RA `CSSStyleDeclaration$I `style$m; };
`selectorText$m 設定子~手続きは: ◎ On setting the selectorText attribute these steps must be run:
- %値 ~LET `~CSS~page選択子~listとして構文解析する$( 所与の値 ) ◎ Run the parse a list of CSS page selectors algorithm on the given value.
- ~IF[ %値 ~NEQ ~NULL ] ⇒ コレに結付けられている`~CSS~page選択子~list$ ~SET %値 ◎ If the algorithm returns a non-null value replace the associated list of CSS page selectors with the returned value. ◎ Otherwise, if the algorithm returns a null value, do nothing.
6.4.8. `CSSMarginRule^I ~interface
`CSSMarginRule$I ~interfaceは `page$at ~at-ruleの中の `~margin~at-rule$ (例えば `top-left^at )を表現する。 `CSS3PAGE$r ◎ The CSSMarginRule interface represents a margin at-rule (e.g. @top-left) in an @page at-rule. [CSS3PAGE]
[`Exposed$=Window] interface `CSSMarginRule@I : `CSSRule$I { ~RA `CSSOMString$ `name$m; [`SameObject$, `PutForwards$=`CSSStyleDeclaration^I1`cssText$m1] ~RA `CSSStyleDeclaration$I `style$m; };
@
" は名前に含まれない
`CSS3SYN$r
◎
The name attribute must return the name of the margin at-rule. The @ character is not included in the name. [CSS3SYN]
6.4.9. `CSSNamespaceRule^I ~interface
`CSSNamespaceRule$I ~interfaceは `namespace$at ~at-ruleを表現する。 ◎ The CSSNamespaceRule interface represents an @namespace at-rule.
[`Exposed$=Window] interface `CSSNamespaceRule@I : `CSSRule$I { ~RA `CSSOMString$ `namespaceURI$m; ~RA `CSSOMString$ `prefix$m; };
6.5. ~CSS宣言
`~CSS宣言@ とは、~DOMにおいては~objとして公開されない抽象的な概念である。 各 `~CSS宣言$には、次のものが結付けられる: ◎ A CSS declaration is an abstract concept that is not exposed as an object in the DOM. A CSS declaration has the following associated properties:
【 CSS2 の 宣言 — すなわち[ ~prop名: 値 ]の組に対応する。 】
- `~prop名@ ◎ property name
- 宣言の~prop名 ◎ The property name of the declaration.
- `値@ ◎ value
- 宣言の値を成す成分値たちからなる~listとして表現される ◎ The value of the declaration represented as a list of component values.
- `~important~flag@ ◎ important flag
- 変更-可能な真偽値。 ◎ Either set or unset. Can be changed.
- 【
!important
宣言の有無に対応する 】 - `文字大小区別~flag@ ◎ case-sensitive flag
- `~prop名$が その仕様に則って文字大小区別とされているとき ~T にされ, 他の場合は ~F にされる。 ◎ Set if the property name is defined to be case-sensitive according to its specification, otherwise unset.
- 【 ほぼ ~custom~prop用 のもの 】
6.6. ~CSS宣言~block
`~CSS宣言~block@ とは、値が結付けられている~CSS~prop( `~CSS宣言$とも呼ばれる)からなる,有順序~collectionである。 ~DOMにおいては, `CSSStyleDeclaration$I ~objが`~CSS宣言~block$を表現する。 各 `~CSS宣言~block$には,次のものが結付けられる: ◎ A CSS declaration block is an ordered collection of CSS properties with their associated values, also named CSS declarations. In the DOM a CSS declaration block is a CSSStyleDeclaration object. A CSS declaration block has the following associated properties:
【 CSS2 の 宣言~block に対応する 】
- `算出d~flag@ ◎ computed flag
- ~objは算出d~style宣言であるならば ~T に設定される。 他が言明されない限り, ~F にされる。 ◎ Set if the object is a computed style declaration, rather than a specified style. Unless otherwise stated it is unset.
- `宣言列@ ◎ declarations
- ~objに結付けられている一連の`~CSS宣言$。 ◎ The CSS declarations associated with the object.
- 【 宣言列は,内部的には[ `略式~prop$の宣言は、その`下位prop$たちに展開-済みとして扱われる ]ように見受けられるが(`指定d順$など、一部の箇所では,そのように指定されてもいる)、宣言列は略式~propを包含し得ないものと明示的には定義されておらず,はっきりしない部分もある。 】
- `親~CSS規則@ ◎ parent CSS rule
- `~CSS宣言~block$が結付けられている`~CSS規則$は在るならば それ / 無いならば ~NULL ◎ The CSS rule that the CSS declaration block is associated with, if any, or null otherwise.
- `所有者~node@ ◎ owner node
- `~CSS宣言~block$が結付けられている `Element$I は在るならば それ / 無いならば ~NULL ◎ The Element that the CSS declaration block is associated with, if any, or null otherwise.
- `更新-中~flag@ ◎ updating flag
- 真偽値をとり、既定は ~F とする。 `~CSS宣言~block$が`所有者~node$の `style^a 属性を更新している間は ~T にされる。 ◎ Unset by default. Set when the CSS declaration block is updating the owner node’s style attribute.
`~CSS宣言~blockとして構文解析する@ ときは、所与の ( 文字列 %文字列 ) に対し,次を走らす: ◎ To parse a CSS declaration block from a string string, follow these steps:
- %宣言~list ~LET %文字列 を 宣言~listとして構文解析- した結果 ◎ Let declarations be the return value of invoking parse a list of declarations with string.
- %解析済み宣言~list ~LET 新たな空~list ◎ Let parsed declarations be a new empty list.
-
%宣言~list を成す ~EACH( %宣言 ) に対し: ◎ For each item declaration in declarations, follow these substeps:
- %解析済み宣言 ~LET 適切な~CSS仕様に則って %宣言 を構文解析し,`無視される$ものは落とした結果 ◎ Let parsed declaration be the result of parsing declaration according to the appropriate CSS specifications, dropping parts that are said to be ignored. If the whole declaration is dropped, let parsed declaration be null.
- ~IF[ 前~段により宣言~全体は落とされてはいない( %解析済み宣言 は空でない) ] ⇒ %解析済み宣言~list に %解析済み宣言 を付加する ◎ If parsed declaration is not null, append it to parsed declarations.
- ~RET %解析済み宣言~list ◎ Return parsed declarations.
`~CSS宣言を直列化する@ ときは、所与の ( %~prop名, %値, %~important~flag ) に対し,次に従う: ◎ To serialize a CSS declaration with property name property, value value and optionally an important flag set, follow these steps:
- %結果 ~LET 次の連結 ⇒# %~prop名, ❝:, ~SP, %値 ◎ Let s be the empty string. ◎ Append property to s. ◎ Append ": " (U+003A U+0020) to s. ◎ Append value to s.
- ~IF[ %important ~EQ ~T ] ⇒ %結果 に次を順に付加する ⇒# ~SP, `!important^l (U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074) ◎ If the important flag is set, append " !important" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074) to s.
- %結果 に ❝; を付加する ◎ Append ";" (U+003B) to s.
- ~RET %結果 ◎ Return s.
`宣言列を直列化する@ ときは、所与の ( `~CSS宣言~block$ %宣言~block ) に対し,次を走らす: ◎ To serialize a CSS declaration block declaration block means to run the steps below:
- %宣言~list ~LET %宣言~block の`宣言列$を`~cloneする$ 【以下を簡略化するため、この訳では~cloneする。】 ◎ ↓
- %~list ~LET 空~list ◎ Let list be an empty array. ◎ Let already serialized be an empty array.
-
%宣言~list を成す ~EACH( `~CSS宣言$ %宣言 ) に対し: ◎ Declaration loop: For each CSS declaration declaration in declaration block’s declarations, follow these substeps:
- %important ~LET %宣言 の`~important~flag$ ◎ ↓
-
%宣言 の`~prop名$ に対応する`略式~prop$たち(無いならば,この段は飛ばす)を成す ~EACH( %略式~prop ) に対し,`選好d順$で: ◎ Let property be declaration’s property name. ◎ If property is in already serialized, continue with the steps labeled declaration loop. ◎ If property maps to one or more shorthand properties, let shorthands be an array of those shorthand properties, in preferred order. ◎ Shorthand loop: For each shorthand in shorthands, follow these substeps:
- %下位prop宣言~list ~LET %宣言~list 内の`~CSS宣言$のうち[ その`~prop名$は、 %略式~prop の ある`下位prop$の名前であるもの ]すべてからなる同順の~list ◎ ↓
-
~IF[ 次のいずれかが満たされる ]…:
- %下位prop宣言~list を成す`~CSS宣言$たちの`~prop名$は、 %略式~prop のすべての`下位prop$の名前を網羅していない ◎ Let longhands be an array consisting of all CSS declarations in declaration block’s declarations that that are not in already serialized and have a property name that maps to one of the shorthand properties in shorthands. ◎ If all properties that map to shorthand are not present in longhands, continue with the steps labeled shorthand loop. ◎ Let current longhands be an empty array. ◎ Append all CSS declarations in longhands have a property name that maps to shorthand to current longhands.
- %下位prop宣言~list 内に次を満たす`~CSS宣言$が在る ⇒ `~important~flag$ ~NEQ %important ◎ If there is one or more CSS declarations in current longhands have their important flag set and one or more with it unset, continue with the steps labeled shorthand loop.
-
%宣言~list 内に次をすべて満たす`~CSS宣言$が在る:
- %下位prop宣言~list には含まれない
- %宣言~list 内で[ %下位prop宣言~list を成す最初の宣言【すなわち %宣言 】から最後の宣言 ]の合間にある
- %下位prop宣言~list 内の ある下位prop【どれでもよい】と同じ`論理-~prop~group$に属するが,`対応付け~logic$は異なる
…ならば ⇒ ~CONTINUE ◎ ↑
- %値 ~LET `下位prop~listを直列化する$( %下位prop宣言~list ) ◎ Let value be the result of invoking serialize a CSS value of current longhands.
- ~IF[ %値 ~EQ 空~文字列 ] ⇒ ~CONTINUE ◎ If value is the empty string, continue with the steps labeled shorthand loop.
- %~list に次の結果を`付加する$ ⇒ `~CSS宣言を直列化する$( %略式~prop, %値, %important ) ◎ Let serialized declaration be the result of invoking serialize a CSS declaration with property name shorthand, value value, and the important flag set if the CSS declarations in current longhands have their important flag set. ◎ Append serialized declaration to list.
- %宣言~list から %下位prop宣言~list を成すすべての宣言を`除去する$ ◎ Append the property names of all items of current longhands to already serialized.
- ~GOTO `最後^i ◎ Continue with the steps labeled declaration loop.
- %値 ~LET `~CSS値を直列化する$( %宣言 ) ◎ Let value be the result of invoking serialize a CSS value of declaration.
- %~list に次の結果を`付加する$ ⇒ `~CSS宣言を直列化する$( %宣言 の`~prop名$, %値, %important ) ◎ Let serialized declaration be the result of invoking serialize a CSS declaration with property name property, value value, and the important flag set if declaration has its important flag set. ◎ Append serialized declaration to list.
- %宣言~list から %宣言 を`除去する$ ◎ Append property to already serialized.
- `最後^i: (何もしない) ◎ ↑
- ~RET %~list を~SPで`連結する$ ◎ Return list joined with " " (U+0020).
注記: 空な`~CSS宣言~block$を直列化した結果は、空~文字列になる。 ◎ Note: The serialization of an empty CSS declaration block is the empty string.
注記: 空でない`~CSS宣言~block$を直列化した結果の,先頭/末尾 には、空白は含まれない。 すなわち,最初の~prop名の前, および最後の~prop値の最後の~semicolon区切子の後には、空白は現れない。 ◎ Note: The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitespace appears before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.
`~CSS宣言~block$~obj %O の`所有者~node$用の`属性~変更-時の手続き$は、所与の ( %局所~名, %旧-値, %値, %~ns ) に対し,次を走らす: ◎ A CSS declaration block has these attribute change steps for its owner node with localName, value, and namespace:
- ~IF[ %O の`算出d~flag$ ~EQ ~T ] ⇒ ~RET ◎ If the computed flag is set, then return.
- ~IF[ %O の`更新-中~flag$ ~EQ ~T ] ⇒ ~RET ◎ If the updating flag is set, then return.
- ~IF[ %局所~名 ~NEQ `style^l ]~OR[ %~ns ~NEQ ~NULL ] ⇒ ~RET ◎ If localName is not "style", or namespace is not null, then return.
- ~IF[ %値 ~EQ ~NULL ] ⇒ %O の`宣言列$を空にする ◎ If value is null, empty the declarations.
- ~ELSE ⇒ %O の`宣言列$ ~SET `~CSS宣言~blockとして構文解析する$( %値 ) ◎ Otherwise, let the declarations be the result of parse a CSS declaration block from a string value.
`~CSS宣言~block$~obj %O の作成-時には、次を走らす: ◎ When a CSS declaration block object is created, then:
- %所有者~node ~LET %O の`所有者~node$ ◎ Let owner node be the owner node.
- ~IF[ %所有者~node ~EQ ~NULL ]~OR[ %O の`算出d~flag$ ~EQ ~T ] ⇒ ~RET ◎ If owner node is null, or the computed flag is set, then return.
- %値 ~LET %所有者~node の`属性を~nsと局所~名により取得する$( ~NULL, `style^l ) ◎ Let value be the result of getting an attribute given null, "style", and owner node.
- ~IF[ %値 ~NEQ ~NULL ] ⇒ %O の`宣言列$ ~SET `~CSS宣言~blockとして構文解析する$( %値 ) ◎ If value is not null, let the declarations be the result of parse a CSS declaration block from a string value.
`~CSS宣言~block$~obj %O 用の `~style属性を更新する@ ときは、次を走らす: ◎ To update style attribute for declaration block means to run the steps below:
- ~Assert: %O の`算出d~flag$ ~EQ ~F ◎ Assert: declaration block’s computed flag is unset.
- %所有者~node ~LET %O の`所有者~node$ ◎ Let owner node be declaration block’s owner node.
- ~IF[ %所有者~node ~EQ ~NULL ] ⇒ ~RET ◎ If owner node is null, then return.
- %O の`更新-中~flag$ ~SET ~T ◎ Set declaration block’s updating flag.
- %所有者~node の`属性~値を設定する$( `style^l, `宣言列を直列化する$( %O ) ) ◎ Set an attribute value for owner node using "style" and the result of serializing declaration block.
- %O の`更新-中~flag$ ~SET ~F ◎ Unset declaration block’s updating flag.
`略式~prop$からなる~list %略式~prop~list の `選好d順@ は、次で与えられる: ◎ The preferred order of a list of shorthand properties shorthands is as follows:
- %略式~prop~list を辞書式~順序に~~整列する ◎ Order shorthands lexicographically.
- %略式~prop~list 内の ❝- から始まる~itemすべてを、それらの相対的~順序は保ったまま,~listの末尾に回す ◎ Move all items in shorthands that begin with "-" (U+002D) last in the list, retaining their relative order.
- %略式~prop~list 内の[ ❝- から始まる ]~AND[ `-webkit-^l からは始まらない ]ような~itemすべてを、それらの相対的~順序は保ったまま,~listの末尾に回す ◎ Move all items in shorthands that begin with "-" (U+002D) but do not begin with "-webkit-" last in the list, retaining their relative order.
-
%略式~prop~list を 【先行の段で末尾に回されたものは,その順位を保ちつつ?】 対応する`下位prop$の個数が多い順に並べる ◎ Order shorthands by the number of longhand properties that map to it, with the greatest number first.
【 例えば `border-style$p よりも `border$p の方が `末端の^em `下位prop$の個数が多くなるので,先に来るものと考えられる。 】
6.6.1. `CSSStyleDeclaration^I ~interface
`CSSStyleDeclaration$I ~interfaceは,下層の状態も含めた`~CSS宣言~block$を表現する。 この下層の状態は `CSSStyleDeclaration$I ~instanceの~sourceに依存する。 ◎ The CSSStyleDeclaration interface represents a CSS declaration block, including its underlying state, where this underlying state depends upon the source of the CSSStyleDeclaration instance.
[`Exposed$=Window] interface `CSSStyleDeclaration@I { [`CEReactions$] attribute `CSSOMString$ `cssText$m; ~RA `~UL$ `length$m; getter `CSSOMString$ `item$m(`~UL$ %index); `CSSOMString$ `getPropertyValue$m(`CSSOMString$ %property); `CSSOMString$ `getPropertyPriority$m(`CSSOMString$ %property); [`CEReactions$] `undefined$ `setProperty$m( `CSSOMString$ %property, [`LegacyNullToEmptyString$] `CSSOMString$ %value, optional [`LegacyNullToEmptyString$] `CSSOMString$ %priority = "" ); [`CEReactions$] `CSSOMString$ `removeProperty$m(`CSSOMString$ %property); ~RA `CSSRule$I? `parentRule$m; [`CEReactions$] attribute [`LegacyNullToEmptyString$] `CSSOMString$ `cssFloat$m; };
~objが`~supportする~prop~index$は、 0 以上[ コレの`宣言列$に含まれている`~CSS宣言$の総数 ]未満とする。 ◎ The object’s supported property indices are the numbers in the range zero to one less than the number of CSS declarations in the declarations. If there are no such CSS declarations, then there are no supported property indices.
`cssText@m 取得子~手続きは: ◎ Getting the cssText attribute must run these steps:
- ~IF[ コレの`算出d~flag$ ~EQ ~T ] ⇒ ~RET 空~文字列 ◎ If the computed flag is set, then return the empty string.
- ~RET `宣言列を直列化する$( コレ ) ◎ Return the result of serializing the declarations.
`cssText$m 設定子~手続きは: ◎ Setting the cssText attribute must run these steps:
- ~IF[ コレの`算出d~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the computed flag is set, then throw a NoModificationAllowedError exception.
- コレの`宣言列$を空にする ◎ Empty the declarations.
- %items ~LET `~CSS宣言~blockとして構文解析する$( 所与の値 ) ◎ Parse the given value and,\
- %items を`指定d順$による~listにした結果を成す ~EACH( %宣言 ) に対し ⇒ コレの`宣言列$に %宣言 を`付加する$ ◎ if the return value is not the empty list, insert the items in the list into the declarations, in specified order.
- コレ用の`~style属性を更新する$ ◎ Update style attribute for the CSS declaration block.
`getPropertyValue(property)@m ~method~手続きは: ◎ The getPropertyValue(property) method must run these steps:
-
~IF[ %property は`~custom~prop名$でない ]: ◎ If property is not a custom property, follow these substeps:
- %property ~LET `~ASCII小文字~化する$( %property ) ◎ Let property be property converted to ASCII lowercase.
-
~IF[ %property は `略式~prop$の名前である ]:
- %下位prop名~集合 ~LET %property のすべての`下位prop$の名前からなる集合
- %宣言~list ~LET[ コレの`宣言列$内の~CSS宣言のうち,[ `~prop名$ ~IN %下位prop名~集合 ]なるもの ]からなる,`正準的~順序$による~list
- ~IF[ %宣言~list の~item数 ~LT %下位prop名~集合 の~item数 ] ⇒ ~RET 空~文字列
- ~IF[ %宣言~list 内のすべての~CSS宣言の`~important~flag$は、互いに同じである ] ⇒ ~RET `下位prop~listを直列化する$( %宣言~list )
- ~RET 空~文字列
- ~IF[ コレの`宣言列$内に `~prop名$ ~EQ %property なる`~CSS宣言$がある ] ⇒ ~RET `~CSS値を直列化する$( その宣言 ) ◎ If property is a case-sensitive match for a property name of a CSS declaration in the declarations, then return the result of invoking serialize a CSS value of that declaration.
- ~RET 空~文字列 ◎ Return the empty string.
`getPropertyPriority(property)@m ~method~手続きは: ◎ The getPropertyPriority(property) method must run these steps:
-
~IF[ %property は`~custom~prop名$でない ]: ◎ If property is not a custom property, follow these substeps:
- %property ~LET `~ASCII小文字~化する$( %property ) ◎ Let property be property converted to ASCII lowercase.
-
~IF[ %property は`略式~prop$の名前である ]: ◎ If property is a shorthand property, follow these substeps:
- %property に対応する ~EACH( `下位prop$ %下位prop ) に対し ⇒ ~IF[ コレ上の `getPropertyPriority$m ~method手続き( %下位prop ) の結果 ~NEQ `important^l ] ⇒ ~RET 空~文字列 ◎ Let list be a new array. ◎ For each longhand property longhand that property maps to, append the result of invoking getPropertyPriority() with longhand as argument to list.
- ~RET `important^l ◎ If all items in list are the string "important", then return the string "important".
- ~IF[ コレの`宣言列$内に[ `~prop名$ ~EQ %property ]~AND[ `~important~flag$ ~EQ ~T ]なる`~CSS宣言$はある ] ⇒ ~RET `important^l ◎ If property is a case-sensitive match for a property name of a CSS declaration in the declarations that has the important flag set, return the string "important".
- ~RET 空~文字列 ◎ Return the empty string.
例えば
background-color:`lime^v !IMPORTANT;
に対し 返される値は `important^l になるであろう。
◎
E.g. for background-color:lime !IMPORTANT the return value would be "important".
`setProperty(property, value, priority)@m ~method~手続きは: ◎ The setProperty(property, value, priority) method must run these steps:
- ~IF[ コレの`算出d~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the computed flag is set, then throw a NoModificationAllowedError exception.
-
~IF[ %property は`~custom~prop名$でない ]: ◎ If property is not a custom property, follow these substeps:
- %property ~LET `~ASCII小文字~化する$( %property ) ◎ Let property be property converted to ASCII lowercase.
- ~IF[ %property は `~supportされる~CSS~prop$でない ] ⇒ ~RET ◎ If property is not a case-sensitive match for a supported CSS property, then return.
-
~IF[ %value ~EQ 空~文字列 ]:
- コレ上の `removeProperty$m ~method手続き( %property )
- ~RET
- ~IF[ %priority ~NIN `~ACI$ { 空~文字列, `important^l } ] ⇒ ~RET ◎ If priority is not the empty string and is not an ASCII case-insensitive match for the string "important", then return.
-
%成分値~list ~LET `~CSS値として構文解析する$( %value, %property ) ◎ Let component value list be the result of parsing value for property property.
注記: %value は `!important^l を含み得ない。 ◎ Note: value can not include "!important".
- ~IF[ %成分値~list ~EQ ~NULL ] ⇒ ~RET ◎ If component value list is null, then return.
- %~important~flag ~LET [ %priority ~NEQ 空~文字列ならば ~T / ~ELSE_ ~F ] ◎ ↓
- %更新あり ~LET ~F ◎ Let updated be false.
-
~IF[ %property はある`略式~prop$の名前である ] ⇒ %property に対応する ~EACH( `下位prop$ %下位prop ) に対し, `正準的~順序$で ⇒ %更新あり ~SET 次を走らせた結果が[ ~T ならば ~T / ~F ならば %更新あり ] ⇒ `~CSS宣言を設定する$( コレの`宣言列$, %下位prop, %成分値~list 内の %下位prop を成す部分, %~important~flag ) ◎ If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, follow these substeps: • Let longhand result be the result of set the CSS declaration longhand with the appropriate value(s) from component value list, with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations. • If longhand result is true, let updated be true.
- ~ELSE ⇒ %更新あり ~LET `~CSS宣言を設定する$( コレの`宣言列$, %property, %成分値~list, %~important~flag ) ◎ Otherwise, let updated be the result of set the CSS declaration property with value component value list, with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
- ~IF[ %更新あり ~EQ ~T ] ⇒ コレ用の`~style属性を更新する$ ◎ If updated is true, update style attribute for the CSS declaration block.
`~CSS宣言を設定する@ ときは、所与の ( %宣言~list, %~prop名, %成分値~list, %~important~flag ) に対し,[ 遂行した後に,次に挙げるすべての拘束を保持する ]ような手続きを走らすモノトスル: ◎ To set a CSS declaration property with a value component value list and optionally with an important flag set, in a list of declarations declarations, the user agent must ensure the following constraints hold after its steps:
- %宣言~list 内に次を満たす`~CSS宣言$ — 以下, %~target宣言 と記される — が正確に 1 個だけ存在する ⇒ `~prop名$ ~EQ %~prop名 ◎ Exactly one CSS declaration whose property name is a case-sensitive match of property must exist in declarations. Such declaration is referenced as the target declaration below.
- %~target宣言 の値 ~EQ %成分値~list ◎ The target declaration must have value being component value list, and\
- %~target宣言 の`~important~flag$ ~EQ %~important~flag ◎ target declaration’s important flag must be set if important flag is set, and unset otherwise.
- %宣言~list 内に在った, %~target宣言 以外の どの`~CSS宣言$も[ 変更-/挿入-/除去- ]されていない。 ◎ Any CSS declaration which is not the target declaration must not be changed, inserted, or removed from declarations.
- %宣言~list 内には、%~target宣言 より後には,次を満たす`~CSS宣言$ %宣言 は無い ⇒ [ %宣言 の`~prop名$, %~prop名 ]は、同じ`論理-~prop~group$に属するが,`対応付け~logic$は異なる ◎ If there are CSS declarations in declarations whose property name is in the same logical property group as property, but has a different mapping logic, target declaration must be at an index after all of those CSS declarations.
- 手続きは、次を返す ⇒# %宣言~list の直列化が変化したならば ~T / ~ELSE_ ~F ◎ The steps must return true if the serialization of declarations was changed as result of the steps. It may return false otherwise.
“%宣言~list の外側では,観測-可能な いかなる副作用も生じないモノトスル” の様な何かを追加するべきか? 現在の拘束は、定義されない挙動について,穴がありそうだ。 ◎ Should we add something like "Any observable side effect must not be made outside declarations"? The current constraints sound like a hole for undefined behavior.
注記: `~CSS宣言を設定する$ための【具体的な】手続きは、この~levelの~CSSOMにおいては定義されない。 ~UAは、上の拘束が保持される限り,異なる~algoを利用してもヨイ。 ◎ Note: The steps of set a CSS declaration are not defined in this level of CSSOM. User agents may use different algorithms as long as the constraints above hold.
拘束に適合する最も単純な仕方は、常に,[ %~prop名 に合致している既存の宣言があれば,それらは除去して、新たな宣言を末尾に付加する ]ものになるであろう。 が、実装~feedbackから,この~approachは処理能を~~犠牲にする見込みが高い。 ◎ The simplest way to conform with the constraints would be to always remove any existing declaration matching property, and append the new declaration to the end. But based on implementation feedback, this approach would likely regress performance.
可能な別の~algoは: ◎ Another possible algorithm is:
-
~IF[ %宣言~list 内に[ `~prop名$ ~EQ %~prop名 ]を満たす`~CSS宣言$ %~target宣言 が在る ]: ◎ If property is a case-sensitive match for a property name of a CSS declaration in declarations, follow these substeps: • Let target declaration be such CSS declaration.
- %付加する必要がある ~LET ~F ◎ Let needs append be false.
-
%宣言~list 内の %~target宣言 より後にある ~EACH( %宣言 ) に対し: ◎ For each declaration in declarations after target declaration:
- ~IF[[ %宣言 の`~prop名$, %~prop名 ]は、同じ`論理-~prop~group$に属する ] ⇒ ~CONTINUE ◎ If declaration’s property name is not in the same logical property group as property, then continue.
- ~IF[[ %宣言 の`~prop名$, %~prop名 ]の`対応付け~logic$は同じである ] ⇒ ~CONTINUE ◎ If declaration’ property name has the same mapping logic as property, then continue.
- %付加する必要がある ~LET ~T ◎ Let needs append be true.
- ~BREAK ◎ Break.
-
~IF[ %付加する必要がある ~EQ ~F ] ⇒ : ◎ If needs append is false, then:
- %更新する必要がある ~LET ~F ◎ Let needs update be false.
- ~IF[ %~target宣言 の`値$ ~NEQ %成分値~list ] ⇒ %更新する必要がある ~LET ~T ◎ If target declaration’s value is not equal to component value list, then let needs update be true.
- ~IF[ %~target宣言 の`~important~flag$ ~NEQ %~important~flag ] ⇒ %更新する必要がある ~LET ~T ◎ If target declaration’s important flag is not equal to whether important flag is set, then let needs update be true.
- ~IF[ %更新する必要がある ~EQ ~F ] ⇒ ~RET ~F ◎ If needs update is false, then return false.
- %~target宣言 の`値$ ~SET %成分値~list ◎ Set target declaration’s value to component value list.
- %~target宣言 の`~important~flag$ ~SET %~important~flag ~EQ ~T ◎ If important flag is set, then set target declaration’s important flag, otherwise unset it.
- ~RET ~T ◎ Return true.
- ~ELSE ⇒ %宣言~list から %~target宣言 を除去する ◎ Otherwise, remove target declaration from declarations.
- %宣言~list に次のようにされた新たな`~CSS宣言$を`付加する$ ⇒# `~prop名$ ~SET %~prop名, `値$ ~SET %成分値~list, `~important~flag$ ~SET %~important~flag ◎ Append a new CSS declaration with property name property, value component value list, and important flag set if important flag is set to declarations.
- ~RET ~T ◎ Return true.
`removeProperty(property)@m ~method~手続きは: ◎ The removeProperty(property) method must run these steps:
- ~IF[ コレの`算出d~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the computed flag is set, then throw a NoModificationAllowedError exception.
- ~IF[ %property は`~custom~prop名$でない ] ⇒ %property ~SET `~ASCII小文字~化する$( %property ) ◎ If property is not a custom property, let property be property converted to ASCII lowercase.
- %値 ~LET コレ上の `getPropertyValue$m ~method手続き( %property ) ◎ Let value be the return value of invoking getPropertyValue() with property as argument.
- コレの`宣言列$から[ `~prop名$ ~IN 次に与える集合 ]なる`~CSS宣言$をすべて除去する ⇒# %property は ある`略式~prop$の名前であるならば 対応する`下位prop$の集合 / ~ELSE_ %property のみからなる集合 ◎ Let removed be false. ◎ If property is a shorthand property, for each longhand property longhand that property maps to: • If longhand is not a property name of a CSS declaration in the declarations, continue. • Remove that CSS declaration and let removed be true. ◎ Otherwise, if property is a case-sensitive match for a property name of a CSS declaration in the declarations, remove that CSS declaration and let removed be true.
- ~IF[ 前~段にて除去された`~CSS宣言$はある ] ⇒ コレ用の`~style属性を更新する$ ◎ If removed is true, Update style attribute for the CSS declaration block.
- ~RET %値 ◎ Return value.
`~supportされる~CSS~prop$を成す各~prop名 %~prop名 に対しては、次の部分的~interfaceが適用される — そこでの ~camel_cased_attr は、次を走らせて得される識別子になるとする ⇒ `~IDL属性~名に変換する$( %~prop名 ) ◎ For each CSS property property that is a supported CSS property, the following partial interface applies where camel-cased attribute is obtained by running the CSS property to IDL attribute algorithm for property.
partial interface `CSSStyleDeclaration$I { [`CEReactions$] attribute [`LegacyNullToEmptyString$] `CSSOMString$ _`~camel_cased_attr$m; };
【 ~IDLにおいて名前の先頭に現れる ❝_ は、属性の識別子の一部を成さないことに注意 — それは、~escapeを指示する,~IDL構文の一部である(下に定義される部分的~interfaceも同様)。 】
`~camel_cased_attr$m 設定子~手続きは ⇒ コレ上の `setProperty$m ~method手続き( 次の結果, 所与の値 ) ( 3 個目の引数は省略する, 例外は投出し直す) ⇒ `~CSS~prop名に変換する$( この属性の名前 ) ◎ Setting the camel-cased attribute attribute must invoke setProperty() with the first argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.
例えば `font-size$p ~propに対しては, `fontSize^m ~IDL属性が在ることになる。 ◎ For example, for the font-size property there would be a fontSize IDL attribute.
`~supportされる~CSS~prop$を成す各~prop名 %~prop名 のうち,その頭部は文字列 `-webkit-^l に一致するものに対しては、次の部分的~interfaceが適用される — そこでの ~webkit_cased_attr は、次を走らせて得される識別子になるとする ⇒ `~IDL属性~名に変換する$( %~prop名, `先頭を小文字にする^i ) ◎ For each CSS property property that is a supported CSS property and that begins with the string -webkit-, the following partial interface applies where webkit-cased attribute is obtained by running the CSS property to IDL attribute algorithm for property, with the lowercase first flag set.
partial interface `CSSStyleDeclaration$I { [`CEReactions$] attribute [`LegacyNullToEmptyString$] `CSSOMString$ _`~webkit_cased_attr$m; };
`~webkit_cased_attr$m 設定子~手続きは: ⇒ コレ上の `setProperty$m ~method手続き( 次の結果, 所与の値 ) ( 3 個目の引数は省略する, 例外は投出し直す) ⇒ `~CSS~prop名に変換する$( この属性の名前, `~dashを接頭する^i ) ◎ Setting the webkit-cased attribute attribute must invoke setProperty() with the first argument being the result of running the IDL attribute to CSS property algorithm for webkit-cased attribute, with the dash prefix flag set, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.
例えば,~UAが `-webkit-transform$p ~propを~supportするならば、 `webkitTransform^m ~IDL属性が在ることになる。 `~camel_cased_attr$m 属性~用の規則により, `WebkitTransform^m ~IDL属性も在ることになる。 ◎ For example, if the user agent supports the -webkit-transform property, there would be a webkitTransform IDL attribute. There would also be a WebkitTransform IDL attribute because of the rules for camel-cased attributes.
`~supportされる~CSS~prop$を成す各~prop名 %~prop名 のうち, ❝- を含むものに対しては、次の部分的~interfaceが適用される — そこでの ~dashed_attr は %~prop名 になるとする: ◎ For each CSS property property that is a supported CSS property, except for properties that have no "-" (U+002D) in the property name, the following partial interface applies where dashed attribute is property.
partial interface `CSSStyleDeclaration$I { [`CEReactions$] attribute [`LegacyNullToEmptyString$] `CSSOMString$ _`~dashed_attr$m; };
`~dashed_attr$m 設定子~手続きは ⇒ コレ上の `setProperty$m ~method手続き( この属性の名前, 所与の値 ) ( 3 個目の引数は省略する, 例外は投出し直す) ◎ Setting the dashed attribute attribute must invoke setProperty() with the first argument being dashed attribute, as second argument the given value, and no third argument. Any exceptions thrown must be re-thrown.
例えば `font-size$p ~propに対しては、~IDL属性 `font-size^m が在ることになる。 ~JSにおいては、 %要素 を ~HTML要素 とするとき,この~propは 次の様に~accessできる: ◎ For example, for the font-size property there would be a font-size IDL attribute. In JavaScript, the property can be accessed as follows, assuming element is an HTML element:
%要素.style['font-size'];
`~IDL属性~名に変換する@ ~algoは、所与の ( %~prop名, %先頭を小文字にする~flag ~IN { `先頭を小文字にする^i, ε }(省略時は ε ) ) に対し,次に従う: ◎ The CSS property to IDL attribute algorithm for property, optionally with a lowercase first flag set, is as follows:
- %出力 ~LET 空~文字列 ◎ Let output be the empty string.
- %次回は大文字~化する ~LET ~F ◎ Let uppercase next be unset.
- ~IF[ %先頭を小文字にする~flag ~EQ `先頭を小文字にする^i ] ⇒ %~prop名 から最初の文字を除去する ◎ If the lowercase first flag is set, remove the first character from property.
-
%~prop名 を成す ~EACH( 文字 %c ) に対し: ◎ For each character c in property:
- ~IF[ %c ~EQ ❝- ] ⇒# %次回は大文字~化する ~SET ~T; ~CONTINUE ◎ If c is "-" (U+002D), let uppercase next be set.
- ~IF[ %次回は大文字~化する ~EQ ~T ] ⇒# %次回は大文字~化する ~SET ~F; %c ~SET `~ASCII大文字~化する$( %c ) ◎ Otherwise, if uppercase next is set, let uppercase next be unset and append c converted to ASCII uppercase to output.
- %出力 に %c を付加する ◎ Otherwise, append c to output.
- ~RET %出力 ◎ Return output.
`~CSS~prop名に変換する@ ~algoは、所与の ( %~IDL属性~名, %~dashを接頭する~flag ~IN { `~dashを接頭する^i, ε }(省略時は ε ) ) に対し,次に従う: ◎ The IDL attribute to CSS property algorithm for attribute, optionally with a dash prefix flag set, is as follows:
- %出力 ~LET 空~文字列 ◎ Let output be the empty string.
- ~IF[ %~dashを接頭する~flag ~EQ `~dashを接頭する^i ] ⇒ %出力 に ❝- を付加する ◎ If the dash prefix flag is set, append "-" (U+002D) to output.
-
%~IDL属性~名 を成す ~EACH( 文字 %c ) に対し: ◎ For each character c in attribute:
- ~IF[ %c ~IN { ❝A 〜 ❝Z } ] ⇒ %出力 に次を順に付加する ⇒# ❝-, `~ASCII小文字~化する$( %c ) ◎ If c is in the range U+0041 to U+005A (ASCII uppercase), append "-" (U+002D) followed by c converted to ASCII lowercase to output.
- ~ELSE ⇒ %出力 に %c を付加する ◎ Otherwise, append c to output.
- ~RET %出力 ◎ Return output.
6.7. ~CSS値
6.7.1. ~CSS値の構文解析-法
`~CSS値として構文解析する@ ときは、所与の ( %値, %~prop名 ) に対し,次を走らす: ◎ To parse a CSS value value for a given property means to follow these steps:
- %~list ~LET %値 から 成分値~listを構文解析- した結果 ◎ Let list be the value returned by invoking parse a list of component values from value.
- ~IF[ %~list は~CSS仕様の[ 名前 %~prop名 の~prop ]の文法に合致する ] ⇒ ~RET %~list ◎ Match list against the grammar for the property property in the CSS specification.
- ~RET ~NULL ◎ If the above step failed, return null. ◎ Return list.
注記: `!important^l 宣言は、~propの値~空間の一部を成さないので, `~CSS値として構文解析する$ の結果は~NULLになる。 ◎ Note: "!important" declarations are not part of the property value space and will therefore cause parse a CSS value to return null.
6.7.2. ~CSS値の直列化-法
【! `略式~prop$ %略式~prop に対応する *】 `下位prop~listを直列化する@ ときは、所与の ( `下位prop$の`~CSS宣言$からなる~list %~list ) に対し,次を走らす: ◎ To serialize a CSS value of a CSS declaration declaration or a list of longhand CSS declarations list, follow these rules: • If this algorithm is invoked with a list list:
-
~IF[ %~list の中のすべての`下位prop$に正確に対応する`略式~prop$はある ]~AND[ 該当する略式~propのうち`選好d順$で最初のもの %P は、それらの下位propの値が成す組を正確に表現できる値 %値 をとれる ] ⇒ ~RET `~CSS値を直列化する$( 次のようにされた`~CSS宣言$ ) ⇒# `~prop名$ ~SET %P, `値$ ~SET %値
◎ Let shorthand be the first shorthand property, in preferred order, that exactly maps to all of the longhand properties in list. ◎ If there is no such shorthand or shorthand cannot exactly represent the values of all the properties in list, return the empty string. ◎ Otherwise, serialize a CSS value from a hypothetical declaration of the property shorthand with its value representing the combined values of the declarations in list. - ~RET 空~文字列 ◎ ↑
【 上の~algoは,原文では次の~algoと一緒にされて定義されているが、表記上の都合により,この訳では 2 つに分割している。 】【 上の~algoも次の~algoも、[ `~important~flag$, `文字大小区別~flag$ ]については,何も言及していない(これらの~flagは、関係しないので直列化されることもない?)。 】
`~CSS値を直列化する@ ときは、所与の ( `~CSS宣言$ %宣言 ) に対し,次を走らす: ◎ ↑
- %P ~LET %宣言 の`~prop名$ ◎ ↓
-
%成分~list ~LET [ 何らかの文字列を %P の`文法に則って構文解析-$した結果に一致する, かつ 次をすべて満たす ]ような~CSS成分~値たちが成す`~list$:
- 成分~値たちは、%宣言 の`値$と同じ意味を表現する。
- 成分~値たちは、前項までの条件を満たす下で,可能な限り後方-互換である。
- 成分~値たちの順序は、前項までの条件を満たす下で,可能な限り %P の~prop定義表に与えられる正準的~順序に従う。
- 成分~値たちの個数は、前項までの条件を満たす下で,最~小である。
- 各 成分~値は、前項までの条件を満たす下で,最短な表現である。
注記: ここに述べた規則は、直列化の`一般~原則^emを要旨する。 旧来の理由から、一部の~propは異なる方式で直列化するが,ここには意図的に定義されない ` due to lack of resources. Please consult your local reverse-engineer for details.^en ◎ Note: The rules described here outlines the general principles of serialization. For legacy reasons, some properties serialize in a different manner, which is intentionally undefined here due to lack of resources. Please consult your local reverse-engineer for details.
- %結果 ~LET 空~文字列 ◎ ↓
-
%成分~list を成す ~EACH( %成分~値 ) に対し:
- ~IF[ %成分~値 は `whitespace-token$t である ] ⇒ ~CONTINUE
- ~IF[ %成分~値 ~EQ ❝, ] ⇒# %結果 に ❝, を付加する; ~CONTINUE
- ~IF[ %結果 ~NEQ 空~文字列 ] ⇒ %結果 に ~SP を付加する
- %結果 に次を付加する ⇒ `~CSS成分値を直列化する$( %成分~値 )
- ~RET %結果 ◎ ↑
`~CSS成分値を直列化する@ ときは、所与の %値 に対し,その型に応じて 次に従う: ◎ To serialize a CSS component value depends on the component, as follows:
- ~keyword値
- ~RET `~ASCII小文字~化する$( %値 ) ◎ The keyword converted to ASCII lowercase.
- `angle$t
- ~RET 次の連結 ⇒# %値 の `number^t 成分を `number^t として直列化した結果, %値 の単位を表す 当該の仕様にて定義される正準形の文字列 ◎ The <number> component serialized as per <number> followed by the unit in canonical form as defined in its respective specification.
- おそらく、[ 指定d値, 算出d値, 解決d値 ]を判別するべきである。 ◎ Probably should distinguish between specified and computed / resolved values.
- `color$t
- 【 `CSS-COLOR-4$r は、 `color^t の直列化-法を 更新して置換する。 】
-
-
~IF[ %値 は`解決d値$または`算出d値$の成分である ]: ◎ If <color> is a component of a resolved or computed value, then return the color using the rgb() or rgba() functional notation as follows:
(これは、等価な[ `rgb()^l / `rgba()^l ]関数による直列化を与える) ◎ If the alpha component of the color is equal to one, then return the serialization of the rgb() functional equivalent of the opaque color. ◎ If the alpha component of the color is not equal to one, then return the serialization of the rgba() functional equivalent of the non-opaque color. ◎ The serialization of the rgb() functional equivalent is the concatenation of the following:
- %alpha ~LET %値 が表現する色の alpha 成分
- %結果 ~LET [ %alpha ~EQ 1 (不透明)ならば `rgb(^l / ~ELSE_ `rgba(^l ] ◎ The string "rgb(". ◎ The shortest base-ten serialization of the color’s red component. ◎ The string ", ". ◎ The shortest base-ten serialization of the color’s green component. ◎ The string ", ". ◎ The shortest base-ten serialization of the color’s blue component. ◎ The string ")". ◎ The serialization of the rgba() functional equivalent is the concatenation of the following: ◎ The string "rgba(".
- %RGB ~LET %値 が表現する色の ( red, green, blue ) 成分【 0 〜 255 の整数】 を,順に 最短な基数10整数 に直列化して得られる長さ 3 の~list ◎ The shortest base-ten serialization of the color’s red component. ◎ The string ", ". ◎ The shortest base-ten serialization of the color’s green component. ◎ The string ", ". ◎ The shortest base-ten serialization of the color’s blue component.
- ~IF[ %alpha ~NEQ 1 ] ⇒ %RGB に[ %alpha を `alphavalue^t として直列化した結果 ]を付加する ◎ The string ", ". ◎ The serialization of the color’s alpha component as an <alphavalue>.
- %結果 に次を順に付加する ⇒# `~comma区切りで直列化する$( %RGB ), ❝) ◎ The string ")". ◎ In the above rules, the string ", " denotes a COMMA (U+002C) followed by a single SPACE (U+0020).
- ~RET %結果 ◎ ↑
-
~ELSE( %値 は`指定d値$の成分である): ◎ If <color> is a component of a specified value, then return the color as follows:
- ~IF[ %値 が表現する色は 作者により明示的に指定されたものである ] ⇒ ~RET 作者により指定された元の(文字列としての)色~値 ◎ If the color was explicitly specified by the author, then return the original, author specified color value.
- ~RET `算出d値$の成分であったとしたときに返されることになる値 ◎ Otherwise, return the value that would be returned if the color were a component of a computed value.
作者による`指定d値$における文字大小は、正規化すべきか? あるいは,保全されるべきか? ◎ Should author specified values be normalized for case? Or should original case be preserved?
-
- `alphavalue$t 【 `number^t に制約された `alpha-value$t 】
-
~IF[ %値 は内部的に 0 〜 255 の範囲の整数(すなわち, 8-bit 符号なし整数)として表現されている ]: ◎ If the value is internally represented as an integer between 0 and 255 inclusive (i.e. 8-bit unsigned integer), follow these steps:
- %alpha ~LET その整数 ◎ Let alpha be the given integer.
- ~IF[ 0 〜 100 の範囲の整数のうち, [[ 2.55 倍してから最も近い整数に丸めた結果(二数が等距離にある場合は切り上げる) ] ~EQ %alpha ]になるものがある ] ⇒ %rounded ~LET その整数 ÷ 100 ◎ If there exists an integer between 0 and 100 inclusive that, when multiplied with 2.55 and rounded to the closest integer (rounding up if two values are equally close), equals alpha, let rounded be that integer divided by 100.
- ~ELSE ⇒ %rounded ~LET %alpha ÷ 0.255 を最も近い整数に丸めた結果(二数が等距離にある場合は切り上げる) ÷ 1000 ◎ Otherwise, let rounded be alpha divided by 0.255 and rounded to the closest integer (rounding up if two values are equally close), divided by 1000.
- ~RET %rounded を `number^t として直列化した結果 ◎ Return the result of serializing rounded as a <number>.
~RET %値 を `number^t として直列化した結果 ◎ Otherwise, return the result of serializing the given value as a <number>.
- `counter$t
-
- %~list ~LET %値 を成す一連の~CSS成分値からなる~list ◎ ↓
- %結果 ~LET %~list 内の~item数に応じて ⇒# 3 個ならば `counters(^l / 2 個ならば `counter(^l ◎ The return value of the following algorithm: ◎ Let s be the empty string. ◎ If <counter> has three CSS component values append the string "counters(" to s. ◎ If <counter> has two CSS component values append the string "counter(" to s. ◎ Let list be a list of CSS component values belonging to <counter>,\
- ~IF[ %~list 内の最後の~item ~EQ `decimal^l ] ⇒ %~list から最後の~itemを除去する ◎ omitting the last CSS component value if it is "decimal".
- %~list ~SET %~list 内の各~itemに `~CSS成分値を直列化する$を適用して得られる同順の~list
- %結果 に次を順に付加する ⇒# `~comma区切りで直列化する$( %~list ), ❝) ◎ Let each item in list be the result of invoking serialize a CSS component value on that item. ◎ Append the result of invoking serialize a comma-separated list on list to s. ◎ Append ")" (U+0029) to s.
- ~RET %結果 ◎ Return s.
- `frequency$t
- ~RET 次の連結 ⇒# %値 の `number^t 成分を `number^t として直列化した結果, %値 の単位を表す 当該の仕様にて定義される正準形の文字列 ◎ The <number> component serialized as per <number> followed by the unit in its canonical form as defined in its respective specification.
- おそらく、[ 指定d値, 算出d値, 解決d値 ]を判別するべきである。 ◎ Probably should distinguish between specified and computed / resolved values.
- `identifier$t
- ~RET 次の結果 ⇒ `識別子を直列化する$( %値 ) ◎ The identifier serialized as an identifier.
- `integer$t
-
- %結果 ~LET [ %値 は負であるならば ❝- / ~ELSE_ 空~文字列 ]
- %結果 に次を付加する ⇒ %値 を表す ❝0 〜 ❝9 からなる最短形の基数10整数
- ~RET %結果
- `length$t
-
- ~RET 次の連結 ⇒# %値 の `number^t 成分を `number^t として直列化した結果, %値 の単位を表す 当該の仕様にて定義される正準形の文字列 ◎ The <number> component serialized as per <number> followed by the unit in its canonical form as defined in its respective specification.
- おそらく、[ 指定d値, 算出d値, 解決d値 ]を判別するべきである。 ◎ Probably should distinguish between specified and computed / resolved values.
- `number$t
-
~RET %値 を表す ❝0 〜 ❝9 からなる最短形の基数10数 — 小数部がある場合は ❝. で区切った上で、 【小数部が?】 6 桁を超えるときは値を丸め,負である場合は ❝- を前置する ◎ A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "." to separate decimals (if any), rounding the value if necessary to not produce more than 6 decimals, preceded by "-" (U+002D) if it is negative.
注記: 科学的記数法は利用されない。 ◎ Note: scientific notation is not used.
- `percentage$t
- ~RET 次の連結 ⇒# %値 の `number^t 成分を `number^t として直列化した結果, ❝% ◎ The <number> component serialized as per <number> followed by the literal string "%" (U+0025).
- `resolution$t
- ~RET 次の連結 ⇒# %値 が表現する, 1 `~CSS~pixel$あたりの~dot数による解像度を `number^t として直列化した結果, `dppx^l ◎ The resolution in dots per CSS pixel serialized as per <number> followed by the literal string "dppx".
- `ratio$t
-
~RET 次の連結
⇒#
分子成分を `number^t として直列化した結果,
` / ^l,
分母成分を `number^t として直列化した結果
◎
The numerator serialized as per <number> followed by the literal string " / ", followed by the denominator serialized as per <number>.
- `rect()$t【!`shape$t】
- ~RET 次の連結 ⇒# `rect(^l, `~comma区切りで直列化する$( %値 を成す各 ~CSS成分値に`~CSS成分値を直列化する$を適用して得られる同順の~list ), ❝) ◎ The return value of the following algorithm: • Let s be the string "rect(". • Let list be a list of the CSS component values belonging to <shape>. • Let each item in list be the result of invoking serialize a CSS component value of that item. • Append the result of invoking serialize a comma-separated list on list to s. • Append ")" (U+0029) to s. • Return s.
- `string$t
- `family-name$t
- `specific-voice$t
- ~RET `文字列を直列化する$( %値 ) ◎ The string serialized as a string.
- `time$t
- ~RET 次の連結 ⇒# [%値 が表現する秒~単位による数]を `number^t として直列化した結果, ❝s ◎ The time in seconds serialized as per <number> followed by the literal string "s".
- `url$t
- ~RET `~CSS~URLに直列化する$( %値 が与える`絶対~URL文字列$ ) ◎ The absolute-URL string serialized as URL.
- これは、指定d値, 算出d値とで違えるベキである。 `3195$issue を見よ ◎ This should differentiate specified and computed <url> values, see #3195.
`absolute-size^t, `border-width^t, `border-style^t, `bottom^t, `generic-family^t, `generic-voice^t, `left^t, `margin-width^t, `padding-width^t, `relative-size^t, `right^t, `top^t は、この仕様では~macroと見なされる。 これらはすべて上に示された成分の~instanceを表現する。 ◎ <absolute-size>, <border-width>, <border-style>, <bottom>, <generic-family>, <generic-voice>, <left>, <margin-width>, <padding-width>, <relative-size>, <right>, and <top>, are considered macros by this specification. They all represent instances of components outlined above.
この節を除去する案もある — 上の定義をその~CSS成分を定義する他のどこかの~CSS草案に移動することにより。 ◎ One idea is that we can remove this section somewhere in the CSS3/CSS4 timeline by moving the above definitions to the drafts that define the CSS components.
6.7.2.1. 用例集
ここに、指定d値に対する処理前後の結果を示す,いくつかの例を挙げる: “処理前” の列は 作者が~ssに記したものを表し, “処理後” の列は~DOMが返すことになる値を表す。 ◎ Here are some examples of before and after results on specified values. The before column could be what the author wrote in a style sheet, while the after column shows what querying the DOM would return.
処理前 ◎ Before | 処理後 ◎ After |
---|---|
`background: none^css | `background: rgba(0, 0, 0, 0)^css |
`outline: none^css | `outline: invert^css |
`border: none^css | `border: medium^css |
`list-style: none^css | `list-style: disc^css |
`margin: 0 1px 1px 1px^css | `margin: 0px 1px 1px^css |
`azimuth: behind left^css | `azimuth: 220deg^css |
`font-family: a, 'b"', serif^css | `font-family: "a", "b\"", serif^css |
`content: url('h)i') '\[\]'^css | `content: url("h)i") "[]"^css |
`azimuth: leftwards^css | `azimuth: leftwards^css |
`color: rgb(18, 52, 86)^css | `color: #123456^css |
`color: rgba(000001, 0, 0, 1)^css | `color: #000000^css |
これらの一部は新たな規則で更新される必要がある。 ◎ Some of these need to be updated per the new rules.
7. ~CSS宣言~blockへの~DOM~access
7.1. `ElementCSSInlineStyle^I ~mixin
`ElementCSSInlineStyle$I ~mixinは、要素の~inline ~style~propへの~accessを供する。 ◎ The ElementCSSInlineStyle mixin provides access to inline style properties of an element.
interface mixin `ElementCSSInlineStyle@I { [`SameObject$, `PutForwards$=cssText] ~RA `CSSStyleDeclaration$I `style$m; };
~UAが~HTMLを~supportする場合は,次の~IDLが適用される: `HTML$r ◎ If the user agent supports HTML, the following IDL applies: [HTML]
`HTMLElement$I includes `ElementCSSInlineStyle$I;
~UAが~SVGを~supportする場合は,次の~IDLが適用される: `SVG11$r ◎ If the user agent supports SVG, the following IDL applies: [SVG11]
`SVGElement$I includes `ElementCSSInlineStyle$I;
~UAが~MathMLを~supportする場合は,次の~IDLが適用される: `MathML-Core$r ◎ If the user agent supports MathML, the following IDL applies: [MathML-Core]
`MathMLElement$I includes `ElementCSSInlineStyle$I;
7.2. `Window^I ~interfaceに対する拡張
partial interface `Window$I { [`NewObject$] `CSSStyleDeclaration$I `getComputedStyle$m(`Element$I %elt, optional `CSSOMString$? %pseudoElt); };
`getComputedStyle(elt, pseudoElt)@m ~method~手続きは: ◎ The getComputedStyle(elt, pseudoElt) method must run these steps:
- %文書 ~LET コレの`~node文書$ ◎ Let doc be elt’s node document.
- %~obj ~LET %elt ◎ Let obj be elt.
-
~IF[ %pseudoElt ~NIN { ε, ~NULL, 空~文字列 } ]: ◎ If pseudoElt is provided, and it’s not the empty string, then:
- %型 ~LET %pseudoElt を `pseudo-element-selector$t の`文法に則って構文解析-$した結果 ◎ Parse pseudoElt as a <pseudo-element-selector>, and let type be the result.
- ~IF[ %型 ~EQ `失敗^i ]~OR[ %型 は[ `slotted()$pe / `part()$pe ]疑似要素である ] ⇒ ~THROW `TypeError$E ◎ If type is failure, or is an ::slotted() or ::part() pseudo-element, throw a TypeError exception.
- %~obj ~LET %型 に対応する, %elt 上の疑似要素 ◎ Otherwise let obj be the given pseudo-element of elt.
注記: CSS2 の疑似要素は、~colon 1 個だけのものにも合致するべきである。 例えば `::before^l のみならず `:before^l にも。 ◎ Note: CSS2 pseudo-elements should match both the double and single-colon versions. That is, both :before and ::before should match above.
- %宣言列 ~LET 空~list ◎ Let decls be an empty list of CSS declarations.
-
~IF[ 次がすべて満たされる ]…
- %elt は`接続されて$いる
- %elt は`平坦~tree$の一部を成す
- %elt の`~shadowも含む根$は`閲覧文脈$ %B を持つ 【根の`~node文書$が`属する閲覧文脈$ ~NEQ ~NULL 】
- %B を入子にしている`閲覧文脈~容器$は、無い, または`具現化されて$いる
…ならば:
◎ If elt is connected, part of the flat tree, and its shadow-including root has a browsing context which either doesn’t have a browsing context container, or whose browsing context container is being rendered,\- すべての[ `~supportされる~CSS~prop$である`下位prop$ ]を成す ~EACH( %~prop名 ) に対し,辞書式~順序で ⇒ %宣言列 に次のようにされた`~CSS宣言$を付加する ⇒# `~prop名$ ~SET %~prop名, `値$ ~SET %文書 に結付けられている~style規則を利用して %~obj 上の %~prop名 ~propに対し算出される`解決d値$ ◎ set decls to a list of all longhand properties that are supported CSS properties, in lexicographical order, with the value being the resolved value computed for obj using the style rules associated with doc.\
- 加えて、[ `~custom~prop$のうち[ %~obj 上の`算出d値$は、`無効が保証される値$でないもの ]を成す宣言 ]すべてを %宣言列 に付加する ◎ Additionally, append to decls all the custom properties whose computed value for obj is not the guaranteed-invalid value.
略式を取扱う~UAもあり、すべての~UAは, `overflow$p の様な以前は下位propであった略式を取扱う。 `2529$issue を見よ。 ◎ There are UAs that handle shorthands, and all UAs handle shorthands that used to be longhands like overflow, see #2529.
~custom~propの順序は、まだ定義されていない。 `4947$issue を見よ。 ◎ Order of custom properties is currently undefined, see #4947.
- ~RET 次のようにされた,~liveな`~CSS宣言~block$ ⇒# `算出d~flag$ ~SET ~T, `宣言列$ ~SET %宣言列, `親~CSS規則$ ~SET ~NULL, `所有者~node$ ~SET %~obj 【これは、疑似要素にもなり得ることになる。】 ◎ Return a live CSS declaration block with the following properties: • computed flag •• Set. • declarations •• decls. • parent CSS rule •• Null. • owner node •• obj.
`getComputedStyle()$m ~methodは、`生成元clean~flag$ss ~EQ ~F の下でも,`~CSS~ss$からの情報を公開する。 ◎ The getComputedStyle() method exposes information from CSS style sheets with the origin-clean flag unset.
`getComputedStyle()^m は、有用な直列化を供するべきか? `1033$issue を見よ。 ◎ Should getComputedStyle() provide a useful serialization? See #1033
8. ~utility~API
8.1. `CSS.escape()^m ~method
`CSS$I ~nsは、他に属さない有用な~CSSに関係する機能を保持する。 ◎ The CSS namespace holds useful CSS-related functions that do not belong elsewhere.
[`Exposed$=Window] namespace `CSS@I { `CSSOMString$ `escape$m(`CSSOMString$ %ident); };
これは、以前は,静的~methodのみを保持する~IDL~interfaceとして指定されていた。 ~IDL~nsに切り替えても,ほとんど同じになるので、互換性の懸念はないものと期待されている。 何か発見されたときは、この変更の復帰を考慮できるよう報告されたし。 ◎ This was previously specified as an IDL interface that only held static methods. Switching to an IDL namespace is *nearly* identical, so it’s expected that there won’t be any compat concerns. If any are discovered, please report so we can consider reverting this change.
`escape(ident)@m ~method~手続きは ⇒ ~RET `識別子を直列化する$( %ident ) ◎ The escape(ident) operation must return the result of invoking serialize an identifier of ident.
`escape()$m ~methodを利用して直列化すれば、~~未知な文字列でも,選択子の一部として利用できるようになる: ◎ For example, to serialize a string for use as part of a selector, the escape() method can be used:
var %element = document.querySelector( '#' + CSS.escape(%id) + ' > img' );
厳密には、~escape不要な文字まで~escapeするが: ◎ The escape() method can also be used for escaping strings, although it escapes characters that don’t strictly need to be escaped:
var %element = document.querySelector( 'a[href="#' + CSS.escape(%fragment) + '"]' );
`CSS$I ~ns上に演算を定義する仕様は、格納したい状態があるならば,`現在の大域~obj$に`結付けられている文書$に格納するべきである。 ◎ Specifications that define operations on the CSS namespace and want to store some state should store the state on the current global object’s associated Document.
9. 解決d値
`Window$I の `getComputedStyle()$m は、歴史的に,要素や`疑似要素$の “`算出d値$” を返すように定義されていた。 しかしながら,配備-済みの~scriptとの互換性のために `getComputedStyle()$m の実装は変えるわけにいかない一方で、“`算出d値$” の概念は,~CSSの改訂に伴って変化してきている。 この課題に取組むため、この仕様は `解決d値@ の概念を導入する。 ◎ getComputedStyle() was historically defined to return the "computed value" of an element or pseudo-element. However, the concept of "computed value" changed between revisions of CSS while the implementation of getComputedStyle() had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.
所与の下位prop用の`解決d値$は,~propの種類に応じて次で与えられる: ◎ The resolved value for a given longhand property can be determined as follows:
- `background-color$p
- `border-block-end-color$p
- `border-block-start-color$p
- `border-bottom-color$p
- `border-inline-end-color$p
- `border-inline-start-color$p
- `border-left-color$p
- `border-right-color$p
- `border-top-color$p
- `box-shadow$p
- `caret-color$p
- `color$p
- `outline-color$p
- 他の仕様にて[ 解決d値は `color^p の様に特別 ]と定義される~prop ◎ A resolved value special case property like color defined in another specification
- `border-block-end-color$p
- `使用~値$ ◎ The resolved value is the used value.
- `line-height$p
- `算出d値$は `normal^v ならば `normal^v / ~ELSE_ `使用~値$ ◎ The resolved value is normal if the computed value is normal, or the used value otherwise.
- `block-size$p
- `height$p
- `inline-size$p
- `margin-block-end$p
- `margin-block-start$p
- `margin-bottom$p
- `margin-inline-end$p
- `margin-inline-start$p
- `margin-left$p
- `margin-right$p
- `margin-top$p
- `padding-block-end$p
- `padding-block-start$p
- `padding-bottom$p
- `padding-inline-end$p
- `padding-inline-start$p
- `padding-left$p
- `padding-right$p
- `padding-top$p
- `width$p
- 他の仕様にて[ 解決d値は `height^p の様に特別 ]と定義される~prop ◎ A resolved value special case property like height defined in another specification
-
次のいずれも満たされるならば `使用~値$ / ~ELSE_ `算出d値$:
- ~propは 要素または`疑似要素$に適用されている
- 当の要素~上の `display$p ~propの`解決d値$ ~NIN { `none^v, `contents^v }
- `bottom$p
- `left$p
- `inset-block-end$p
- `inset-block-start$p
- `inset-inline-end$p
- `inset-inline-start$p
- `right$p
- `top$p
- 他の仕様にて[ 解決d値は `top^p の様に特別 ]と定義される~prop ◎ A resolved value special case property like top defined in another specification
-
次のいずれも満たされるならば `使用~値$ / ~ELSE_ `算出d値$:
- ~propは `有位置$な要素に適用されている
- 当の要素~上の `display$p ~propの`解決d値$ ~NIN { `none^v, `contents^v }
- ~propにより拘束され過ぎにならない
- 他の仕様にて `解決d値は特別@ と定義される~prop。 ◎ A resolved value special case property defined in another specification
- 関連な仕様により定義される。 ◎ As defined in the relevant specification.
- その他の~prop
- `算出d値$ ◎ The resolved value is the computed value.
10. IANA 考慮点
10.1. `Default-Style^h ~header~field
この節では、 Permanent Message Header Field Registry に登録するための~header~fieldについて述べる。
~header~field名 | `Default-Style@h |
---|---|
適用-可能な~protocol | http |
位置付け | 標準 |
著作者 | W3C |
変更管理者 | W3C |
仕様~文書 | この文書 |
関係する情報 | なし |
11. 変更~履歴
この節では、この仕様の各~発行版の間の変更点の一部を文書化する。 この節は,網羅的なものではない。 ~bug修正点および編集上の変更点は、一般に挙げられない。 ◎ This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are generally not listed.
- 2013年 12月 5日 以降の変更点 ◎ 11.1. Changes From 5 December 2013
- `Document$I の `styleSheets^m ~IDL属性を `DocumentOrShadowRoot$I へ移動した。 ◎ The styleSheets IDL attribute is moved from Document to DocumentOrShadowRoot.
- 代替~ss用の~API — `Document$I の次の~memberは除去した ⇒# `selectedStyleSheetSet^m, `lastStyleSheetSet^m, `preferredStyleSheetSet^m, `styleSheetSets^m, `enableStyleSheetsForSet()^m ◎ API for alternative stylesheets is removed: selectedStyleSheetSet, lastStyleSheetSet, preferredStyleSheetSet, styleSheetSets, enableStyleSheetsForSet() on Document.
- [ `Element$I / `PseudoElement^I ]~interfaceの `pseudo()^m ~methodは除去した。 【現在は `CSS Pseudo-Elements Module^cite に移動され、 `PseudoElement^I も `CSSPseudoElement$I に改称されている。】 ◎ The pseudo() method on Element and the PseudoElement interface is removed.
- `Element$I の次の属性は除去した ⇒# `cascadedStyle^m, `defaultStyle^m, `rawComputedStyle^m, `usedStyle^m ◎ The cascadedStyle, defaultStyle, rawComputedStyle and usedStyle IDL attributes on Element are removed.
- `CSSRule$I の `cssText$m1 設定子~手続きは、何もしないように変更した。 ◎ The cssText IDL attribute’s setter on CSSRule is changed to do nothing.
- `CSSStyleDeclaration$I 上に `~webkit_cased_attr$m — `webkitFoo^m の形の属性(小文字の `w^c ) — を追加した。 ◎ IDL attributes of the form webkitFoo (with lowercase w) on CSSStyleDeclaration are added.
- `CSSNamespaceRule$I は、読専に変更した。 ◎ CSSNamespaceRule is changed back to readonly.
- `CSSStyleSheet$I の `insertRule()$m1 における `charset^at の取扱いは、除去した。 ◎ Handling of @charset in insertRule() is removed.
- `CSSCharsetRule^I を再び除去した。 ◎ CSSCharsetRule is removed again.
- 識別子/文字列の直列化を変更した。 ◎ Serialization of identifiers and strings is changed.
- 選択子の直列化は、今や[ 結合子 `>>^l, `||^l ], および[ 属性~選択子における `i^l ~flag ]も~supportする。 ◎ Serialization of selectors now supports combinators ">>" and "||" and the "i" flag in attribute selectors.
- `lang()$ps の直列化を変更した。 ◎ Serialization of :lang() is changed.
- `color$t, `number$t の直列化を変更した。 ◎ Serialization of <color> and <number> is changed.
- `CSSStyleDeclaration$I の `setProperty()$m1 を変更した。 ◎ setProperty() on CSSStyleDeclaration is changed.
- `setPropertyValue()^m, `setPropertyPriority()^m は、実装からの関心の欠如に因り, `CSSStyleDeclaration$I から除去した。 ◎ setPropertyValue and setPropertyPriority are removed from CSSStyleDeclaration due to lack of interest from implementations.
- 2011年 7月 12日 から 2013年 12月 5日 までの変更点 ◎ 11.2. Changes From 12 July 2011 To 5 December 2013
- 非同一-生成元~ssの読み取りや変更は許容されない。 ◎ Cross-origin stylesheets are not allowed to be read or changed.
- `CSSCharsetRule^I ~interfaceを再び導入した。 ◎ CSSCharsetRule is re-introduced.
- `CSSGroupingRule$I, `CSSMarginRule$I を導入した。 ◎ CSSGroupingRule and CSSMarginRule are introduced.
- `CSSNamespaceRule$I は今や変異-可能である。 ◎ CSSNamespaceRule is now mutable.
- ~CSS宣言~block用に[ `~CSS宣言~blockとして構文解析する$, `宣言列を直列化する$ ]を定義した。 ◎ Parse and serialize a CSS declaration block is now defined.
- `CSSStyleDeclaration$I の[ `setProperty()$m1, `getPropertyValue()$m1, 等々 ]は、略式~propを~supportするようにした。 ◎ Shorthands are now supported in setProperty(), getPropertyValue(), et al.
- `CSSStyleDeclaration^I に[ `setPropertyValue()^m, `setPropertyPriority()^m ]を追加した。 ◎ setPropertyValue and setPropertyPriority are added to CSSStyleDeclaration.
- 各種~interfaceにおける[ `style^m, `media^m ]属性を, WebIDL 拡張属性 [`PutForwards$] 注釈付きにした。 ◎ The style and media attributes of various interfaces are annotated with the [PutForwards] WebIDL extended attribute.
- `Element^I 上に `pseudo()^m ~methodを導入した†。 ◎ The pseudo() method on Element is introduced.
- `PseudoElement^I ~interfaceを導入した†。 ◎ The PseudoElement interface is introduced.
- [ `Element$I, `PseudoElement^I ]に[ `cascadedStyle^m, `rawComputedStyle^m, `usedStyle^m ]属性を導入した†。 【†が、再び除去された(上の 2013年 12月 5日 以降の変更点を見よ)。】 ◎ The cascadedStyle, rawComputedStyle and usedStyle attributes on Element and PseudoElement are introduced.
- 静的~method `CSS.escape()$m を導入した。 ◎ The CSS.escape() static method is introduced.
謝辞
この仕様に貢献された次の方々に感謝する:
The editors would like to thank Alexey Feldgendler, Benjamin Poulain, Björn Höhrmann, Boris Zbasky, Brian Kardell, Chris Dumez, Christian Krebs, Daniel Glazman, David Baron, Domenic Denicola, Dominique Hazael-Massieux, fantasai, Hallvord R. M. Steen, Ian Hickson, John Daggett, Lachlan Hunt, Mike Sherov, Myles C. Maxfield, Morten Stenshorne, Ms2ger, Nazım Can Altınova, Øyvind Stenhaug, Peter Sloetjes, Philip Jägenstedt, Philip Taylor, Richard Gibson, Robert O’Callahan, Simon Sapin, Sjoerd Visscher, Sylvain Galineau, Tarquin Wilton-Jones, Xidorn Quan, and Zack Weinberg for contributing to this specification.
加えて、[ 代替~ss~API, ~CSS値の正準化(現在は “直列化”)規則 ]の初期~versionを書かれた `Ian Hickson^en 氏にも謝意を。 ◎ Additional thanks to Ian Hickson for writing the initial version of the alternative style sheets API and canonicalization (now serialization) rules for CSS values.