Skip to content

Commit 6cdeaff

Browse files
tabatkinstabatkins
committed
Tweak the example about invalid variable use.
1 parent a629c75 commit 6cdeaff

2 files changed

Lines changed: 37 additions & 36 deletions

File tree

‎css-variables/Overview.html‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22

33
<html lang=en>
4-
<head profile="http://www.w3.org/2006/03/hcard"><meta content="text/html;
5-
charset=utf-8" http-equiv=Content-Type>
4+
<head profile="http://www.w3.org/2006/03/hcard"><meta
5+
content="text/html; charset=utf-8" http-equiv=Content-Type>
66

77
<title>CSS Variables Module Level 1</title>
88
<link href="http://dev.w3.org/csswg/css-module/default.css" rel=stylesheet
@@ -22,14 +22,13 @@
2222

2323
<h1>CSS Variables Module Level 1</h1>
2424

25-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
26-
2011</h2>
25+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 October 2011</h2>
2726

2827
<dl>
2928
<dt>This version:
3029

3130
<dd><a
32-
href="http://www.w3.org/TR/2011/ED-css-variables-20110930/">http://dev.w3.org/csswg/css-variables/</a>
31+
href="http://www.w3.org/TR/2011/ED-css-variables-20111003/">http://dev.w3.org/csswg/css-variables/</a>
3332
<!--<dt>Latest version:
3433
<dd><a href="http://www.w3.org/TR/css-variables/">http://www.w3.org/TR/css-variables/</a>-->
3534

@@ -50,13 +49,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 September
5049
<p class=copyright><a
5150
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
5251
rel=license>Copyright</a> &copy; 2011 <a
53-
href="http://www.w3.org/"><acronym title="World Wide Web
54-
Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
55-
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
56-
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
57-
title="European Research Consortium for Informatics and
58-
Mathematics">ERCIM</acronym></a>, <a
59-
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
52+
href="http://www.w3.org/"><acronym
53+
title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
54+
href="http://www.csail.mit.edu/"><acronym
55+
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
56+
href="http://www.ercim.eu/"><acronym
57+
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
58+
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
6059
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
6160
<a
6261
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -404,13 +403,13 @@ <h2 id=using-variables><span class=secno>3. </span> Using Variables</h2>
404403
<h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
405404
Variables</h3>
406405

407-
<p>An <dfn id=invalid-variable title="invalid variable|invalid
408-
variables">invalid variable</dfn> results from having variables directly
409-
or indirectly refer to themselves, or from using an undefined variable.
410-
Using an <a href="#invalid-variable"><i>invalid variable</i></a> in a
411-
property value makes the declaration <a
412-
href="#invalid-at-computed-value-time"><i>invalid at computed-value
413-
time</i></a>.
406+
<p>An <dfn id=invalid-variable
407+
title="invalid variable|invalid variables">invalid variable</dfn> results
408+
from having variables directly or indirectly refer to themselves, or from
409+
using an undefined variable. Using an <a
410+
href="#invalid-variable"><i>invalid variable</i></a> in a property value
411+
makes the declaration <a href="#invalid-at-computed-value-time"><i>invalid
412+
at computed-value time</i></a>.
414413

415414
<p>A declaration that is <dfn id=invalid-at-computed-value-time>invalid at
416415
computed-value time</dfn> results from either using an <a
@@ -423,13 +422,14 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
423422
<p>For example, in the following code:</p>
424423

425424
<pre>
426-
@var $invalid $invalid; /* Invalid, due to the trivial cycle. */
425+
@var $not-a-color 20px;
427426
p { background-color: red; }
428-
p { background-color: $invalid; }</pre>
427+
p { background-color: $not-a-color; }</pre>
429428

430429
<p>the &lt;p> elements will have transparent backgrounds (the initial
431430
value for &lsquo;<code class=property>background-color</code>&rsquo;),
432-
rather than red backgrounds.</p>
431+
rather than red backgrounds. The same would happen if the variable itself
432+
was invalid (such as if it was part of a cycle) or undefined.</p>
433433

434434
<p>Note the difference between this and what happens if the author had
435435
just written &lsquo;<code class=css>background-color: 20px</code>&rsquo;
@@ -521,7 +521,8 @@ <h4 id=cssom-cssrule><span class=secno>4.2.1. </span> Changes to interface
521521
const unsigned short MEDIA_RULE = 4;
522522
const unsigned short FONT_FACE_RULE = 5;
523523
const unsigned short PAGE_RULE = 6;
524-
<ins>const unsigned short <a href="#variablerule"><code>VARIABLE_RULE</code></a> = 11;</ins>
524+
<ins>const unsigned short <a
525+
href="#variablerule"><code>VARIABLE_RULE</code></a> = 11;</ins>
525526
readonly attribute unsigned short type;
526527
attribute DOMString cssText;
527528
// raises(DOMException) on setting
@@ -894,29 +895,29 @@ <h2 class=no-num id=index>Index</h2>
894895
<li>active, <a href="#active-var-rule"
895896
title=active><strong>2.</strong></a>
896897

897-
<li>authoring tool, <a href="#authoring-tool" title="authoring
898-
tool"><strong>6.2.</strong></a>
898+
<li>authoring tool, <a href="#authoring-tool"
899+
title="authoring tool"><strong>6.2.</strong></a>
899900

900901
<li>inactive, <a href="#inactive-var-rule"
901902
title=inactive><strong>2.</strong></a>
902903

903904
<li>invalid at computed-value time, <a
904-
href="#invalid-at-computed-value-time" title="invalid at computed-value
905-
time"><strong>3.1.</strong></a>
905+
href="#invalid-at-computed-value-time"
906+
title="invalid at computed-value time"><strong>3.1.</strong></a>
906907

907-
<li>invalid variable, <a href="#invalid-variable" title="invalid
908-
variable"><strong>3.1.</strong></a>
908+
<li>invalid variable, <a href="#invalid-variable"
909+
title="invalid variable"><strong>3.1.</strong></a>
909910

910-
<li>invalid variables, <a href="#invalid-variable" title="invalid
911-
variables"><strong>3.1.</strong></a>
911+
<li>invalid variables, <a href="#invalid-variable"
912+
title="invalid variables"><strong>3.1.</strong></a>
912913

913914
<li>renderer, <a href="#renderer" title=renderer><strong>6.2.</strong></a>
914915

915916

916917
<li>style sheet
917918
<ul>
918-
<li>as conformance class, <a href="#style-sheet" title="style sheet, as
919-
conformance class"><strong>6.2.</strong></a>
919+
<li>as conformance class, <a href="#style-sheet"
920+
title="style sheet, as conformance class"><strong>6.2.</strong></a>
920921
</ul>
921922

922923
<li><a href="#variablerule"><code>VARIABLE_RULE</code></a>, <a

‎css-variables/Overview.src.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,11 @@ <h3 id='using-invalid-variables'>
168168
<p>For example, in the following code:</p>
169169

170170
<pre>
171-
@var $invalid $invalid; /* Invalid, due to the trivial cycle. */
171+
@var $not-a-color 20px;
172172
p { background-color: red; }
173-
p { background-color: $invalid; }</pre>
173+
p { background-color: $not-a-color; }</pre>
174174

175-
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds.</p>
175+
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds. The same would happen if the variable itself was invalid (such as if it was part of a cycle) or undefined.</p>
176176

177177
<p>Note the difference between this and what happens if the author had just written ''background-color: 20px'' directly in their stylesheet - that would be a normal syntax error, which would cause the rule to be discarded, so the ''background-color: red'' rule would be used instead.</p>
178178
</div>

0 commit comments

Comments
 (0)