Skip to content

Commit 8b05a6a

Browse files
committed
Added an explanator sentence calling out the behavior difference between invalid syntax and invalid variables.
1 parent ab02eca commit 8b05a6a

2 files changed

Lines changed: 10 additions & 2 deletions

File tree

css-variables/Overview.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,13 @@ <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid
401401

402402
<p>the &lt;p> elements will have transparent backgrounds (the initial
403403
value for &lsquo;<code class=property>background-color</code>&rsquo;),
404-
rather than red backgrounds. This is different from the second</p>
404+
rather than red backgrounds.</p>
405+
406+
<p>Note the difference between this and what happens if the author had
407+
just written &lsquo;<code class=css>background-color: 20px</code>&rsquo;
408+
directly in their stylesheet - that would be a normal syntax error, which
409+
would cause the rule to be discarded, so the &lsquo;<code
410+
class=css>background-color: red</code>&rsquo; rule would be used instead.</p>
405411
</div>
406412

407413
<p class=note>The <a href="#invalid-at-computed-value-time"><i>invalid at

css-variables/Overview.src.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,9 @@ <h3 id='using-invalid-variables'>
182182
p { background-color: red; }
183183
p { background-color: $invalid; }</pre>
184184

185-
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds. This is different from the second</p>
185+
<p>the &lt;p> elements will have transparent backgrounds (the initial value for 'background-color'), rather than red backgrounds.</p>
186+
187+
<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>
186188
</div>
187189

188190
<p class='note'>The <i>invalid at computed-value time</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. I think ''attr()'' needs to rely on it as well, as its behavior is almost identical to variables.</p>

0 commit comments

Comments
 (0)