You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p> This specification defines an open-ended set of properties called <adata-autolink="link" href="#custom-property">custom properties</a>,
150
150
which are used to define <adata-autolink="link" href="#cascading-variable">variables</a>.
151
151
152
-
</p><tableclass="propdef"><tbody><tr><th>Name:</th><td><dfnid="var-">var-*</dfn></td></tr><tr><th>Value:</th><td>[ <adata-autolink="link" class="production" href="#value-production"><var><value></var></a> | <adata-autolink="link" class="production"href="#cdo-production"><var><CDO></var></a> | <adata-autolink="link" class="production" href="#cdc-production"><var><CDC></var></a> ]+</td></tr><tr><th>Initial:</th><td>(nothing, see prose)</td></tr><tr><th>Applies to:</th><td>all elements</td></tr><tr><th>Inherited:</th><td>yes</td></tr><tr><th>Computed value:</th><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr><tr><th>Media:</th><td>all</td></tr><tr><th>Animatable:</th><td>no</td></tr></tbody></table>
152
+
</p><tableclass="propdef"><tbody><tr><th>Name:</th><td><dfnid="var-">var-*</dfn></td></tr><tr><th>Value:</th><td><adata-autolink="link" class="production" href="#any-value-production"><var><any-value></var></a></td></tr><tr><th>Initial:</th><td>(nothing, see prose)</td></tr><tr><th>Applies to:</th><td>all elements</td></tr><tr><th>Inherited:</th><td>yes</td></tr><tr><th>Computed value:</th><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr><tr><th>Media:</th><td>all</td></tr><tr><th>Animatable:</th><td>no</td></tr></tbody></table>
unmatched <<)>>, <<]>>, or <<}>>,
230
+
or top-level <adata-autolink="link" class="production"><var><semicolon></var></a> tokens.
231
+
232
+
</p><pclass="note"> Note: This definition,
233
+
along with the general CSS syntax rules,
234
+
imply that a custom property value never includes an unmatched quote or bracket,
235
+
and so cannot have any effect on larger syntax constructs,
236
+
like the enclosing style rule,
237
+
when reserialized.
238
+
239
+
</p><pclass="note"> Note: Custom properties can contain a trailing <spandata-autolink="maybe" class="css">!important</span>,
240
+
but this is automatically removed from the property's value by the CSS parser,
241
+
and makes the custom property "important" in the CSS cascade.
242
+
243
+
</p><pclass="note"> Note: While <adata-autolink="link" class="production" href="#any-value-production"><var><any-value></var></a> must represent at least one token,
244
+
that one token may be whitespace.
245
+
This implies that <spandata-autolink="maybe" class="css">var-foo: ;</span> is valid,
246
+
and the corresponding <spandata-autolink="maybe" class="css">var(foo)</span> call would have a single space as its substitution value,
247
+
but <spandata-autolink="maybe" class="css">var-foo:;</span> is invalid.
236
248
237
249
</p><divclass="example">
238
250
For example, the following is a valid custom property:
or else a value whose meaning has no connection to the variable.)
432
443
433
-
</p><p> The <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a> value is identical to the syntax of a <adata-autolink="link" href="#custom-property">custom property</a> value:
434
-
it accepts anything allowed by the core syntax of CSS
435
-
(except that, since it's a value in a function rather than a value in a declaration,
436
-
some tokens that were allowed in a <adata-autolink="link" href="#custom-property">custom property</a> don't work in a <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a> and vice versa,
437
-
because they'd close the function early).
444
+
</p><p> The second argument to the function, if provided,
445
+
is a fallback value,
446
+
which is used as the substitution value when the referenced variable is invalid.
438
447
439
-
</p><pclass="note"> Note: The syntax of <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a>, like that of <adata-autolink="link" href="#custom-property">custom properties</a>, allows commas.
440
-
For example, a variable use like <spandata-autolink="maybe" class="css">var(foo, red, blue)</span> defines a fallback of <spandata-autolink="maybe" class="css">red, blue</span>;
441
-
that is, anything between the first comma and the end of the function is considered a <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a> value.
448
+
</p><pclass="note"> Note: The syntax of the fallback, like that of <adata-autolink="link" href="#custom-property">custom properties</a>, allows commas.
449
+
For example, <spandata-autolink="maybe" class="css">var(foo, red, blue)</span> defines a fallback of <spandata-autolink="maybe" class="css">red, blue</span>;
450
+
that is, anything between the first comma and the end of the function is considered a fallback value.
442
451
443
452
</p><p> A property value containing a variable must be assumed to be valid at parse time.
replace the <adata-autolink="maybe" class="css" href="#variable-type">var()</a> function by the value of the corresponding <adata-autolink="link" href="#custom-property">custom property</a>.
453
462
454
463
</li><li>
455
-
Otherwise, if the <adata-autolink="maybe" class="css" href="#variable-type">var()</a> function has a <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a> value as its second argument,
456
-
replace the <adata-autolink="maybe" class="css" href="#variable-type">var()</a> function by the <adata-autolink="link" class="production" href="#fallback-type"><var><fallback></var></a> value.
464
+
Otherwise, if the <adata-autolink="maybe" class="css" href="#variable-type">var()</a> function has a fallback value as its second argument,
465
+
replace the <adata-autolink="maybe" class="css" href="#variable-type">var()</a> function by the fallback value.
457
466
If there are any <adata-autolink="maybe" class="css" href="#variable-type">var()</a> references in the fallback,
458
467
<atitle="resolve a variable" data-autolink="link" href="#resolve-a-variable">resolve</a> them as well.
<divdata-fill-with="normative-references"><dl><dtid="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <ahref="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <ahref="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd><dtid="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <ahref="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <ahref="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a></dd></dl></div>
937
+
<divdata-fill-with="normative-references"><dl><dtid="css21" title="CSS21">[CSS21]</dt><dd>Bert Bos; et al. <ahref="http://www.w3.org/TR/2011/REC-CSS2-20110607/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <ahref="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a></dd><dtid="rfc2119" title="RFC2119">[RFC2119]</dt><dd>S. Bradner. <ahref="http://www.ietf.org/rfc/rfc2119.txt">Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <ahref="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd></dl></div>
929
938
930
939
<h3id="informative" class="no-num no-ref">
931
940
Informative References</h3>
932
941
<divdata-fill-with="informative-references"><dl><dtid="css3color" title="CSS3COLOR">[CSS3COLOR]</dt><dd>Tantek Çelik; Chris Lilley; L. David Baron. <ahref="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <ahref="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd></dl></div>
<divdata-fill-with="property-index"><tableclass="proptable"><thead><tr><thscope="col">Name</th><thscope="col">Value</th><thscope="col">Initial</th><thscope="col">Applies To</th><thscope="col">Inh.</th><thscope="col">%ages</th><thscope="col">Media</th><thscope="col">Computed value</th><thscope="col">Applies to</th><thscope="col">Animatable</th></tr><tr><thscope="row"><adata-property="">var-*</a></th><td>[ <adata-autolink="link" class="production"><var><value></var></a> | <adata-autolink="link" class="production"><var><CDO></var></a> | <adata-autolink="link" class="production"><var><CDC></var></a> ]+</td><td>(nothing, see prose)</td><td></td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td><td>all elements</td><td>no</td></tr></thead></table></div>
949
+
<divdata-fill-with="property-index"><tableclass="proptable"><thead><tr><thscope="col">Name</th><thscope="col">Value</th><thscope="col">Initial</th><thscope="col">Applies To</th><thscope="col">Inh.</th><thscope="col">%ages</th><thscope="col">Media</th><thscope="col">Computed value</th><thscope="col">Applies to</th><thscope="col">Animatable</th></tr><tr><thscope="row"><adata-property="">var-*</a></th><td><adata-autolink="link" class="production"><var><any-value></var></a></td><td>(nothing, see prose)</td><td></td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td><td>all elements</td><td>no</td></tr></thead></table></div>
0 commit comments