Skip to content

Commit 4dde5d6

Browse files
tabatkinstabatkins
committed
Specify where attr() can be used. Also change the ids of some headings.
--HG-- extra : rebase_source : 624662027cc9244caa6491c26fc90688e4fe43fb
1 parent fc6a354 commit 4dde5d6

2 files changed

Lines changed: 81 additions & 82 deletions

File tree

‎css3-values/Overview.html‎

Lines changed: 73 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,9 @@ <h2 class="no-num no-toc" id=status>Status of this document</h2>
148148
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, please inform the editors!
149149

150150
<p>The following features are at-risk and may be dropped during the CR
151-
period: &lsquo;<a href="#calc0"><code class=css>calc()</code></a>&rsquo;,
152-
&lsquo;<a href="#cycle-value"><code class=css>cycle()</code></a>&rsquo;,
153-
&lsquo;<a href="#attr-value"><code class=css>attr()</code></a>&rsquo;.
151+
period: &lsquo;<a href="#calc"><code class=css>calc()</code></a>&rsquo;,
152+
&lsquo;<a href="#cycle"><code class=css>cycle()</code></a>&rsquo;,
153+
&lsquo;<a href="#attr"><code class=css>attr()</code></a>&rsquo;.
154154

155155
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
156156
<!--begin-toc-->
@@ -282,7 +282,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
282282
<li><a href="#functional-notation"><span class=secno>8. </span> Functional
283283
Notations</a>
284284
<ul class=toc>
285-
<li><a href="#calc"><span class=secno>8.1. </span> Mathematical
285+
<li><a href="#calc-notation"><span class=secno>8.1. </span> Mathematical
286286
Expressions: &lsquo;<code class=css>calc()</code>&rsquo;</a>
287287
<ul class=toc>
288288
<li><a href="#calc-syntax"><span class=secno>8.1.1. </span> Syntax</a>
@@ -295,11 +295,11 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
295295
Checking</a>
296296
</ul>
297297

298-
<li><a href="#cycle"><span class=secno>8.2. </span> Cycling Values:
299-
&lsquo;<code class=css>cycle()</code>&rsquo;</a>
298+
<li><a href="#cycle-notation"><span class=secno>8.2. </span> Cycling
299+
Values: &lsquo;<code class=css>cycle()</code>&rsquo;</a>
300300

301-
<li><a href="#attr"><span class=secno>8.3. </span> Attribute References:
302-
&lsquo;<code class=css>attr()</code>&rsquo;</a>
301+
<li><a href="#attr-notation"><span class=secno>8.3. </span> Attribute
302+
References: &lsquo;<code class=css>attr()</code>&rsquo;</a>
303303
</ul>
304304

305305
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -1338,15 +1338,16 @@ <h2 id=functional-notation><span class=secno>8. </span> Functional
13381338
<!-- -->content: counter(list-item) ". ";
13391339
<!-- -->width: calc(50% - 2em);</pre>
13401340

1341-
<h3 id=calc><span class=secno>8.1. </span> Mathematical Expressions:
1342-
&lsquo;<a href="#calc0"><code class=css>calc()</code></a>&rsquo;</h3>
1341+
<h3 id=calc-notation><span class=secno>8.1. </span> Mathematical
1342+
Expressions: &lsquo;<a href="#calc"><code
1343+
class=css>calc()</code></a>&rsquo;</h3>
13431344

1344-
<p>The <dfn id=calc0>calc()</dfn> function allows mathematical expressions
1345+
<p>The <dfn id=calc>calc()</dfn> function allows mathematical expressions
13451346
with addition (&lsquo;<code class=css>+</code>&rsquo;), subtraction
13461347
(&lsquo;<code class=css>-</code>&rsquo;), multiplication (&lsquo;<code
13471348
class=css>*</code>&rsquo;), and division (&lsquo;<code
13481349
class=css>/</code>&rsquo;) to be used as component values. The &lsquo;<a
1349-
href="#calc0"><code class=css>calc()</code></a>&rsquo; expression
1350+
href="#calc"><code class=css>calc()</code></a>&rsquo; expression
13501351
represents the result of the mathematical calculation it contains, using
13511352
standard operator precedence rules. It can be used wherever <a
13521353
href="#length-value"><code>&lt;length&gt;</code></a>, <a
@@ -1463,13 +1464,13 @@ <h4 id=calc-syntax><span class=secno>8.1.1. </span> Syntax</h4>
14631464
| STRING S* | IDENT S* | URI S* | hexcolor | function<ins> | math</ins>
14641465
;</pre>
14651466

1466-
<p> UAs must support &lsquo;<a href="#calc0"><code
1467+
<p> UAs must support &lsquo;<a href="#calc"><code
14671468
class=css>calc()</code></a>&rsquo; expressions of at least 30 terms, where
14681469
each &lsquo;<a href="#number"><code class=css>number</code></a>&rsquo;,
14691470
&lsquo;<a href="#dimension"><code class=css>dimension</code></a>&rsquo;,
14701471
or &lsquo;<a href="#percentage"><code
14711472
class=css>percentage</code></a>&rsquo; is a term. If a &lsquo;<a
1472-
href="#calc0"><code class=css>calc()</code></a>&rsquo; expression contains
1473+
href="#calc"><code class=css>calc()</code></a>&rsquo; expression contains
14731474
more than the supported number of terms, it must be treated as if it were
14741475
invalid.
14751476

@@ -1530,7 +1531,7 @@ <h4 id=calc-range><span class=secno>8.1.3. </span> Range Checking</h4>
15301531
allowed in the target context.
15311532

15321533
<p class=note>Note this requires all contexts accepting &lsquo;<a
1533-
href="#calc0"><code class=css>calc()</code></a>&rsquo; to define their
1534+
href="#calc"><code class=css>calc()</code></a>&rsquo; to define their
15341535
allowable values as a closed (not open) interval.
15351536

15361537
<div class=example>
@@ -1542,34 +1543,34 @@ <h4 id=calc-range><span class=secno>8.1.3. </span> Range Checking</h4>
15421543
width: 0px;</pre>
15431544
</div>
15441545

1545-
<h3 id=cycle><span class=secno>8.2. </span> Cycling Values: &lsquo;<a
1546-
href="#cycle-value"><code class=css>cycle()</code></a>&rsquo;</h3>
1546+
<h3 id=cycle-notation><span class=secno>8.2. </span> Cycling Values:
1547+
&lsquo;<a href="#cycle"><code class=css>cycle()</code></a>&rsquo;</h3>
15471548

1548-
<p>The <dfn id=cycle-value>cycle()</dfn> expression allows descendant
1549-
elements to cycle over a list of values instead of inheriting the same
1550-
value. The syntax of the &lsquo;<a href="#cycle-value"><code
1549+
<p>The <dfn id=cycle>cycle()</dfn> expression allows descendant elements to
1550+
cycle over a list of values instead of inheriting the same value. The
1551+
syntax of the &lsquo;<a href="#cycle"><code
15511552
class=css>cycle()</code></a>&rsquo; expression is:
15521553

15531554
<pre>cycle( &lt;value&gt;# )</pre>
15541555

15551556
<p>where <code>&lt;value&gt;</code> is a CSS value that is valid where the
15561557
expression is placed. If any of the values inside are not valid, then the
1557-
entire &lsquo;<a href="#cycle-value"><code
1558-
class=css>cycle()</code></a>&rsquo; expression is invalid.
1558+
entire &lsquo;<a href="#cycle"><code class=css>cycle()</code></a>&rsquo;
1559+
expression is invalid.
15591560

1560-
<p>The value returned by &lsquo;<a href="#cycle-value"><code
1561+
<p>The value returned by &lsquo;<a href="#cycle"><code
15611562
class=css>cycle()</code></a>&rsquo; must be determined by comparing the
15621563
inherited value <var>I</var> (the computed value on the parent, or, for
15631564
the root, the initial value) to the computed values
15641565
<var>C<sub>n</sub></var> returned by the <var>n</var>-th argument to
1565-
&lsquo;<a href="#cycle-value"><code class=css>cycle()</code></a>&rsquo;.
1566-
For the earliest <var>C<sub>n</sub></var> such that
1567-
<var>C<sub>n</sub></var> = <var>I</var>, the value returned by cycle is
1568-
<var>C<sub>n+1</sub></var>. However, if this <var>C<sub>n</sub></var> is
1569-
the last value, or if there are no <var>C<sub>n</sub></var> that equal
1570-
<var>I</var>, the computed value of the first value is returned instead.
1571-
1572-
<p class=note>Note that &lsquo;<a href="#cycle-value"><code
1566+
&lsquo;<a href="#cycle"><code class=css>cycle()</code></a>&rsquo;. For the
1567+
earliest <var>C<sub>n</sub></var> such that <var>C<sub>n</sub></var> =
1568+
<var>I</var>, the value returned by cycle is <var>C<sub>n+1</sub></var>.
1569+
However, if this <var>C<sub>n</sub></var> is the last value, or if there
1570+
are no <var>C<sub>n</sub></var> that equal <var>I</var>, the computed
1571+
value of the first value is returned instead.
1572+
1573+
<p class=note>Note that &lsquo;<a href="#cycle"><code
15731574
class=css>cycle()</code></a>&rsquo; explicitly looks at the computed value
15741575
of the parent, so it is useful even for non-inherited properties. This is
15751576
similar to the &lsquo;<code class=css>inherit</code>&rsquo; keyword, which
@@ -1591,41 +1592,41 @@ <h3 id=cycle><span class=secno>8.2. </span> Cycling Values: &lsquo;<a
15911592
li > ul { list-style-type: cycle(disk, circle, square, box); }</pre>
15921593
</div>
15931594

1594-
<p>The &lsquo;<a href="#cycle-value"><code
1595-
class=css>cycle()</code></a>&rsquo; notation is not allowed to be nested;
1596-
nor may it contain &lsquo;<a href="#attr-value"><code
1597-
class=css>attr()</code></a>&rsquo; or &lsquo;<a href="#calc0"><code
1598-
class=css>calc()</code></a>&rsquo; notations. Declarations containing such
1599-
constructs are invalid.
1595+
<p>The &lsquo;<a href="#cycle"><code class=css>cycle()</code></a>&rsquo;
1596+
notation is not allowed to be nested; nor may it contain &lsquo;<a
1597+
href="#attr"><code class=css>attr()</code></a>&rsquo; or &lsquo;<a
1598+
href="#calc"><code class=css>calc()</code></a>&rsquo; notations.
1599+
Declarations containing such constructs are invalid.
16001600

1601-
<h3 id=attr><span class=secno>8.3. </span> Attribute References: &lsquo;<a
1602-
href="#attr-value"><code class=css>attr()</code></a>&rsquo;</h3>
1601+
<h3 id=attr-notation><span class=secno>8.3. </span> Attribute References:
1602+
&lsquo;<a href="#attr"><code class=css>attr()</code></a>&rsquo;</h3>
16031603
<!--
16041604
Ian's proposal:
16051605
http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0141.html
16061606
-->
16071607

1608-
<p>The <dfn id=attr-value>attr()</dfn> function can return the value of an
1609-
attribute on the element for use as a value in a property. If used on a
1610-
pseudo-element, it returns the value of the attribute on the
1611-
pseudo-element's originating element.
1608+
<p> The <dfn id=attr>attr()</dfn> function can be used as a component value
1609+
in properties applied to an element or pseudo-element. It returns the
1610+
value of an attribute on the element. If used on a pseudo-element, it
1611+
returns the value of the attribute on the pseudo-element's originating
1612+
element.
16121613

16131614
<p>In CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
1614-
the &lsquo;<a href="#attr-value"><code class=css>attr()</code></a>&rsquo;
1615+
the &lsquo;<a href="#attr"><code class=css>attr()</code></a>&rsquo;
16151616
expression always returns a string. In CSS3, the &lsquo;<a
1616-
href="#attr-value"><code class=css>attr()</code></a>&rsquo; expression can
1617-
return many different types. The &lsquo;<a href="#attr-value"><code
1617+
href="#attr"><code class=css>attr()</code></a>&rsquo; expression can
1618+
return many different types. The &lsquo;<a href="#attr"><code
16181619
class=css>attr()</code></a>&rsquo; expression cannot return everything,
16191620
for example it cannot do counters, named strings, quotes, or keyword
16201621
values such as &lsquo;<code class=css>auto</code>&rsquo;, &lsquo;<code
16211622
class=css>nowrap</code>&rsquo;, or &lsquo;<code
16221623
class=css>baseline</code>&rsquo;. This is intentional, as the intent of
1623-
the &lsquo;<a href="#attr-value"><code class=css>attr()</code></a>&rsquo;
1624+
the &lsquo;<a href="#attr"><code class=css>attr()</code></a>&rsquo;
16241625
expression is not to make it possible to describe a presentational
16251626
language's formatting using CSS, but to enable CSS to take semantic data
16261627
into account.
16271628

1628-
<p>The new syntax for the &lsquo;<a href="#attr-value"><code
1629+
<p>The new syntax for the &lsquo;<a href="#attr"><code
16291630
class=css>attr()</code></a>&rsquo; expression is:
16301631

16311632
<pre>'attr(' <a
@@ -1636,34 +1637,34 @@ <h3 id=attr><span class=secno>8.3. </span> Attribute References: &lsquo;<a
16361637
name</a> <a href="#CSS3NAMESPACE"
16371638
rel=biblioentry>[CSS3NAMESPACE]<!--{{!CSS3NAMESPACE}}--></a> that
16381639
represents an attribute name. The computed value of the &lsquo;<a
1639-
href="#attr-value"><code class=css>attr()</code></a>&rsquo; expression is
1640-
the value of the attribute with that name on the element, according to the
1640+
href="#attr"><code class=css>attr()</code></a>&rsquo; expression is the
1641+
value of the attribute with that name on the element, according to the
16411642
rules given below.
16421643

16431644
<p>The optional &lsquo;<code class=css>&lt;type></code>&rsquo; argument is
16441645
a keyword drawn from the list below that tells the UA how to interpret the
16451646
attribute value. If omitted, &lsquo;<code class=css>string</code>&rsquo;
16461647
is implied. If the type is not valid for where the &lsquo;<a
1647-
href="#attr-value"><code class=css>attr()</code></a>&rsquo; expression is
1648-
placed, the whole &lsquo;<a href="#attr-value"><code
1648+
href="#attr"><code class=css>attr()</code></a>&rsquo; expression is
1649+
placed, the whole &lsquo;<a href="#attr"><code
16491650
class=css>attr()</code></a>&rsquo; expression is invalid.
16501651

16511652
<p>The optional &lsquo;<code class=css>&lt;value></code>&rsquo; argument is
1652-
a CSS value which must be valid where the &lsquo;<a
1653-
href="#attr-value"><code class=css>attr()</code></a>&rsquo; expression is
1654-
placed. It represents a fallback value, which is used if the named
1655-
attribute is missing, or its value cannot be parsed into the given type or
1656-
is invalid/out-of-range for the property. If the &lsquo;<code
1657-
class=css>&lt;value></code>&rsquo; argument is not valid for the property
1658-
where the &lsquo;<a href="#attr-value"><code
1659-
class=css>attr()</code></a>&rsquo; expression is placed, the whole
1660-
&lsquo;<a href="#attr-value"><code class=css>attr()</code></a>&rsquo;
1661-
expression is invalid. The fallback value must not contain another
1662-
&lsquo;<a href="#attr-value"><code class=css>attr()</code></a>&rsquo;
1663-
expression; if it is, the outer &lsquo;<a href="#attr-value"><code
1664-
class=css>attr()</code></a>&rsquo; expression is invalid. If the fallback
1665-
&lsquo;<code class=css>&lt;value></code>&rsquo; is absent, the default
1666-
value for the given type (from the list below) is implied.
1653+
a CSS value which must be valid where the &lsquo;<a href="#attr"><code
1654+
class=css>attr()</code></a>&rsquo; expression is placed. It represents a
1655+
fallback value, which is used if the named attribute is missing, or its
1656+
value cannot be parsed into the given type or is invalid/out-of-range for
1657+
the property. If the &lsquo;<code class=css>&lt;value></code>&rsquo;
1658+
argument is not valid for the property where the &lsquo;<a
1659+
href="#attr"><code class=css>attr()</code></a>&rsquo; expression is
1660+
placed, the whole &lsquo;<a href="#attr"><code
1661+
class=css>attr()</code></a>&rsquo; expression is invalid. The fallback
1662+
value must not contain another &lsquo;<a href="#attr"><code
1663+
class=css>attr()</code></a>&rsquo; expression; if it is, the outer
1664+
&lsquo;<a href="#attr"><code class=css>attr()</code></a>&rsquo; expression
1665+
is invalid. If the fallback &lsquo;<code
1666+
class=css>&lt;value></code>&rsquo; is absent, the default value for the
1667+
given type (from the list below) is implied.
16671668

16681669
<p class=note>Note that the default value need not be of the type given.
16691670
For instance, if the type required of the attribute by the author is
@@ -1847,11 +1848,10 @@ <h3 id=attr><span class=secno>8.3. </span> Attribute References: &lsquo;<a
18471848
color: attr(color); /* 'color' doesn't accept strings */</pre>
18481849
</div>
18491850

1850-
<p class=note>The &lsquo;<a href="#attr-value"><code
1851+
<p class=note>The &lsquo;<a href="#attr"><code
18511852
class=css>attr()</code></a>&rsquo; expression cannot currently fall back
18521853
onto another attribute. Future versions of CSS may extend &lsquo;<a
1853-
href="#attr-value"><code class=css>attr()</code></a>&rsquo; in this
1854-
direction.
1854+
href="#attr"><code class=css>attr()</code></a>&rsquo; in this direction.
18551855

18561856
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
18571857

@@ -2151,21 +2151,19 @@ <h2 class=no-num id=index>Index</h2>
21512151
<li>&lt;angle&gt;, <a href="#angle-value"
21522152
title="&lt;angle&gt;"><strong>6.1.</strong></a>
21532153

2154-
<li>attr(), <a href="#attr-value" title="attr()"><strong>8.3.</strong></a>
2155-
2154+
<li>attr(), <a href="#attr" title="attr()"><strong>8.3.</strong></a>
21562155

21572156
<li>authoring tool, <a href="#authoring-tool"
21582157
title="authoring tool"><strong>9.2.</strong></a>
21592158

2160-
<li>calc(), <a href="#calc0" title="calc()"><strong>8.1.</strong></a>
2159+
<li>calc(), <a href="#calc" title="calc()"><strong>8.1.</strong></a>
21612160

21622161
<li>ch, <a href="#ch-unit" title=ch><strong>5.1.1.</strong></a>
21632162

21642163
<li><a href="#color-value"><code>&lt;color&gt;</code></a>, <a
21652164
href="#color-value" title="&lt;color&gt;"><strong>7.1.</strong></a>
21662165

2167-
<li>cycle(), <a href="#cycle-value"
2168-
title="cycle()"><strong>8.2.</strong></a>
2166+
<li>cycle(), <a href="#cycle" title="cycle()"><strong>8.2.</strong></a>
21692167

21702168
<li>deg, <a href="#deg" title=deg><strong>6.1.</strong></a>
21712169

‎css3-values/Overview.src.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -873,7 +873,7 @@ <h2 id="functional-notation">
873873
<!-- -->content: counter(list-item) ". ";
874874
<!-- -->width: calc(50% - 2em);</pre>
875875

876-
<h3 id="calc">
876+
<h3 id="calc-notation">
877877
Mathematical Expressions: ''calc()''</h3>
878878

879879
<p>The <dfn>calc()</dfn> function
@@ -1062,10 +1062,10 @@ <h4 id='calc-range'>
10621062
width: 0px;</pre>
10631063
</div>
10641064

1065-
<h3 id="cycle">
1065+
<h3 id="cycle-notation">
10661066
Cycling Values: ''cycle()''</h3>
10671067

1068-
<p>The <dfn id='cycle-value'>cycle()</dfn> expression allows descendant elements
1068+
<p>The <dfn>cycle()</dfn> expression allows descendant elements
10691069
to cycle over a list of values instead of inheriting the same value.
10701070
The syntax of the ''cycle()'' expression is:
10711071

@@ -1112,17 +1112,18 @@ <h3 id="cycle">
11121112
contain ''attr()'' or ''calc()'' notations.
11131113
Declarations containing such constructs are invalid.</p>
11141114

1115-
<h3 id="attr">
1115+
<h3 id="attr-notation">
11161116
Attribute References: ''attr()''</h3>
11171117

11181118
<!--
11191119
Ian's proposal:
11201120
http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0141.html
11211121
-->
11221122

1123-
<p>The <dfn id='attr-value'>attr()</dfn> function can return the value of an attribute on the element
1124-
for use as a value in a property. If used on a pseudo-element, it returns
1125-
the value of the attribute on the pseudo-element's originating element.</p>
1123+
<p>
1124+
The <dfn>attr()</dfn> function can be used as a component value in properties applied to an element or pseudo-element.
1125+
It returns the value of an attribute on the element.
1126+
If used on a pseudo-element, it returns the value of the attribute on the pseudo-element's originating element.
11261127

11271128
<p>In CSS2.1 [[!CSS21]], the ''attr()'' expression always returns a string.
11281129
In CSS3, the ''attr()'' expression can return many different types. The

0 commit comments

Comments
 (0)