Skip to content

Commit 6602125

Browse files
committed
Editorial tweak of an example.
1 parent 4b17bdc commit 6602125

2 files changed

Lines changed: 3 additions & 2 deletions

File tree

css-variables/Overview.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,7 +429,8 @@ <h2 id=defining-variables><span class=secno>2. </span> Defining Variables
429429
<p>The &lt;one> element defines a value for &lsquo;<code
430430
class=property>data-foo</code>&rsquo;. The &lt;two> element inherits this
431431
value, and additionally assigns a value to &lsquo;<code
432-
class=property>data-bar</code>&rsquo;. Finally, the &lt;three> element
432+
class=property>data-bar</code>&rsquo; using the &lsquo;<code
433+
class=css>foo</code>&rsquo; variable. Finally, the &lt;three> element
433434
inherits the &lsquo;<code class=property>data-bar</code>&rsquo; value
434435
<em>after</em> variable substitution (in other words, it sees the value
435436
&lsquo;<code class=css>calc(10px + 10px)</code>&rsquo;), and then

css-variables/Overview.src.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ <h2 id="defining-variables">
200200
two { data-bar: calc(data(foo) + 10px); }
201201
three { data-foo: calc(data(bar) + 10px); }</pre>
202202

203-
<p>The &lt;one> element defines a value for 'data-foo'. The &lt;two> element inherits this value, and additionally assigns a value to 'data-bar'. Finally, the &lt;three> element inherits the 'data-bar' value <em>after</em> variable substitution (in other words, it sees the value ''calc(10px + 10px)''), and then redefines 'data-foo' in terms of that value. Since the value it inherited for 'data-bar' no longer contains a reference to the 'data-foo' property defined on &lt;one>, defining 'data-foo' using the ''data(bar)'' variable is not cyclic, and actually defines a value that will eventually (when referenced as a variable in a normal property) resolve to ''30px''.</p>
203+
<p>The &lt;one> element defines a value for 'data-foo'. The &lt;two> element inherits this value, and additionally assigns a value to 'data-bar' using the ''foo'' variable. Finally, the &lt;three> element inherits the 'data-bar' value <em>after</em> variable substitution (in other words, it sees the value ''calc(10px + 10px)''), and then redefines 'data-foo' in terms of that value. Since the value it inherited for 'data-bar' no longer contains a reference to the 'data-foo' property defined on &lt;one>, defining 'data-foo' using the ''data(bar)'' variable is not cyclic, and actually defines a value that will eventually (when referenced as a variable in a normal property) resolve to ''30px''.</p>
204204
</div>
205205

206206
<p>The initial value of a <i>data property</i> is a special invalid value which makes the associated variable an <i>invalid variable</i>. This is represented by the keyword ''invalid'', but that keyword has no special meaning in itself, and is valid if set explicitly in a data property.</p>

0 commit comments

Comments
 (0)