Skip to content

Commit a6e77d7

Browse files
tabatkinstabatkins
committed
Removed the special rules about variable usage, per convo with Hyatt.
1 parent 40ebb88 commit a6e77d7

2 files changed

Lines changed: 18 additions & 216 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 12 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,6 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
144144

145145
<li><a href="#defining-variables"><span class=secno>2. </span> Defining
146146
Variables</a>
147-
<ul class=toc>
148-
<li><a href="#variable-classes"><span class=secno>2.1. </span> Variable
149-
Classes</a>
150-
</ul>
151147

152148
<li><a href="#using-variables"><span class=secno>3. </span> Using
153149
Variables</a>
@@ -348,40 +344,6 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables</h2>
348344
<p>Before they are defined, all variables are <a
349345
href="#invalid-variable"><i>invalid variables</i></a>.
350346

351-
<h3 id=variable-classes><span class=secno>2.1. </span> Variable Classes</h3>
352-
353-
<p>Variables fall into a few different classes which affect where and how
354-
they can be used, depending on the value they're defined as.
355-
356-
<dl>
357-
<dt><dfn id=singular-variable title="singular variable|singular
358-
variables">singular variable</dfn>
359-
360-
<dd>A variable whose value is a single <a
361-
href="#cssfoo"><i>CSSFOO</i></a>, such as a keyword (like &lsquo;<code
362-
class=css>red</code>&rsquo;), a dimension (like &lsquo;<code
363-
class=css>20px</code>&rsquo;), or a function (like &lsquo;<code
364-
class=css>linear-gradient(red,blue)</code>&rsquo;).
365-
366-
<dt><dfn id=compound-variable title="compound variable|compound
367-
variables">compound variable</dfn>
368-
369-
<dd>A variable whose value is a space-separated list of <a
370-
href="#cssfoo"><i>CSSFOO</i></a>s, like &lsquo;<code class=css>20px 30px
371-
black</code>&rsquo;.
372-
373-
<dt><dfn id=list-variable title="list variable|list variables">list
374-
variable</dfn>
375-
376-
<dd>A variable whose value is multiple <a
377-
href="#cssfoo"><i>CSSFOO</i></a>s separated by spaces or other
378-
separators, such as commas or slashes, like &lsquo;<code class=css>red,
379-
blue, white</code>&rsquo;.
380-
</dl>
381-
382-
<p class=issue>What term can I use for <dfn id=cssfoo>CSSFOO</dfn>? It
383-
looks like it corresponds to "term" in the 2.1 grammar.
384-
385347
<h2 id=using-variables><span class=secno>3. </span> Using Variables</h2>
386348

387349
<p>A variable can be used anywhere a value is expected in CSS. Variables
@@ -391,77 +353,10 @@ <h2 id=using-variables><span class=secno>3. </span> Using Variables</h2>
391353
value that nonetheless has no relation to the variable of that name.
392354

393355
<p>A variable is substituted for its value in the property value at
394-
computed-value time.
395-
396-
<p><a href="#singular-variable"><i>Singular variables</i></a> can be used
397-
anywhere as a value. They can be an entire property's value, a component
398-
value in a larger property value, an argument to a function, etc.. <a
399-
href="#compound-variable"><i>Compound variables</i></a> are somewhat more
400-
restricted - they can only be used as an entire property value, a whole
401-
component of a list-valued property, or a whole function argument. <a
402-
href="#list-variable"><i>List variables</i></a> are the most restricted -
403-
they can only be used as an entire property value, as one or more whole
404-
components of a list-valued property, or as a whole series of function
405-
arguments.
406-
407-
<div class=example>
408-
<p>Here are some examples of valid and invalid use of a <a
409-
href="#compound-variable"><i>compound variable</i></a>:</p>
410-
411-
<pre>
412-
@var $compound 20px 30px;
413-
div {
414-
margin: $compound;
415-
/* Valid, as it's used as a whole property value */
416-
/* Equivalent to "margin: 20px 30px;" */
417-
418-
text-shadow: $compound blue;
419-
/* Invalid, as it's not used as a whole property value */
420-
421-
background-position: 10px 10px, $compound, 50px;
422-
/* Valid, as it's used as a whole component of a list-valued property */
423-
/* Equivalent to "background-position: 10px 10px, 20px 30px, 50px;" */
424-
425-
background-image: radial-gradient($compound, red, blue);
426-
/* Valid, as it's used as a whole function argument */
427-
/* Equivalent to "background-image: radial-gradient(20px 30px, red, blue);" */
428-
}</pre>
429-
430-
<p>Here are some examples of valid and invalid uses of a <a
431-
href="#list-variable"><i>list variable</i></a>:</p>
432-
433-
<pre>
434-
@var $list 20px, 30px 40px;
435-
div {
436-
background-position: $list;
437-
/* Valid, as it's used as a whole property value */
438-
/* Equivalent to "background-position: 20px, 30px" */
439-
440-
background-position: 10px $list;
441-
/* Invalid, as it's not used as a whole property value or component of a list. */
442-
/* NOT equivalent to "background-position: 10px 20px, 30px 40px;" */
443-
444-
background-position: 10px, $list, 50px;
445-
/* Valid, as it's used as a whole sequence of components of a list. */
446-
/* Equivalent to "background-position: 10px, 20px, 30px 40px, 50px;" */
447-
448-
background-image: radial-gradient($list, red, blue);
449-
/* Valid, as it's used as a whole sequence of function arguments. */
450-
/* Equivalent to "background-image: radial-gradient(20px, 30px 40px, red, blue);" */
451-
452-
background-image: radial-gradient(10px $list, red, blue);
453-
/* Invalid, as it's not used as a whole sequence of function arguments */
454-
}</pre>
455-
</div>
456-
457-
<p>Using a <a href="#compound-variable"><i>compound variable</i></a> or <a
458-
href="#list-variable"><i>list variable</i></a> in an invalid way is an <a
356+
computed-value time. If the property value, once all variables are
357+
substituted in, is invalid for the property, that is an <a
459358
href="#invalid-variable-use"><i>invalid variable use</i></a>.
460359

461-
<p>Similarly, if a property containing a variable in its property value
462-
ends up being invalid when the variable's value is substituted in, that is
463-
an <a href="#invalid-variable-use"><i>invalid variable use</i></a>.
464-
465360
<div class=example>
466361
<p>For example, the following usage is fine from a syntax standpoint, but
467362
results in nonsense when the variable is substituted in:</p>
@@ -482,16 +377,15 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
482377

483378
<p>An <dfn id=invalid-variable title="invalid variable|invalid
484379
variables">invalid variable</dfn> results from having variables directly
485-
or indirectly refer to themselves. Using an <a
486-
href="#invalid-variable"><i>invalid variable</i></a> results in an <a
487-
href="#invalid-variable-use"><i>invalid variable use</i></a>.
380+
or indirectly refer to themselves, or from using an undefined variable.
381+
Using an <a href="#invalid-variable"><i>invalid variable</i></a> results
382+
in an <a href="#invalid-variable-use"><i>invalid variable use</i></a>.
488383

489384
<p>An <dfn id=invalid-variable-use>invalid variable use</dfn> results from
490-
either using an <a href="#invalid-variable"><i>invalid variable</i></a>,
491-
or using a <a href="#compound-variable"><i>compound variable</i></a> or <a
492-
href="#list-variable"><i>list variable</i></a> in an invalid way. When
493-
this happens, the property the variable is used in must compute to the
494-
property's initial value.
385+
either using an <a href="#invalid-variable"><i>invalid variable</i></a> in
386+
a property value, or using a valid variable that produces an invalid
387+
property value when it is substituted in. When this happens, the property
388+
the variable is used in must compute to the property's initial value.
495389

496390
<div class=example>
497391
<p>For example, in the following code:</p>
@@ -503,13 +397,13 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
503397

504398
<p>the &lt;p> elements will have transparent backgrounds (the initial
505399
value for &lsquo;<code class=property>background-color</code>&rsquo;),
506-
rather than red text.</p>
400+
rather than red backgrounds.</p>
507401
</div>
508402

509403
<p class=note>The <a href="#invalid-variable-use"><i>invalid variable
510404
use</i></a> concept exists because variables can't "fail early" like other
511-
syntax errors can, so by the time the user agent realizes a variable is
512-
invalid, it's already thrown away the other cascaded values.
405+
syntax errors can, so by the time the user agent realizes a property value
406+
is invalid, it's already thrown away the other cascaded values.
513407

514408
<h2 id=cssom><span class=secno>4. </span> APIs</h2>
515409

@@ -818,14 +712,6 @@ <h2 class=no-num id=index>Index</h2>
818712
<li>authoring tool, <a href="#authoring-tool" title="authoring
819713
tool"><strong>6.2.</strong></a>
820714

821-
<li>compound variable, <a href="#compound-variable" title="compound
822-
variable"><strong>2.1.</strong></a>
823-
824-
<li>compound variables, <a href="#compound-variable" title="compound
825-
variables"><strong>2.1.</strong></a>
826-
827-
<li>CSSFOO, <a href="#cssfoo" title=CSSFOO><strong>2.1.</strong></a>
828-
829715
<li>inactive, <a href="#inactive-var-rule"
830716
title=inactive><strong>2.</strong></a>
831717

@@ -838,21 +724,9 @@ <h2 class=no-num id=index>Index</h2>
838724
<li>invalid variable use, <a href="#invalid-variable-use" title="invalid
839725
variable use"><strong>3.1.</strong></a>
840726

841-
<li>list variable, <a href="#list-variable" title="list
842-
variable"><strong>2.1.</strong></a>
843-
844-
<li>list variables, <a href="#list-variable" title="list
845-
variables"><strong>2.1.</strong></a>
846-
847727
<li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a>
848728

849729

850-
<li>singular variable, <a href="#singular-variable" title="singular
851-
variable"><strong>2.1.</strong></a>
852-
853-
<li>singular variables, <a href="#singular-variable" title="singular
854-
variables"><strong>2.1.</strong></a>
855-
856730
<li>style sheet
857731
<ul>
858732
<li>as conformance class, <a href="#style-sheet" title="style sheet, as

‎css-variables/Overview.src.html‎

Lines changed: 6 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -150,86 +150,14 @@ <h2 id="defining-variables">
150150

151151
<p>Before they are defined, all variables are <i>invalid variables</i>.</p>
152152

153-
<h3 id='variable-classes'>
154-
Variable Classes</h3>
155-
156-
<p>Variables fall into a few different classes which affect where and how they can be used, depending on the value they're defined as.</p>
157-
158-
<dl>
159-
<dt><dfn title="singular variable|singular variables">singular variable</dfn></dt>
160-
<dd>A variable whose value is a single <i>CSSFOO</i>, such as a keyword (like ''red''), a dimension (like ''20px''), or a function (like ''linear-gradient(red,blue)'').</dd>
161-
162-
<dt><dfn title="compound variable|compound variables">compound variable</dfn></dt>
163-
<dd>A variable whose value is a space-separated list of <i>CSSFOO</i>s, like ''20px 30px black''.</dd>
164-
165-
<dt><dfn title="list variable|list variables">list variable</dfn></dt>
166-
<dd>A variable whose value is multiple <i>CSSFOO</i>s separated by spaces or other separators, such as commas or slashes, like ''red, blue, white''.</dd>
167-
</dl>
168-
169-
<p class='issue'>What term can I use for <dfn>CSSFOO</dfn>? It looks like it corresponds to "term" in the 2.1 grammar.</p>
170-
171153
<h2 id='using-variables'>
172154
Using Variables</h2>
173155

174156
<p>A variable can be used anywhere a value is expected in CSS. Variables can not be used as property names, selectors, or anything else besides property values - doing so either produces an invalid value or, in some situations like the attribute value of an attribute selector, a valid value that nonetheless has no relation to the variable of that name.</p>
175157

176-
<p>A variable is substituted for its value in the property value at computed-value time.</p>
177-
178-
<p><i>Singular variables</i> can be used anywhere as a value. They can be an entire property's value, a component value in a larger property value, an argument to a function, etc.. <i>Compound variables</i> are somewhat more restricted - they can only be used as an entire property value, a whole component of a list-valued property, or a whole function argument. <i>List variables</i> are the most restricted - they can only be used as an entire property value, as one or more whole components of a list-valued property, or as a whole series of function arguments.</p>
158+
<p>A variable is substituted for its value in the property value at computed-value time. If the property value, once all variables are substituted in, is invalid for the property, that is an <i>invalid variable use</i>.</p>
179159

180-
<div class='example'>
181-
<p>Here are some examples of valid and invalid use of a <i>compound variable</i>:</p>
182-
183-
<pre>
184-
@var $compound 20px 30px;
185-
div {
186-
margin: $compound;
187-
/* Valid, as it's used as a whole property value */
188-
/* Equivalent to "margin: 20px 30px;" */
189-
190-
text-shadow: $compound blue;
191-
/* Invalid, as it's not used as a whole property value */
192-
193-
background-position: 10px 10px, $compound, 50px;
194-
/* Valid, as it's used as a whole component of a list-valued property */
195-
/* Equivalent to "background-position: 10px 10px, 20px 30px, 50px;" */
196-
197-
background-image: radial-gradient($compound, red, blue);
198-
/* Valid, as it's used as a whole function argument */
199-
/* Equivalent to "background-image: radial-gradient(20px 30px, red, blue);" */
200-
}</pre>
201-
202-
<p>Here are some examples of valid and invalid uses of a <i>list variable</i>:</p>
203-
204-
<pre>
205-
@var $list 20px, 30px 40px;
206-
div {
207-
background-position: $list;
208-
/* Valid, as it's used as a whole property value */
209-
/* Equivalent to "background-position: 20px, 30px" */
210-
211-
background-position: 10px $list;
212-
/* Invalid, as it's not used as a whole property value or component of a list. */
213-
/* NOT equivalent to "background-position: 10px 20px, 30px 40px;" */
214-
215-
background-position: 10px, $list, 50px;
216-
/* Valid, as it's used as a whole sequence of components of a list. */
217-
/* Equivalent to "background-position: 10px, 20px, 30px 40px, 50px;" */
218-
219-
background-image: radial-gradient($list, red, blue);
220-
/* Valid, as it's used as a whole sequence of function arguments. */
221-
/* Equivalent to "background-image: radial-gradient(20px, 30px 40px, red, blue);" */
222-
223-
background-image: radial-gradient(10px $list, red, blue);
224-
/* Invalid, as it's not used as a whole sequence of function arguments */
225-
}</pre>
226-
</div>
227-
228-
<p>Using a <i>compound variable</i> or <i>list variable</i> in an invalid way is an <i>invalid variable use</i>.</p>
229-
230-
<p>Similarly, if a property containing a variable in its property value ends up being invalid when the variable's value is substituted in, that is an <i>invalid variable use</i>.</p>
231-
232-
<div class='example'>
160+
<div class='example'>
233161
<p>For example, the following usage is fine from a syntax standpoint, but results in nonsense when the variable is substituted in:</p>
234162

235163
<pre>
@@ -242,9 +170,9 @@ <h2 id='using-variables'>
242170
<h3 id='using-invalid-variables'>
243171
Using Invalid Variables</h3>
244172

245-
<p>An <dfn title="invalid variable|invalid variables">invalid variable</dfn> results from having variables directly or indirectly refer to themselves. Using an <i>invalid variable</i> results in an <i>invalid variable use</i>.</p>
173+
<p>An <dfn title="invalid variable|invalid variables">invalid variable</dfn> results from having variables directly or indirectly refer to themselves, or from using an undefined variable. Using an <i>invalid variable</i> results in an <i>invalid variable use</i>.</p>
246174

247-
<p>An <dfn>invalid variable use</dfn> results from either using an <i>invalid variable</i>, or using a <i>compound variable</i> or <i>list variable</i> in an invalid way. When this happens, the property the variable is used in must compute to the property's initial value.</p>
175+
<p>An <dfn>invalid variable use</dfn> results from either using an <i>invalid variable</i> in a property value, or using a valid variable that produces an invalid property value when it is substituted in. When this happens, the property the variable is used in must compute to the property's initial value.</p>
248176

249177
<div class='example'>
250178
<p>For example, in the following code:</p>
@@ -254,10 +182,10 @@ <h3 id='using-invalid-variables'>
254182
p { background-color: red; }
255183
p { background-color: $invalid; }</pre>
256184

257-
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red text.</p>
185+
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds.</p>
258186
</div>
259187

260-
<p class='note'>The <i>invalid variable use</i> concept exists because variables can't "fail early" like other syntax errors can, so by the time the user agent realizes a variable is invalid, it's already thrown away the other cascaded values.</p>
188+
<p class='note'>The <i>invalid variable use</i> concept exists because variables can't "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it's already thrown away the other cascaded values.</p>
261189

262190
<h2 id='cssom'>
263191
APIs</h2>

0 commit comments

Comments
 (0)