8000 [css-variables] Add animatable line to the propdef. · w3c/csswg-drafts@7e99616 · GitHub
Skip to content

Commit 7e99616

Browse files
tabatkinstabatkins
committed
[css-variables] Add animatable line to the propdef.
--HG-- extra : rebase_source : b090ec96929e00bd074ae2200079efe562fa8afa
1 parent c4e3f17 commit 7e99616

2 files changed

Lines changed: 31 additions & 30 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ <h2 id="contents" class="no-num no-toc no-ref">Table of contents</h2>
7474
Introduction</a><ul class="toc"><li><a href="#module-interactions"><span class="secno">1.1 </span>
7575
Module Interactions</a></li><li><a href="#values"><span class="secno">1.2 </span>
7676
Values</a></li></ul></li><li><a href="#defining-variables"><span class="secno">2 </span>
77-
Defining Custom Properties: the <span data-autolink="property" class="property" title="var-*">var-*</span> family of properties</a></li><li><a href="#using-variables"><span class="secno">3 </span>
78-
Using Cascading Variables: the <span data-autolink="maybe" class="css">var()</span> notation</a><ul class="toc"><li><a href="#invalid-variables"><span class="secno">3.1 </span>
77+
Defining Custom Properties: the <span data-autolink="property" href="#var-" class="property" title="var-*">var-*</span> family of properties</a></li><li><a href="#using-variables"><span class="secno">3 </span>
78+
Using Cascading Variables: the <span data-autolink="maybe" href="#variable-type" class="css">var()</span> notation</a><ul class="toc"><li><a href="#invalid-variables"><span class="secno">3.1 </span>
7979
Invalid Variables</a></li></ul></li><li><a href="#cssom"><span class="secno">4 </span>
8080
APIs</a><ul class="toc"><li><a href="#the-cssstyledeclaration-interface"><span class="secno">4.1 </span>
8181
Extensions to the <code>CSSStyleDeclaration</code> Interface</a><ul class="toc"><li><a href="#serializing-custom-props"><span class="secno">4.1.1 </span>
@@ -149,7 +149,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
149149
<p> This specification defines an open-ended set of properties called <a data-autolink="link" href="#custom-property">custom properties</a>,
150150
which are used to define <a data-autolink="link" href="#cascading-variable">variables</a>.
151151

152-
</p><table class="propdef"><tbody><tr><th>Name:</th><td><dfn id="var-">var-*</dfn></td></tr><tr><th>Values:</th><td>[ <a data-autolink="link" class="production" href="#value-production"><var>&lt;value&gt;</var></a> | <a data-autolink="link" class="production" href="#cdo-production"><var>&lt;CDO&gt;</var></a> | <a data-autolink="link" class="production" href="#cdc-production"><var>&lt;CDC&gt;</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></tbody></table>
152+
</p><table class="propdef"><tbody><tr><th>Name:</th><td><dfn id="var-">var-*</dfn></td></tr><tr><th>Values:</th><td>[ <a data-autolink="link" class="production" href="#value-production"><var>&lt;value&gt;</var></a> | <a data-autolink="link" class="production" href="#cdo-production"><var>&lt;CDO&gt;</var></a> | <a data-autolink="link" class="production" href="#cdc-production"><var>&lt;CDC&gt;</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>
153153
<p> A <dfn id="custom-property">custom property</dfn> is any property
154154
whose name starts with "var-",
155155
and contains at least one additional character.
@@ -159,9 +159,9 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
159159
</p><p class="note"> Note: Authors are recommended to choose custom property names
160160
so that the part after the "var-" is an identifier by itself,
161161
so that it can be referenced without <a href="http://www.w3.org/TR/CSS21/syndata.html#escaped-characters">character escaping</a>.
162-
For example, <a data-autolink="property" class="property" title="var-0">var-0</a> needs to be referenced as <a data-autolink="maybe" class="css">var(\30)</a>,
163-
because <a data-autolink="maybe" class="css">0</a> isn't a valid identifier.
164-
(U+0030 is the hexadecimal code for the <a data-autolink="maybe" class="css">0</a> character.)
162+
For example, <a data-autolink="property" class="property" title="var-0">var-0</a> needs to be referenced as <span data-autolink="maybe" class="css">var(\30)</span>,
163+
because <span data-autolink="maybe" class="css">0</span> isn't a valid identifier.
164+
(U+0030 is the hexadecimal code for the <span data-autolink="maybe" class="css">0</span> character.)
165165

166166
</p><div class="example">
167167
Custom properties define variables,
@@ -193,13 +193,13 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
193193
The "var-" prefix <strong>must</strong> be written in lower-case.
194194

195195
</p><div class="example">
196-
For example, <a data-autolink="maybe" class="css">VAR-FOO</a> is invalid,
196+
For example, <span data-autolink="maybe" class="css">VAR-FOO</span> is invalid,
197197
because the prefix isn't "var-".
198198

199-
<p> While both <a data-autolink="maybe" class="css">var-foo</a> and <a data-autolink="maybe" class="css">var-FOO</a> are valid,
199+
<p> While both <span data-autolink="maybe" class="css">var-foo</span> and <span data-autolink="maybe" class="css">var-FOO</span> are valid,
200200
they are distinct properties -
201-
using <a data-autolink="maybe" class="css">var(foo)</a> will refer to the first one,
202-
while using <a data-autolink="maybe" class="css">var(FOO)</a> will refer to the second.
201+
using <span data-autolink="maybe" class="css">var(foo)</span> will refer to the first one,
202+
while using <span data-autolink="maybe" class="css">var(FOO)</span> will refer to the second.
203203
</p></div>
204204

205205
<p> <a data-autolink="link" href="#custom-property">Custom properties</a> are extremely permissive in their value,
@@ -211,7 +211,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
211211
from the same chapter.
212212

213213
</p><p class="note">
214-
Custom properties can contain a trailing <a data-autolink="maybe" class="css">!important</a>,
214+
Custom properties can contain a trailing <span data-autolink="maybe" class="css">!important</span>,
215215
but this is automatically removed from the property's value by the CSS parser,
216216
and makes the custom property "important" in the CSS cascade.
217217

@@ -244,7 +244,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
244244
and reuse it in several places.
245245
Every <a data-autolink="link" href="#custom-property">custom property</a> defines a corresponding <a data-autolink="link" href="#cascading-variable">variable</a>
246246
with the same name, minus the "var-" prefix.
247-
For example, the custom property <a data-autolink="property" class="property" title="var-foo">var-foo</a> defines a variable named <a data-autolink="maybe" class="css">foo</a>.
247+
For example, the custom property <a data-autolink="property" class="property" title="var-foo">var-foo</a> defines a variable named <span data-autolink="maybe" class="css">foo</span>.
248248
See the next chapter for details on how to use variables.
249249

250250
</p><p class="note"> Note: <a data-autolink="link" href="#custom-property">Custom properties</a> can be put to several other uses, of course.
@@ -269,17 +269,17 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
269269

270270
</p><pre>h1 { background-color: var(header-color); }
271271
</pre>
272-
<p> The preceding rule is equivalent to writing <a data-autolink="maybe" class="css">background-color: #06c;</a>,
272+
<p> The preceding rule is equivalent to writing <span data-autolink="maybe" class="css">background-color: #06c;</span>,
273273
except that the variable name makes the origin of the color clearer,
274-
and if <a data-autolink="maybe" class="css">var(header-color)</a> is used on other elements in the document,
274+
and if <span data-autolink="maybe" class="css">var(header-color)</span> is used on other elements in the document,
275275
all of the uses can be updated at once
276276
by changing the <a data-autolink="property" class="property" title="var-header-color">var-header-color</a> property on the root element.
277277
</p></div>
278278

279279
<p> Custom properties are ordinary properties,
280280
so they can be declared on any element,
281281
are resolved with the normal inheritance and cascade rules,
282-
can be made conditional with <a data-autolink="maybe" class="css">@media</a> and other conditional rules,
282+
can be made conditional with <span data-autolink="maybe" class="css">@media</span> and other conditional rules,
283283
can be used in HTML's <code>style</code> attribute,
284284
can be read or set using the CSSOM, etc..
285285

@@ -316,7 +316,7 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
316316
}
317317
</pre>
318318
<p> The <a data-autolink="property" class="property" title="var-accent-background">var-accent-background</a> property
319-
(along with any other properties that use <a data-autolink="maybe" class="css">var(main-color)</a>)
319+
(along with any other properties that use <span data-autolink="maybe" class="css">var(main-color)</span>)
320320
will automatically update when the <a data-autolink="property" class="property" title="var-main-color">var-main-color</a> property is changed.
321321
</p></div>
322322

@@ -352,17 +352,17 @@ <h2 id="introduction" data-level="1"><span class="secno">1 </span>
352352
</pre>
353353
<p> The &lt;one&gt; element defines a value for <a data-autolink="property" class="property" title="var-foo">var-foo</a>.
354354
The &lt;two&gt; element inherits this value,
355-
and additionally assigns a value to <a data-autolink="property" class="property" title="var-bar">var-bar</a> using the <a data-autolink="maybe" class="css">foo</a> variable.
355+
and additionally assigns a value to <a data-autolink="property" class="property" title="var-bar">var-bar</a> using the <span data-autolink="maybe" class="css">foo</span> variable.
356356
Finally,
357357
the &lt;three&gt; element inherits the <a data-autolink="property" class="property" title="var-bar">var-bar</a> value
358358
<em>after</em> variable substitution
359-
(in other words, it sees the value <a data-autolink="maybe" class="css">calc(10px + 10px)</a>),
359+
(in other words, it sees the value <span data-autolink="maybe" class="css">calc(10px + 10px)</span>),
360360
and then redefines <a data-autolink="property" class="property" title="var-foo">var-foo</a> in terms of that value.
361361
Since the value it inherited for <a data-autolink="property" class="property" title="var-bar">var-bar</a> no longer contains a reference to the <a data-autolink="property" class="property" title="var-foo">var-foo</a> property defined on &lt;one&gt;,
362-
defining <a data-autolink="property" class="property" title="var-foo">var-foo</a> using the <a data-autolink="maybe" class="css">var(bar)</a> variable is not cyclic,
362+
defining <a data-autolink="property" class="property" title="var-foo">var-foo</a> using the <span data-autolink="maybe" class="css">var(bar)</span> variable is not cyclic,
363363
and actually defines a value that will eventually
364364
(when referenced as a variable in a normal property)
365-
resolve to <a data-autolink="maybe" class="css">30px</a>.
365+
resolve to <span data-autolink="maybe" class="css">30px</span>.
366366
</p></div>
367367

368368

@@ -418,7 +418,7 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
418418
because they'd close the function early).
419419

420420
</p><p class="note"> Note: The syntax of <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a>, like that of <a data-autolink="link" href="#custom-property">custom properties</a>, allows commas.
421-
For example, a variable use like <a data-autolink="maybe" class="css">var(foo, red, blue)</a> defines a fallback of <a data-autolink="maybe" class="css">red, blue</a>;
421+
For example, a variable use like <span data-autolink="maybe" class="css">var(foo, red, blue)</span> defines a fallback of <span data-autolink="maybe" class="css">red, blue</span>;
422422
that is, anything between the first comma and the end of the function is considered a <a data-autolink="link" class="production" href="#fallback-type"><var>&lt;fallback&gt;</var></a> value.
423423

424424
</p><p> A property value containing a variable must be assumed to be valid at parse time.
@@ -484,7 +484,7 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
484484
var(side): 20px;
485485
}
486486
</pre>
487-
<p> This is <em>not</em> equivalent to setting <a data-autolink="maybe" class="css">margin-top: 20px;</a>.
487+
<p> This is <em>not</em> equivalent to setting <span data-autolink="maybe" class="css">margin-top: 20px;</span>.
488488
Instead, the second declaration is simply thrown away as a syntax error
489489
for having an invalid property name.
490490

@@ -495,10 +495,10 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
495495
margin-top: var(gap)px;
496496
}
497497
</pre>
498-
<p> Again, this is <em>not</em> equivalent to setting <a data-autolink="maybe" class="css">margin-top: 20px;</a> (a length).
499-
Instead, it's equivalent to <a data-autolink="maybe" class="css">margin-top: 20 px;</a> (a number followed by an ident),
498+
<p> Again, this is <em>not</em> equivalent to setting <span data-autolink="maybe" class="css">margin-top: 20px;</span> (a length).
499+
Instead, it's equivalent to <span data-autolink="maybe" class="css">margin-top: 20 px;</span> (a number followed by an ident),
500500
which is simply an invalid value for the <a data-autolink="property" class="property" title="margin-top">margin-top</a> property.
501-
Note, though, that <a data-autolink="maybe" class="css">calc()</a> can be used to validly achieve the same thing, like so:
501+
Note, though, that <span data-autolink="maybe" class="css">calc()</span> can be used to validly achieve the same thing, like so:
502502

503503
</p><pre>.foo {
504504
var-gap: 20;
@@ -520,8 +520,8 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
520520
<pre>:root { var-looks-valid: 20px; }
521521
p { background-color: var(looks-valid); }
522522
</pre>
523-
<p> Since <a data-autolink="maybe" class="css">20px</a> is an invalid value for <a data-autolink="property" class="property" title="background-color">background-color</a>,
524-
this instance of the property computes to <a data-autolink="maybe" class="css">transparent</a>
523+
<p> Since <span data-autolink="maybe" class="css">20px</span> is an invalid value for <a data-autolink="property" class="property" title="background-color">background-color</a>,
524+
this instance of the property computes to <span data-autolink="maybe" class="css">transparent</span>
525525
(the initial value for <a data-autolink="property" class="property" title="background-color">background-color</a>)
526526
instead.
527527

@@ -577,10 +577,10 @@ <h2 id="using-variables" data-level="3"><span class="secno">3 </span>
577577
The same would happen if the variable itself was invalid.
578578

579579
</p><p> Note the difference between this
580-
and what happens if the author had just written <a data-autolink="maybe" class="css">background-color: 20px</a> directly in their stylesheet -
580+
and what happens if the author had just written <span data-autolink="maybe" class="css">background-color: 20px</span> directly in their stylesheet -
581581
that would be a normal syntax error,
582582
which would cause the rule to be discarded,
583-
so the <a data-autolink="maybe" class="css">background-color: red</a> rule would be used instead.
583+
so the <span data-autolink="maybe" class="css">background-color: red</span> rule would be used instead.
584584
</p></div>
585585

586586
<p class="note"> Note: The <a data-autolink="link" href="#invalid-at-computed-value-time">invalid at computed-value time</a> concept exis E95A ts
@@ -918,7 +918,7 @@ <h2 id="index" class="no-num no-ref">
918918

919919
<h2 id="property-index" class="no-num no-ref">
920920
Property index</h2>
921-
<div data-fill-with="property-index"><table class="proptable"><thead><tr><th scope="col">Name</th><th scope="col">Values</th><th scope="col">Initial</th><th scope="col">Applies To</th><th scope="col">Inh.</th><th scope="col">%ages</th><th scope="col">Media</th><th scope="col">Computed Value</th></tr><tr><th scope="row"><a data-property="" data-autolink="link" href="#var-">var-*</a></th><td>[ <a data-autolink="link" class="production" href="#value-production"><var>&lt;value&gt;</var></a> | <a data-autolink="link" class="production" href="#cdo-production"><var>&lt;CDO&gt;</var></a> | <a data-autolink="link" class="production" href="#cdc-production"><var>&lt;CDC&gt;</var></a> ]+</td><td>(nothing, see prose)</td><td>all elements</td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td></tr></thead></table></div>
921+
<div data-fill-with="property-index"><table class="proptable"><thead><tr><th scope="col">Name</th><th scope="col">Value</th><th scope="col">Initial</th><th scope="col">Applies To</th><th scope="col">Inh.</th><th scope="col">%ages</th><th scope="col">Media</th><th scope="col">Computed Value</th><th scope="col">Animatable</th><th scope="col">Values</th></tr><tr><th scope="row"><a data-property="">var-*</a></th><td></td><td>(nothing, see prose)</td><td>all elements</td><td>yes</td><td></td><td>all</td><td>specified value with variables substituted (but see prose for "invalid variables")</td><td>no</td><td>[ <a data-autolink="link" class="production"><var>&lt;value&gt;</var></a> | <a data-autolink="link" class="production"><var>&lt;CDO&gt;</var></a> | <a data-autolink="link" class="production"><var>&lt;CDC&gt;</var></a> ]+</td></tr></thead></table></div>
922922

923923

924924
</body></html>

‎css-variables/Overview.src.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ <h2 id='defining-variables'>
7676
Inherited: yes
7777
Computed Value: specified value with variables substituted (but see prose for "invalid variables")
7878
Media: all
79+
Animatable: no
7980
</xmp>
8081

8182
A <dfn>custom property</dfn> is any property

0 commit comments

Comments
 (0)