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 <ahref=#custom-property>custom properties</a>,
147
147
which are used to define <ahref=#cascading-variable>variables</a>.
148
148
149
-
<tableclass=propdef><tr><th>Name:<td><dfndata-dfn-type=propertydata-export="" id=propdef-var->var-*</dfn><tr><th>Value:<td><aclass=productiondata-link-type=typehref=#typedef-any-value><any-value></a><tr><th>Initial:<td>(nothing, see prose)<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Computed value:<td>specified value with variables substituted (but see prose for "invalid variables")<tr><th>Media:<td>all<tr><th>Animatable:<td>no</table>
149
+
<tableclass=propdef><tr><th>Name:<td><dfndata-dfn-type=propertydata-export="" id=propdef-var->var-*</dfn><tr><th>Value:<td><aclass=productiondata-link-type=typehref=#typedef-any-value><any-value></a><tr><th>Initial:<td>(nothing, see prose)<tr><th>Applies to:<td>all elements<tr><th>Inherited:<td>yes<tr><th>Media:<td>all<tr><th>Computed value:<td>specified value with variables substituted (but see prose for "invalid variables")<tr><th>Animatable:<td>no</table>
so that the part after the "var-" is an identifier by itself,
163
163
so that it can be referenced without <ahref=http://www.w3.org/TR/CSS21/syndata.html#escaped-characters>character escaping</a>.
164
164
For example, <aclass=propertydata-link-type=propdesctitle=var-0>var-0</a> needs to be referenced as <spanclass=cssdata-link-type=maybe>var(\30)</span>,
165
-
because <spanclass=cssdata-link-type=maybe>0</span> isn't a valid identifier.
165
+
because <spanclass=cssdata-link-type=maybe>0</span> isn’t a valid identifier.
166
166
(U+0030 is the hexadecimal code for the <spanclass=cssdata-link-type=maybe>0</span> character.)
<p> The <adata-link-spec=css-valueshref=http://dev.w3.org/csswg/css-values-3/#css-wide-keywords>CSS-wide keywords</a> can be used in custom properties,
211
211
with the same meaning as in any another property.
212
212
213
-
<pclass=note> Note: That is, they're interpreted at cascaded-value time as normal,
214
-
and are not preserved as the custom property's value,
213
+
<pclass=note> Note: That is, they’re interpreted at cascaded-value time as normal,
214
+
and are not preserved as the custom property’s value,
215
215
and thus are not substituted in by the corresponding variable.
<p> The primary purpose of <ahref=#custom-property>custom properties</a> is to define <ahref=#cascading-variable>cascading variables</a>.
275
275
In CSS, a <dfndata-dfn-type=dfndata-noexport="" id=cascading-variabletitle="variable|cascading variable">cascading variable</dfn> is a value that can be substituted into other properties,
276
-
allowing authors to "abstract" parts of their page's CSS out
276
+
allowing authors to "abstract" parts of their page’s CSS out
277
277
and reuse it in several places.
278
278
Every <ahref=#custom-property>custom property</a> defines a corresponding <ahref=#cascading-variable>variable</a>
Instead, the second declaration is simply thrown away as a syntax error
523
523
for having an invalid property name.
524
524
525
-
<p> Similarly, you can't build up a single token where part of it is provided by a variable:
525
+
<p> Similarly, you can’t build up a single token where part of it is provided by a variable:
526
526
527
527
<pre>.foo {
528
528
var-gap: 20;
529
529
margin-top: var(gap)px;
530
530
}
531
531
</pre>
532
532
<p> Again, this is <em>not</em> equivalent to setting <aclass=cssdata-link-type=maybehref=http://www.w3.org/TR/CSS21/box.html#propdef-margin-toptitle=margin-top>margin-top: 20px;</a> (a length).
533
-
Instead, it's equivalent to <aclass=cssdata-link-type=maybehref=http://www.w3.org/TR/CSS21/box.html#propdef-margin-toptitle=margin-top>margin-top: 20 px;</a> (a number followed by an ident),
533
+
Instead, it’s equivalent to <aclass=cssdata-link-type=maybehref=http://www.w3.org/TR/CSS21/box.html#propdef-margin-toptitle=margin-top>margin-top: 20 px;</a> (a number followed by an ident),
534
534
which is simply an invalid value for the <aclass=propertydata-link-type=propdeschref=http://www.w3.org/TR/CSS21/box.html#propdef-margin-toptitle=margin-top>margin-top</a> property.
535
535
Note, though, that <aclass=cssdata-link-type=maybehref=http://dev.w3.org/csswg/css-values-3/#calc>calc()</a> can be used to validly achieve the same thing, like so:
(the initial value for <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-backgrounds-4/#background-colortitle=background-color>background-color</a>)
560
560
instead.
561
561
562
-
<p> If the property was one that's inherited by default,
562
+
<p> If the property was one that’s inherited by default,
563
563
such as <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-color-3/#color0title=color>color</a>,
564
564
it would compute to the inherited value
565
565
rather than the initial value.
@@ -584,7 +584,7 @@ <h3 data-level=3.1 id=invalid-variables><span class=secno>3.1 </span><span class
584
584
is invalid.
585
585
When this happens,
586
586
the computed value of the property is either
587
-
the property's inherited value
587
+
the property’s inherited value
588
588
or its initial value
589
589
depending on whether the property is inherited or not, respectively.
590
590
@@ -608,9 +608,9 @@ <h3 data-level=3.1 id=invalid-variables><span class=secno>3.1 </span><span class
608
608
</div>
609
609
610
610
<pclass=note> Note: The <ahref=#invalid-at-computed-value-time>invalid at computed-value time</a> concept exists
611
-
because variables can't "fail early" like other syntax errors can,
611
+
because variables can’t "fail early" like other syntax errors can,
612
612
so by the time the user agent realizes a property value is invalid,
613
-
it's already thrown away the other cascaded values.
613
+
it’s already thrown away the other cascaded values.
0 commit comments