1. 序論
~CSSは、~web文書の[ ~layout, 塗り, 挙動 ]を改変するために操作できる~propたちが成す,包括的な集合を定義している。 しかしながら、~web作者が,この集合に~propを追加して拡張したいと望むこともよくある。 ◎ CSS defines a comprehensive set of properties that can be manipulated in order to modify the layout, paint, or behaviour of a web document. However, web authors frequently wish to extend this set with additional properties.
`css-variables$r は、作者が制御する~propを定義するための基礎的な手段を供しているが、これらの~propは、常に~token~listを値にとり, 常に継承され~MUST。 加えて、それが影響0し得るのは,文書の~layoutや塗りに限られる — `var^f 参照を介して他の~propの値を組入れることにより。 ◎ [css-variables] provides primitive means for defining user-controlled properties, however these properties always take token lists as values, must always inherit, and can only impact document layout or paint by being re-incorporated into the value of other properties via a var() reference.
この仕様は、 `css-variables$r を拡張し,[ 値~型, 初期~値, 定義-済みの継承の挙動 ]を備える~propを登録できるようにする。 ◎ This specification extends [css-variables], allowing the registration of properties that have a value type, an initial value, and a defined inheritance behaviour.
この仕様は[ `css-paint-api$r / `css-layout-api$r ]を補うものであり、~custom~propが[ 塗り/~layout ]の挙動に直に影響0できるようにする。 ◎ This specification is complementary to [css-paint-api] and [css-layout-api], which allow custom properties to directly impact paint and layout behaviours respectively.
2. ~custom~propの登録-法
dictionary `PropertyDescriptor@I { required `DOMString$ `name$m; `DOMString$ `syntax$m = "*"; required `boolean$ `inherits$m; `DOMString$ `initialValue$m; }; partial namespace `CSS$I { void `registerProperty$m(`PropertyDescriptor$I %descriptor); };
各 `Document$I ~objは、 `registeredPropertySet@sl 内部~slotを追加で持つ — それは、登録-済みの~custom~propについて述べる~recordたちが成す集合を~~保持する。 ◎ Additional, the Document object gains a new [[registeredPropertySet]] private slot, which is a set of records that describe registered custom properties.
2.1. `PropertyDescriptor^I 辞書
`PropertyDescriptor$I 辞書は、作者が指定した[ ~custom~prop用の環境設定~options ]を表現する — それは、次の~memberからなる: ◎ A PropertyDescriptor dictionary represents author-specified configuration options for a custom property. PropertyDescriptor dictionaries contain the following members:
- `name@m ◎ name, of type DOMString
- 定義する~custom~propの名前を与える。 ◎ The name of the custom property being defined.
- `syntax@m ◎ syntax, of type DOMString, defaulting to "*"
- この~custom~propをどう構文解析するかを表現する文字列を与える。 ◎ A string representing how this custom property is parsed.
- `inherits@m ◎ inherits, of type boolean
- この~custom~propは[ 継承するべきならば ~T / 他の場合は ~F ]。 ◎ True if this custom property should inherit down the DOM tree; False otherwise.
- `initialValue@m ◎ initialValue, of type DOMString
- この~custom~propの初期~値を与える。 ◎ The initial value of this custom property.
2.2. `registerProperty()^m ~method
- `registerProperty(descriptor)@m
- %descriptor に供された環境設定~optionsに則って~custom~propを登録する。 ◎ The registerProperty(PropertyDescriptor descriptor) method registers a custom property according to the configuration options provided in descriptor.\
- 被呼出時には、次を実行し~MUST ⇒ `~custom~propを登録する$( %descriptor の `name$m ~memberの値, %descriptor の `syntax$m ~memberの値, %descriptor の `inherits$m ~memberの値, %descriptor の `initialValue$m ~memberの値 ) ◎ When it is called, it executes the register a custom property algorithm, passing the options in its descriptor argument as arguments of the same names.
以下において `構文解析を試みる@ 所では、所与の ( %文字列, %構文 ) に対し,次を走らすとする:
- ~IF[ %文字列 は %構文 に合致しない ] ⇒ ~THROW `SyntaxError$E
- ~RET %文字列 を %構文 に則って構文解析した結果
`~custom~propを登録する@ ときは、所与の ( 文字列 %名前, 文字列 %構文, 真偽値 %継承する, 文字列 %初期~値 ) に対し,次の手続きを実行する: ◎ To register a custom property with name being a string, and optionally syntax being a string, inherits being a boolean, and initialValue being a string, execute these steps:
- %~prop集合 ~LET `現在の大域~obj$に`結付けられている文書$の `registeredPropertySet$sl ~slot値 ◎ Let property set be the value of the current global object’s associated Document’s [[registeredPropertySet]] slot.
- %解析済み名 ~LET `構文解析を試みる$( %名前, `custom-property-name$t ) ◎ Attempt to parse name as a <custom-property-name>. If this fails, throw a SyntaxError and exit this algorithm. ◎ Otherwise, let parsed name be the parsed value.
- ~IF[ %~prop集合 内に[ ~prop名 ~EQ %解析済み名 ]なる~recordは在る ] ⇒ ~THROW `InvalidModificationError$E ◎ If property set already contains an entry with parsed name as its property name (compared codepoint-wise), throw an InvalidModificationError and exit this algorithm.
- ~IF[ %構文 ~IN { ε, `*^l ( U+002A ASTERISK ) } ] ⇒ %解析済み構文 ~LET ε ◎ If syntax is not present, or is equal to "*" (U+002A ASTERISK), let parsed syntax be undefined, and skip to the next step of this algorithm.
-
~ELSE ⇒ %解析済み構文 ~LET `構文解析を試みる$( %構文, §~supportされる構文~文字列に与える規則 ) ◎ Otherwise, attempt to parse syntax according to the rules in §2.3 Supported syntax strings. If it does not parse successfully, throw a SyntaxError. Otherwise, let parsed syntax be the parsed syntax.
注記: 例えば、妥当な構文~文字列は `<length>^l や `<number>+^l の様な何かであり,許容される構文は CSS Values 3 §2 値~定義~構文 の下位集合である。 この仕様の将来~levelでは、[ ~CSS~propが許容する全部的な構文を,より近く真似る~custom~prop ]も許容するように,許容される構文~文字列の複雑さを拡げるものと期待されている。 ◎ Note: For example, a valid syntax string is something like "<length>", or "<number>+"; the allowed syntax is a subset of CSS Values 3 §2 Value Definition Syntax. Future levels of this specification are expected to expand the complexity of allowed syntax strings, allowing custom properties that more closely resemble the full breadth of what CSS properties allow.
-
~IF[ %解析済み構文 ~EQ ε ]:
- ~IF[ %初期~値 ~EQ ε ] ⇒ %解析済み初期~値 ~LET 空 — これは[ `css-variables$r に定義される~custom~propの “既定の” 初期~値 ]として扱われ~MUST。 ◎ If parsed syntax is undefined, and initialValue is not present, let parsed initial value be empty. This must be treated identically to the "default" initial value of custom properties, as defined in [css-variables]. Skip to the next step of this algorithm.
- ~ELSE ⇒ %解析済み初期~値 ~LET `構文解析を試みる$( %初期~値, `declaration-value$t ) ◎ Otherwise, if parsed syntax is undefined, parse initialValue as a <declaration-value>. If this fails, throw a SyntaxError and exit this algorithm. Otherwise, let parsed initial value be the parsed result. Skip to the next step of this algorithm.
- ~ELIF[ %初期~値 ~EQ ε ] ⇒ ~THROW `SyntaxError$E ◎ Otherwise, if initialValue is not present, throw a SyntaxError and exit this algorithm.
-
~ELSE:
- %解析済み初期~値 ~LET `構文解析を試みる$( %初期~値, %解析済み構文 ) ◎ Otherwise, parse initialValue according to parsed syntax. If this fails, throw a SyntaxError and exit this algorithm.
- ~IF[ %解析済み初期~値 は`独立に算出-可能$でない ] ⇒ ~THROW `SyntaxError$E ◎ Otherwise, let parsed initial value be the parsed result. If parsed initial value is not computationally independent, throw a SyntaxError and exit this algorithm.
- %~prop集合 に次のようにされた~recordを追加する ⇒# ~prop名 ~SET %解析済み名, 構文 ~SET %解析済み構文, 初期~値 ~SET %解析済み初期~値, 継承-~flag ~SET %継承する ◎ Set inherit flag to the value of inherits. ◎ Let registered property be a record with a property name of parsed name, a syntax of parsed syntax, an initial value of parsed initial value, and an inherit flag of inherit flag. Add registered property to property set.
~prop値は、次に挙げるもののみを利用して算出d値に変換できるならば `独立に算出-可能@ とされる ⇒# 要素~上の~propの値, ~CSSにより変更し得ない “大域的な” 情報 ◎ A property value is computationally independent if it can be converted into a computed value using only the value of the property on the element, and "global" information that cannot be changed by CSS.
例えば `5px^v は、`独立に算出-可能$になる — それを算出d値に変換した結果は ~~元のままなので。 同様に,`1in^v も、`独立に算出-可能$になる — 算出d値に変換するときには,[ `1in^v は `96px^v である ]という “大域的な知識” のみに依拠し、~CSSにおける何ものも,それを[ 改める/調整する ]ことはないので。 ◎ For example, 5px is computationally independent, as converting it into a computed value doesn’t change it at all. Similarly, 1in is computationally independent, as converting it into a computed value relies only on the "global knowledge" that 1in is 96px, which can’t be altered or adjusted by anything in CSS.
他方 `3em^v は`独立に算出-可能$でない — それは、要素(または要素の親)上の `font-size$p 値に依拠するので。 `var$f 関数を伴う値も`~custom~prop$の値に依拠するので~~同様になる。 ◎ On the other hand, 3em is not computationally independent, because it relies on the value of font-size on the element (or the element’s parent). Neither is a value with a var() function, because it relies on the value of a custom property.
所与の型を伴う~custom~propが登録されたとき、その~prop用の指定d値を算出d値に転換する処理-は,選定された型により全部的に定義される — §算出d値の計算 にて述べるように。 ◎ When a custom property is registered with a given type, the process via which specified values for that property are turned into computed values is defined fully by the type selected, as described in §2.4 Calculation of Computed Values.
注記: 将来には、~propを未登録にする仕方も追加され得る。 ◎ Note: A way to unregister properties may be added in the future.
~custom~propの登録は、いかなる仕方でも,`~cascade$に影響しては~MUST_NOT。 登録された~prop用に指定した構文を問わず、`~custom~prop$は,構文解析-時点では 通常通りほぼ何でも受容するように構文解析される。 しかしながら,登録された`~custom~prop$に対する`指定d値$が 登録した構文に違反する場合、~propは`算出d値の時点で無効$になる(したがって,登録した初期~値に設定し直される)。 ◎ Registering a custom property must not affect the cascade in any way. Regardless of what syntax is specified for a registered property, at parse time it is still parsed as normal for a custom property, accepting nearly anything. If the specified value for a registered custom property violates the registered syntax, however, the property becomes invalid at computed-value time (and thus resets to the registered initial value).
既定では、一連の~token並びとして構文解析できる どの~custom~prop宣言も妥当になる。 よって,次の~stylesheetによる結果は: ◎ By default, all custom property declarations that can be parsed as a sequence of tokens are valid. Hence, the result of this stylesheet:
.thing { --my-color: green; --my-color: url("not-a-color"); color: var(--my-color); }
`class^a `thing^l を伴う要素の `color$p ~propは、 `inherit$v に設定される — 2 個目の `--my-color^p 宣言は 構文解析-時に 1 個目のものを上書きし(両者とも妥当である)、 `color$p ~prop内の `var$f 参照は `算出d値の時点で無効$と見出されるので( `url("not-a-color")^v は `color$t でないので)。 ~CSS~pipelineのこの段階(算出d値の時点)で可用な~fallbackは,~propの初期~値しかなく、 `color$p の事例では `inherit$v になる。 利用-可能な妥当な値は他にもあるが( `green^v )、 `url^f がより~~優先されるので,構文解析-時に除去される。 ◎ is to set the color property of elements of class "thing" to inherit. The second --my-color declaration overrides the first at parse time (both are valid), and the var() reference in the color property is found to be invalid at computed-value time (because url("not-a-color") is not a color). At this stage of the CSS pipeline (computation time), the only available fallback is the initial value of the property, which in the case of color is inherit. Although there was a valid usable value (green), this was removed during parsing because it was superseded by the URL.
次を~callした場合: ◎ If we call:
CSS.registerProperty({ name: "--my-color", syntax: "<color>", initialValue: "black", inherits: false });
この登録が上の~stylesheetを構文解析する前, 後どちらに生じようが、構文解析が有意に変化することはない。 登録が生じたときの,唯一の相違は: 代わりに `--my-color^p ~propが`算出d値の時点で無効$になり、その初期~値 `black$v に設定される。 それから、 `color$p が妥当に `black$v に設定される — `算出d値の時点で無効$にされ, `inherit$v になるのではなく。 ◎ the parsing doesn’t significantly change, regardless of whether the registration occurs before or after the stylesheet above. The only difference is that it’s the --my-color property that becomes invalid at computed-value time instead and gets set to its initial value of black; then color is validly set to black, rather than being invalid at computed-value time and becoming inherit.
2.3. ~supportされる構文~文字列
以下に挙げる構文~文字列が~supportされる: ◎ The following syntax strings are supported:
- ~primitive項 ◎ Primitive Terms
-
次に挙げる構文~文字列は、~primitive項であり、その下に述べるように組合せれる: ◎ The following syntax strings are primitive terms that can be combined as described below:
- `<length>^l
- `length$t 値 ◎ Any valid <length> value
- `<number>^l
- `number$t 値 ◎ <number> values
- `<percentage>^l
- `percentage$t 値 ◎ Any valid <percentage> value
- `<length-percentage>^l
- `length$t 値 ◎ Any valid <length>\
- `percentage$t 値 ◎ or <percentage> value,\
- `length$t, `percentage$t 成分の組合せからなる `calc()$t 式 【`~math関数$? 】 ◎ any valid <calc()> expression combining <length> and <percentage> components.
- `<color>^l
- `color$t 値 ◎ Any valid <color> value
- `<image>^l
- `image$t 値 ◎ Any valid <image> value
- `<url>^l
- `url$t 値 ◎ Any valid <url> value
- `<integer>^l
- `integer$t 値 ◎ Any valid <integer> value
- `<angle>^l
- `angle$t 値 ◎ Any valid <angle> value
- `<time>^l
- `time$t 値 ◎ Any valid <time> value
- `<resolution>^l
- `resolution$t 値 ◎ Any valid <resolution> value
- `<transform-function>^l
- `transform-function$t 値 ◎ Any valid <transform-function> value
- `<custom-ident>^l
- `custom-ident$t 値 ◎ Any valid <custom-ident> value
- `custom-ident$t 生成規則に合致する, かつ[ `名前開始~符号位置$, 0 個~以上の`名前~符号位置$ ]並びが成すもの ◎ Any sequence consisting of a name-start code point, followed by zero or more name code points, which matches the <custom-ident> production
- その並びで与えられる識別子 ◎ That identifier
- 注記: `custom-ident$t は、符号位置ごとに比較される。 これは、~UA定義な~CSSにおける通常の挙動( ~ASCIIに制限され, `~ASCII大小無視$で比較される)と異なる。 なので, `Red^c の様な `ident^t を指定した場合、値 `Red^v は受容されるが, `red^v, `RED^v は合致しない。 ~CSS表記規約に合致するためには、 `ident^t は~ASCIIのみに制約した上で,小文字で記すことが推奨される。 ◎ Note: <custom-ident>s are compared codepoint-wise with each other; this is different than the normal behavior of UA-defined CSS which limits itself to ASCII and is ASCII case-insensitive. So, specifying an ident like Red means that the precise value Red is accepted; red, RED, and any other casing variants are not matched by this. It is recommended that idents be restricted to ASCII and written in lower-case, to match CSS conventions.
- `<transform-list>^l
- `transform-function$t 値たちからなる~list。 これは、 `<transform-function>+^l に等価な便利用~生成規則である。 ◎ A list of valid <transform-function> values. This is a convenience production which is equivalent to "<transform-function>+"
- いずれかの~primitive項に `+^l を付加して得られる文字列 ◎ Any primitive term followed by '+'
- 1 個~以上の[ その項が指定する型の値 ]が成す,~space区切りの~list。 `<transform-list>^l は すでに~space区切りの~listなので、 `<transform-list>+^l は 妥当でないことに注意。 ◎ A space-separated list of one or more repetitions of the type specified by the string. Note: Since <transform-list> is already a space separated list, <transform-list>+ is invalid.
- いずれかの~primitive項に `#^l を付加して得られる文字列 ◎ Any primitive term followed by '#'
- 1 個~以上の[ その項が指定する型の値 ]が成す,~comma区切りの~list。 ◎ A comma-separated list of one or more repetitions of the type specified by the string.
- いくつかの項からなる任意の組合せを `|^l で区切って得られる文字列 ◎ Any combination of terms separated by '|'
- 組合せを成すある~~項に合致する値 — 指定された順序で【先頭に近い項ほど~~優先される】。 ◎ Any value that matches one of the items in the combination, matched in specified order.
- 注記: すなわち,構文~文字列 `red | <color>^l が与えられた下では、[ 値 `red$v と照合したときには,識別子として構文解析する ]ことになる一方,[ 値 `blue$v と照合したときには, `color$t として構文解析する ]ことになる。 ◎ Note: That is, given the syntax string "red | <color>", matching the value red against it will parse as an identifier, while matching the value blue will parse as a <color>.
- `*^l
- 妥当な任意の~token~stream ◎ Any valid token stream
注記: `css3-values$r は、長さのみを受容する~propと, 長さ, 百分率とも受容する~propとの区別を保守する。 しかしながら,この区別は、現時点では生成規則と綺麗に揃っていない。 それを受け,この区別を綺麗に指定する目的で、この仕様は `length-percentage^t 生成規則を導入する。 ◎ Note: [css3-values] maintains a distinction between properties that accept only a length, and properties that accept both a length and a percentage, however the distinction doesn’t currently cleanly line up with the productions. Accordingly, this specification introduces the length-percentage production for the purpose of cleanly specifying this distinction.
指定された構文に関わらず,すべての~custom~propは、`~CSS全域~keyword$( `revert$v も含む)を受容して,それらの値を適切に処理することになる。 ◎ Regardless of the syntax specified, all custom properties will accept CSS-wide keywords as well as revert, and process these values appropriately.
注記: このことは、 `PropertyDescriptor$I 辞書の `initialValue$m ~memberには適用されない。 ◎ Note: This does not apply to the initialValue member of the PropertyDescriptor dictionary.
例えば,次のものは、どれも妥当な構文~文字列になる: ◎ For example, the following are all valid syntax strings.
- `<length>^l
- 長さ値を受容する ◎ accepts length values
- `<length> | <percentage>^l
- [ 長さ / 百分率/ 百分率を与える~calc式 / 長さを与える~calc式 ]値を受容するが、[ 長さ値, 百分率~値 ]の組合せを包含している~calc式は受容しない。 ◎ accepts lengths, percentages, percentage calc expressions, and length calc expressions, but not calc expressions containing a combination of length and percentage values.
- `<length-percentage>^l
- [ `<length> | <percentage>^l ]が受容するすべての値, および 長さ値と百分率~値の組合せを包含している~calc式を受容する。 ◎ accepts all values that "<length> | <percentage>" would accept, as well as calc expressions containing a combination of both length and percentage values.
- `big | bigger | BIGGER^l
- [ `big^v, `bigger^v, `BIGGER^v ](いずれも `ident^t )を受容する。 ◎ accepts the ident "big", or the ident "bigger", or the ident "BIGGER".
- `<length>+^l
- 1 個~以上の長さ値が成す,~space区切りの~listを受容する。 ◎ accepts a space-separated list of length values.
2.4. 算出d値の計算
~custom~propの構文は、その~prop用に[ 指定d値から算出d値を生成する方法 ]を全部的に決定する。 ◎ The syntax of a custom property fully determines how computed values are generated from specified values for that property.
`~CSS全域~keyword$( `revert$v も含む)が生成する算出d値は、 `css3-values$r, `css-cascade-4$r に従う。 他の場合: ◎ The CSS-wide keywords and revert generate computed values as described in [css3-values] and [css-cascade-4] respectively. Otherwise:
- `length^t 値~用の算出d値は、 `px^css 単位による絶対~長さになる。 ◎ For <length> values, the computed value is the absolute length expressed in pixels.
-
`length-percentage^t 値~用の算出d値は、次のいずれかになる: ◎ For <length-percentage> values, the computed value is one of the following:
- 指定d値は長さ単位のみ包含する場合 ⇒ 算出d値は `px^css 単位による絶対~長さになる。 ◎ if the specified value contains only length units, the computed value is the absolute length expressed in pixels.
- 指定d値は百分率のみを包含する場合 ⇒ 算出d値は単純な百分率になる。 ◎ if the specified value contains only percentages, the computed value is a simple percentage.
- 他の場合 ⇒ 算出d値は[ `px^css 単位による絶対~長さ, 百分率~値 ]を包含している `calc^f 式になる。 ◎ otherwise, the computed value is a calc expression containing an absolute length expressed in pixels, and a percentage value.
- [ `custom-ident^t / `ident^t / `color^t / `integer^t / `angle^t / `time^t / `resolution^t / `*^l ]値~用の算出d値は、指定d値になる。 ◎ For <custom-ident>, ident, <color>, <integer>, <angle>, <time>, <resolution> or "*" values, the computed value is as specified.
-
`url^t 値~用の算出d値は、次のいずれかになる: ◎ For <url> values, the computed value is one of the following:
- ~URLは相対~URLである場合、算出d値は `css3-values$r に従って絶対~URLに解決される。 ◎ if the URL is a relative URL, the computed value is the resolved absolute URL as described in [css3-values].
- 他の場合、算出d値は指定d値になる。 ◎ otherwise, the computed value is as specified.
`image^t 値~用の算出d値は、値~内に現れる すべての[ 相対~URLは `css3-values$r に従って絶対~URLに解決される/ 長さは算出d値に解決される ]ことを除いて,指定d値になる。 ◎ For <image> values, the computed value is as specified, except that relative URLs that appear in the value are resolved to absolute URLs as described in [css3-values], and all lengths are resolved to their computed values.
- ~calc式でない[ `number^t / `percentage^t ]値~用の算出d値は、指定d値になる。 ~calc式を与える[ `number^t / `percentage^t ]値は、算出の間に単純な[ 実数/百分率 ]に簡約される。 ◎ For <number> and <percentage> values which are not calc expressions, the computed value is as specified. Calc expressions that are <number> and <percentage> values get reduced during computation to simple numbers and percentages respectively.
- `transform-function^t 値~用の算出d値は、( `transform-list^t 内に包含されたものも含め,)指定d値を成すすべての長さ値をそれぞれの算出d値に解決した結果になる。 ◎ For <transform-function> values (including those contained in <transform-list> values), the computed value is as specified but with all lengths resolved to their computed values.
- [[ `|^l で区切られた何~項かからなる構文~文字列 ]により指定される値 ]用の算出d値は、[ 指定d値に合致する最初の~~項 ]用の計算~規則を適用した結果になる。 ◎ For values specified by a syntax string that include "|" clauses, the computed value is given by applying the calculation rules for the first clause that matches to the specified value.
- ~list値~用の算出d値は、~listを成す各~項を算出d値に~~置換した結果になる。 ◎ For list values, the computed value is a list of the computed values of the primitives in the list.
2.5. 登録された~propと `supports^at
登録されていない~custom~propは、 `supports$at を介して試験されるときには “常に妥当” になる — `@supports (--foo: red) {...}^css の様な規則を評価した結果は、~custom~prop用の(ごく寛容な)構文に違反しない限り,常に真になる。 ◎ Unregistered custom properties are “always valid” when tested via @supports; a rule like `@supports (--foo: red) {...}` is always true so long as you don’t violate the (very liberal) syntax for custom properties.
~custom~propを登録しても、これが変化することはない。 例えば,ある~custom~propが `syntax: "<color>"^c で登録されたとしても、 `@supports (--foo: 1em) {...}^css の様な規則は,依然として真に評価され, その~styleは適用される。 ◎ Registering a custom property does not change this. Even if a custom property is, for example, registered with `syntax: " "`, a rule like `@supports (--foo: 1em) {...}` will still evaluate as true and apply those styles.
注記: これは、登録された~custom~propを構文解析するときの挙動に合致する。 構文に `<color>^l を指定して登録された~custom~prop `--foo^p が, `--foo: 1em;^css と記されたとしても、構文解析-時には,依然として妥当として受容されることになる — が、自動的に`算出d値の時点で無効$になる。 `supports$at は構文解析-時の挙動を試験するので、登録した構文を問わず,すべての値を妥当として受容する。 ◎ Note: This matches the parsing behavior of registered custom properties. A registered custom property specified as `" "` but written as `--foo: 1em;` will still be accepted as valid at parse-time, but be automatically invalid at computed-value time. As @supports tests parse behavior, it thus also accepts all values as valid regardless of the registered syntax.
2.6. 相対~単位を介する循環依存
登録された~custom~propは、循環依存の解決にあたり,登録されていない~custom~propと同じ規則に従うが、以下に挙げる追加の拘束も~~課される: ◎ Registered custom properties follow the same rules for dependency cycle resolution as unregistered custom properties, with the following additional constraints:
登録された~custom~propのうち、構文~成分に[ `length$t / `length-percentage$t ]を伴うものは: ◎ For any registered custom property with a <length> or <length-percentage> syntax component:
- ~propは[ `em$u / `ex$u / `cap$u / `ch$u / `ic$u / `lh$u ]単位を包含する場合 ⇒ ~propと現在の要素の `font-size$p ~propとの間を辺で結ぶ。 ◎ If the property contains any of the following units: em, ex, cap, ch, ic, lh; then add an edge between the property and the font-size of the current element.
- ~propは `lh$u 単位を包含する場合 ⇒ ~propと現在の要素の `line-height$p ~propとの間を辺で結ぶ。 ◎ If the property contains the lh unit, add an edge between the property and the line-height of the current element.
- ~propは[ `rem$u / `rlh$u ]単位を包含する場合 ⇒ ~propと根~要素の `font-size$p ~propとの間を辺で結ぶ。 ◎ If the property contains any of the following units: rem, rlh; then add an edge between the property and the font-size' of the root element.
- ~propは `rlh$u 単位を包含する場合 ⇒ ~propと根~要素の `line-height$p ~propとの間を辺で結ぶ。 ◎ If the property contains the rlh unit, add an edge between the property and the line-height' of the root element.
例えば,次の登録が与えられたとする: ◎ For example, given this registration:
CSS.registerProperty({ name: "--my-font-size", syntax: "<length>", initialValue: "0px", inherits: false });
次の~styleは、循環依存を生産することになる: ◎ the following will produce a dependency cycle:
div { --my-font-size: 10em; font-size: var(--my-font-size); }
`font-size^p は、値 `unset$v が指定されていたかのように挙動することになる。 ◎ and font-size will behave as if the value unset was specified.
3. ~custom~propの挙動
3.1. ~animationにおける~custom~propの挙動
注記: [ `css3-animations$r / `css3-transitions$r ]に定義されるように,~custom~propを参照する[ ~animation / 遷移 ]を指定することも可能である。 ◎ Note: As defined by [css3-animations] and [css3-transitions], it is possible to specify animations and transitions that reference custom properties.
[ ~animation/遷移 ]から参照される~custom~propは、その型に定義される方式で補間される。 その型が `+^css を伴う~listとして定義されている場合、単純~listとして補間される。 `css3-transitions$r ◎ When referenced by animations and transitions, custom properties interpolate in a manner defined by their types. If their type is defined as a list with "+", it’s interpolated as a simple list [css3-transitions].
補間の始値と終値の型が合致する場合、それらは `css3-animations$r に指定されるように補間される。 他の場合、補間は既定の[ 50% の所で切り替わるふるまい ]に~fall-backする。 `css3-animations$r ◎ If the start and end of an interpolation have matching types, then they will interpolate as specified in [css3-animations]. Otherwise, the interpolation falls back to the default 50% flip described in [css3-animations].
~custom~prop上の~animationにより補間された中間~結果は、その値を表現している~token~streamを生成-可能で~MUST。 相互運用性の課題を避けるため、これが各 実装~間で標準になることを確保するべきである。 ◎ Intermediate interpolated results of animations on custom properties must be able to generate a token stream representing their value. We should ensure that this is standard across implementations to avoid interop issues.
3.2. 条件付き規則
[ `supports$at 規則 / `supports()$m ~method ]の挙動は `css-variables$r に指定される。 ◎ @supports rules and the supports(conditionText) method behave as specified in [css-variables].
注記: 言い換えれば、所与の~custom~propが値を~supportするかどうか決定する目的においては、 ~custom~prop用に登録した型は無視され, 1 個~以上の~tokenからなるどの値も妥当と見なされる。 ◎ Note: In other words, for the purpose of determining whether a value is supported by a given custom property, the type registered for the custom property is ignored and any value consisting of at least one token is considered valid.
`supports^at 規則は、~custom~propに対しては,その型も~~考慮に入れるべきか? `118$issue ◎ should @supports pay attention to type when considering custom properties? <https://github.com/w3c/css-houdini-drafts/issues/118>
3.3. 相対~URL
登録された~custom~prop内に現れる相対~URL値は、 `css3-values$r に従って全部的~URLに解決される。 ◎ Relative URL values that appear in registered custom properties are resolved to full URLs as described in [css3-values].
~URLは,それが現れる~stylesheetの基底~URLに対して解決されるので、複数の相対~URLが異なる基底~URLに対して解決される結果になり得る — それらが同じ【名前の】~prop内に現れようが。 ◎ Because URLs resolve against the base URL of the stylesheet they appear in, we can end up with multiple relative URLs that resolve against different base URLs, even though they appear in the same property.
例えば `--url-foo^p, `--url-bar^p は、ともに,構文に `url$t を与えて登録された~custom~propとする。 ある~stylesheetが `/style/foo/foo.css^c にあって: ◎ For example, suppose --url-foo and --url-bar are registered custom properties with <url> syntax, and that we have a stylesheet at /style/foo/foo.css:
div { --url-foo: url("foo.png"); }
別の~stylesheetが `/style/bar/bar.css^c にあって: ◎ and another stylesheet at /style/bar/bar.css
div { --url-bar: url("bar.png"); }
文書は, `/index.html^c にあるとする: ◎ and finally a document at /index.html:
<link href="/style/foo/foo.css" rel="stylesheet" type="text/css"> <link href="/style/bar/bar.css" rel="stylesheet" type="text/css"> <div style="background-image: var(--url-foo), var(---url-bar);"> </div>
ここでは、[ `var(--url-foo)^v / `var(--url-bar)^v ]参照は[ `/style/foo^c / `/style/bar^c ]に対して解決される~URLを生産することになる。 ◎ Here, the var(--url-foo) reference would produce a URL that resolves against /style/foo, and the var(--url-bar) reference would produce a URL that resolves against /style/bar.
4. 例
4.1. ~custom~propを用いて~animationにおける挙動を追加する例
<script> CSS.registerProperty({ name: "--stop-color", syntax: "<color>", inherits: false, initialValue: "rgba(0,0,0,0)" }); </script> <style> .button { --stop-color: red; background: linear-gradient(var(--stop-color), black); transition: --stop-color 1s; } .button:hover { --stop-color: green; } </style>
5. ~securityの考慮点
この仕様に与える特色機能により導入される,既知の~security上の課題は無い。 ◎ There are no known security issues introduced by these features.
6. ~privacyの考慮点
この仕様に与える特色機能により導入される,既知の~privacy上の課題は無い。 ◎ There are no known privacy issues introduced by these features.