8000 [css-variables] bikeshed · w3c/csswg-drafts@a9579e9 · GitHub
Skip to content

Commit a9579e9

Browse files
tabatkinstabatkins
committed
[css-variables] bikeshed
1 parent 4a59632 commit a9579e9

1 file changed

Lines changed: 14 additions & 14 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -146,13 +146,13 @@ <h2 class="heading settled heading" data-level=2 id=defining-variables><span cla
146146
<p> This specification defines an open-ended set of properties called <a href=#custom-property>custom properties</a>,
147147
which are used to define <a href=#cascading-variable>variables</a>.
148148

149-
<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-var->var-*<a class=self-link href=#></a></dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</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>
149+
<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-var->var-*<a class=self-link href=#propdef-var-></a></dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</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>
150150
<p class=issue id=issue-8897284a><a class=self-link href=#issue-8897284a></a>
151151
Should variables have special animation behavior,
152152
such that they just never animate,
153153
not even with the "just flip at 50% progress" like everything else?
154154

155-
<p> A <dfn data-dfn-type=dfn data-noexport="" id=custom-property>custom property<a class=self-link href=#></a></dfn> is any property
155+
<p> A <dfn data-dfn-type=dfn data-noexport="" id=custom-property>custom property<a class=self-link href=#custom-property></a></dfn> is any property
156156
whose name starts with "var-",
157157
and contains at least one additional character.
158158
<a href=#custom-property>Custom properties</a> are solely for use by authors and users;
@@ -218,7 +218,7 @@ <h3 class="heading settled heading" data-level=2.1 id=syntax><span class=secno>2
218218
Custom Property Value Syntax</span><a class=self-link href=#syntax></a></h3>
219219

220220
<p> The allowed syntax for <a href=#custom-property>custom properties</a> is extremely permissive.
221-
The <dfn data-dfn-type=type data-export="" id=typedef-any-value>&lt;any-value&gt;<a class=self-link href=#></a></dfn> production matches <em>any</em> sequence of one or more tokens,
221+
The <dfn data-dfn-type=type data-export="" id=typedef-any-value>&lt;any-value&gt;<a class=self-link href=#typedef-any-value></a></dfn> production matches <em>any</em> sequence of one or more tokens,
222222
so long as the sequence does not contain
223223
<a data-link-type=token href=http://dev.w3.org/csswg/css-syntax-3/#tokendef-bad-string>〈bad-string〉</a>,
224224
<a data-link-type=token href=http://dev.w3.org/csswg/css-syntax-3/#tokendef-bad-url>〈bad-url〉</a>,
@@ -272,7 +272,7 @@ <h3 class="heading settled heading" data-level=2.2 id=using><span class=secno>2.
272272
Using Custom Properties</span><a class=self-link href=#using></a></h3>
273273

274274
<p> The primary purpose of <a href=#custom-property>custom properties</a> is to define <a href=#cascading-variable>cascading variables</a>.
275-
In CSS, a <dfn data-dfn-type=dfn data-noexport="" id=cascading-variable title="variable|cascading variable">cascading variable<a class=self-link href=#></a></dfn> is a value that can be substituted into other properties,
275+
In CSS, a <dfn data-dfn-type=dfn data-noexport="" id=cascading-variable title="variable|cascading variable">cascading variable<a class=self-link href=#cascading-variable></a></dfn> is a value that can be substituted into other properties,
276276
allowing authors to "abstract" parts of their page’s CSS out
277277
and reuse it in several places.
278278
Every <a href=#custom-property>custom property</a> defines a corresponding <a href=#cascading-variable>variable</a>
@@ -436,7 +436,7 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class=
436436
which can then be substituted into another property with the <a class=css data-link-type=maybe href=#funcdef-var>var()</a> function.
437437
The syntax of <a class=css data-link-type=maybe href=#funcdef-var>var()</a> is:
438438

439-
<pre class=prod><dfn data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#></a></dfn> = var( <a class=production data-link-type=type>&lt;ident&gt;</a> [, <a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</a> ]? )
439+
<pre class=prod><dfn data-dfn-type=function data-export="" id=funcdef-var>var()<a class=self-link href=#funcdef-var></a></dfn> = var( <a class=production data-link-type=type>&lt;ident&gt;</a> [, <a class=production data-link-type=type href=#typedef-any-value>&lt;any-value&gt;</a> ]? )
440440
</pre>
441441
<p> A variable can be used in place of any part of a value in any property on an element.
442442
Variables can not be used as
@@ -459,7 +459,7 @@ <h2 class="heading settled heading" data-level=3 id=using-variables><span class=
459459
It is only syntax-checked at computed-value time,
460460
after variable references have been <a href=#resolve-a-variable title="resolve a variable">resolved</a>.
461461

462-
<p> To <dfn data-dfn-type=dfn data-noexport="" id=resolve-a-variable>resolve a variable<a class=self-link href=#></a></dfn> in a property’s value:
462+
<p> To <dfn data-dfn-type=dfn data-noexport="" id=resolve-a-variable>resolve a variable<a class=self-link href=#resolve-a-variable></a></dfn> in a property’s value:
463463

464464
<ol>
465465
<li>
@@ -571,12 +571,12 @@ <h3 class="heading settled heading" data-level=3.1 id=invalid-variables><span cl
571571

572572
<p> When a <a href=#custom-property>custom property</a> has its initial value,
573573
the <a href=#cascading-variable>variable</a> it defines
574-
represents an <dfn data-dfn-type=dfn data-noexport="" id=invalid-variable>invalid variable<a class=self-link href=#></a></dfn>.
574+
represents an <dfn data-dfn-type=dfn data-noexport="" id=invalid-variable>invalid variable<a class=self-link href=#invalid-variable></a></dfn>.
575575
Using an <a href=#invalid-variable>invalid variable</a> in a property value
576576
(including other <a href=#custom-property>custom properties</a>)
577577
makes the declaration <a href=#invalid-at-computed-value-time>invalid at computed-value time</a>.
578578

579-
<p> A declaration can be <dfn data-dfn-type=dfn data-noexport="" id=invalid-at-computed-value-time>invalid at computed-value time<a class=self-link href=#></a></dfn>
579+
<p> A declaration can be <dfn data-dfn-type=dfn data-noexport="" id=invalid-at-computed-value-time>invalid at computed-value time<a class=self-link href=#invalid-at-computed-value-time></a></dfn>
580580
if it uses an invalid <a href=#cascading-variable>variable</a>, as explained above,
581581
or if it uses a valid <a href=#cascading-variable>variable</a>,
582582
but the property value,
@@ -638,13 +638,13 @@ <h2 class="heading settled heading" data-level=4 id=cssom><span class=secno>4 </
638638
<h3 class="heading settled heading" data-level=4.1 id=the-cssstyledeclaration-interface><span class=secno>4.1 </span><span class=content>
639639
Extensions to the <code>CSSStyleDeclaration</code> Interface</span><a class=self-link href=#the-cssstyledeclaration-interface></a></h3>
640640

641-
<p> The <dfn data-dfn-type=dfn data-noexport="" id=cssstyledeclaration><code>CSSStyleDeclaration</code><a class=self-link href=#></a></dfn> interface is amended as follows:
641+
<p> The <dfn data-dfn-type=dfn data-noexport="" id=cssstyledeclaration><code>CSSStyleDeclaration</code><a class=self-link href=#cssstyledeclaration></a></dfn> interface is amended as follows:
642642

643643
<pre class=idl>partial interface CSSStyleDeclaration {
644644
readonly attribute CSSVariablesMap var;
645645
}
646646
</pre>
647-
<p> A <code>CSSStyleDeclaration</code> is the <dfn data-dfn-type=dfn data-noexport="" id=associated-style-declaration>associated style declaration<a class=self-link href=#></a></dfn>
647+
<p> A <code>CSSStyleDeclaration</code> is the <dfn data-dfn-type=dfn data-noexport="" id=associated-style-declaration>associated style declaration<a class=self-link href=#associated-style-declaration></a></dfn>
648648
for the <code>CSSVariablesMap</code> assigned to its <code>var</code> attribute.
649649

650650
<p> While the CSSStyleDeclaration interface normally contains attributes that are camel-cased name variants of all CSS properties
@@ -670,7 +670,7 @@ <h4 class="heading settled heading" data-level=4.1.1 id=serializing-custom-props
670670
<h3 class="heading settled heading" data-level=4.2 id=the-CSSVariablesMap-interface><span class=secno>4.2 </span><span class=content>
671671
The <code>CSSVariablesMap</code> Interface</span><a class=self-link href=#the-CSSVariablesMap-interface></a></h3>
672672

673-
<p> The <dfn data-dfn-type=dfn data-noexport="" id=cssvariablesmap><code>CSSVariablesMap</code><a class=self-link href=#></a></dfn> interface
673+
<p> The <dfn data-dfn-type=dfn data-noexport="" id=cssvariablesmap><code>CSSVariablesMap</code><a class=self-link href=#cssvariablesmap></a></dfn> interface
674674
exposes the <a href=#custom-property>custom properties</a> declared in the parent declaration block
675675
that have a non-initial value.
676676

@@ -684,7 +684,7 @@ <h3 class="heading settled heading" data-level=4.2 id=the-CSSVariablesMap-interf
684684
</pre>
685685
<p> The <a href=http://dev.w3.org/2006/webapi/WebIDL/#MapClass>map entries</a>
686686
on a CSSVariablesMap object
687-
are the property names of all the <a href=#custom-property>custom properties</a> in the <a href=http://dev.w3.org/csswg/cssom/#css-declaration-block-declarations><dfn data-dfn-type=dfn data-noexport="" id=css-declaration-block-declarations>CSS declaration block declarations<a class=self-link href=#></a></dfn></a>
687+
are the property names of all the <a href=#custom-property>custom properties</a> in the <a href=http://dev.w3.org/csswg/cssom/#css-declaration-block-declarations><dfn data-dfn-type=dfn data-noexport="" id=css-declaration-block-declarations>CSS declaration block declarations<a class=self-link href=#css-declaration-block-declarations></a></dfn></a>
688688
with a non-initial value,
689689
with the "var-" prefix removed,
690690
paired with their values.
@@ -942,11 +942,11 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
942942

943943
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
944944
Normative References</span><a class=self-link href=#normative></a></h3>
945-
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21>[CSS21]<dd>Bert Bos; et al. <a href=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: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>http://www.w3.org/TR/2011/REC-CSS2-20110607/</a><dt id=rfc2119 title=RFC2119>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
945+
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=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: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607/>http://www.w3.org/TR/2011/REC-CSS2-20110607/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
946946

947947
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
948948
Informative References</span><a class=self-link href=#informative></a></h3>
949-
<div data-fill-with=informative-references><dl><dt id=css3color title=CSS3COLOR>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dl></div>
949+
<div data-fill-with=informative-references><dl><dt id=css3color title=CSS3COLOR><a class=self-link href=#css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dl></div>
950950

951951
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
952952
Index</span><a class=self-link href=#index></a></h2>

0 commit comments

Comments
 (0)