Skip to content

Commit 09509c7

Browse files
tabatkinstabatkins
committed
[css-values] Move the mult/comb links to a proper dfn.
1 parent 427dc85 commit 09509c7

2 files changed

Lines changed: 46 additions & 34 deletions

File tree

‎css-values/Overview.bs‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,14 @@ Component value combinators</h3>
159159

160160
Component values can be arranged into property values as follows:
161161

162-
<ul>
162+
<ul export>
163163
<li>Juxtaposing components means that
164164
all of them must occur, in the given order.
165-
<li>A double ampersand (&&) separates two or more components,
165+
<li>A double ampersand (<dfn id='comb-all'>&&</dfn>) separates two or more components,
166166
all of which must occur, in any order.
167-
<li>A double bar (||) separates two or more options:
167+
<li>A double bar (<dfn id='comb-any'>||</dfn>) separates two or more options:
168168
one or more of them must occur, in any order.
169-
<li>A bar (|) separates two or more alternatives:
169+
<li>A bar (<dfn id='comb-one'>|</dfn>) separates two or more alternatives:
170170
exactly one of them must occur.
171171
<li>Brackets ([&nbsp;]) are for grouping.
172172
</ul>
@@ -196,34 +196,35 @@ Component value multipliers</h3>
196196
Every type, keyword, or bracketed group may be followed by one of
197197
the following modifiers:
198198

199-
<ul>
200-
<li>An asterisk (*) indicates that the preceding type, word, or
199+
<ul export>
200+
<li>An asterisk (<dfn id='mult-zero-plus'>*</dfn>) indicates that the preceding type, word, or
201201
group occurs zero or more times.
202202

203-
<li>A plus (+) indicates that the preceding type, word, or group
203+
<li>A plus (<dfn id='mult-one-plus'>+</dfn>) indicates that the preceding type, word, or group
204204
occurs one or more times.
205205

206-
<li>A question mark (?) indicates that the preceding type, word, or
206+
<li>A question mark (<dfn id='mult-opt'>?</dfn>) indicates that the preceding type, word, or
207207
group is optional (occurs zero or one times).
208208

209-
<li>A single number in curly braces ({<var>A</var>})
209+
<li>A single number in curly braces (<dfn id='mult-num'>{<var>A</var>}</dfn>)
210210
indicates that the preceding type, word, or group occurs <var>A</var> times.
211211

212-
<li>A comma-separated pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
212+
<li>A comma-separated pair of numbers in curly braces (<dfn id='mult-num-range'>{<var>A</var>,<var>B</var>}</dfn>)
213213
indicates that the preceding type, word, or group occurs at least
214214
<var>A</var> and at most <var>B</var> times.
215215
The <var>B</var> may be omitted ({<var>A</var>,})
216216
to indicate that there must be at least <var>A</var> repetitions,
217217
with no upper bound on the number of repetitions.
218218

219-
<li>A hash mark (#) indicates that the preceding type, word, or
219+
<li>A hash mark (<dfn id='mult-comma'>#</dfn>) indicates that the preceding type, word, or
220220
group occurs one or more times, separated by comma tokens
221221
(which may optionally be surrounded by white space and/or comments).
222222
It may optionally be followed by the curly brace forms, above,
223223
to indicate precisely how many times the repetition occurs,
224224
like ''&lt;length>#{1,4}''.
225225

226-
<li>An exclamation point (!) after a group indicates that the group must produce at least one value;
226+
<li>An exclamation point (<dfn id='mult-req'>!</dfn>) after a group indicates that the group is required
227+
and must produce at least one value;
227228
even if the grammar of the items within the group would otherwise allow the entire contents to be omitted,
228229
at least one component value must not be omitted.
229230
</ul>

‎css-values/Overview.html‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -317,14 +317,14 @@ <h3 class="heading settled heading" data-level=2.2 id=component-combinators><spa
317317

318318
<p>Component values can be arranged into property values as follows:</p>
319319

320-
<ul>
320+
<ul data-export="">
321321
<li>Juxtaposing components means that
322322
all of them must occur, in the given order.
323-
<li>A double ampersand (&amp;&amp;) separates two or more components,
323+
<li>A double ampersand (<dfn data-dfn-type=dfn data-export="" id=comb-all>&amp;&amp;<a class=self-link href=#comb-all></a></dfn>) separates two or more components,
324324
all of which must occur, in any order.
325-
<li>A double bar (||) separates two or more options:
325+
<li>A double bar (<dfn data-dfn-type=dfn data-export="" id=comb-any>||<a class=self-link href=#comb-any></a></dfn>) separates two or more options:
326326
one or more of them must occur, in any order.
327-
<li>A bar (|) separates two or more alternatives:
327+
<li>A bar (<dfn data-dfn-type=dfn data-export="" id=comb-one>|<a class=self-link href=#comb-one></a></dfn>) separates two or more alternatives:
328328
exactly one of them must occur.
329329
<li>Brackets ([ ]) are for grouping.
330330
</ul>
@@ -352,39 +352,40 @@ <h3 class="heading settled heading" data-level=2.3 id=component-multipliers><spa
352352
<p>Every type, keyword, or bracketed group may be followed by one of
353353
the following modifiers:</p>
354354

355-
<ul>
356-
<li>An asterisk (*) indicates that the preceding type, word, or
355+
<ul data-export="">
356+
<li>An asterisk (<dfn data-dfn-type=dfn data-export="" id=mult-zero-plus>*<a class=self-link href=#mult-zero-plus></a></dfn>) indicates that the preceding type, word, or
357357
group occurs zero or more times.
358358

359-
<li>A plus (+) indicates that the preceding type, word, or group
359+
<li>A plus (<dfn data-dfn-type=dfn data-export="" id=mult-one-plus>+<a class=self-link href=#mult-one-plus></a></dfn>) indicates that the preceding type, word, or group
360360
occurs one or more times.
361361

362-
<li>A question mark (?) indicates that the preceding type, word, or
362+
<li>A question mark (<dfn data-dfn-type=dfn data-export="" id=mult-opt>?<a class=self-link href=#mult-opt></a></dfn>) indicates that the preceding type, word, or
363363
group is optional (occurs zero or one times).
364364

365-
<li>A single number in curly braces ({<var>A</var>})
365+
<li>A single number in curly braces (<dfn data-dfn-type=dfn data-export="" id=mult-num>{<var>A</var>}<a class=self-link href=#mult-num></a></dfn>)
366366
indicates that the preceding type, word, or group occurs <var>A</var> times.
367367

368-
<li>A comma-separated pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
368+
<li>A comma-separated pair of numbers in curly braces (<dfn data-dfn-type=dfn data-export="" id=mult-num-range>{<var>A</var>,<var>B</var>}<a class=self-link href=#mult-num-range></a></dfn>)
369369
indicates that the preceding type, word, or group occurs at least
370370
<var>A</var> and at most <var>B</var> times.
371371
The <var>B</var> may be omitted ({<var>A</var>,})
372372
to indicate that there must be at least <var>A</var> repetitions,
373373
with no upper bound on the number of repetitions.
374374

375-
<li>A hash mark (#) indicates that the preceding type, word, or
375+
<li>A hash mark (<dfn data-dfn-type=dfn data-export="" id=mult-comma>#<a class=self-link href=#mult-comma></a></dfn>) indicates that the preceding type, word, or
376376
group occurs one or more times, separated by comma tokens
377377
(which may optionally be surrounded by white space and/or comments).
378378
It may optionally be followed by the curly brace forms, above,
379379
to indicate precisely how many times the repetition occurs,
380380
like <span class=css data-link-type=maybe title="<length>#{1,4}">&lt;length&gt;#{1,4}</span>.
381381

382-
<li>An exclamation point (!) after a group indicates that the group must produce at least one value;
382+
<li>An exclamation point (<dfn data-dfn-type=dfn data-export="" id=mult-req>!<a class=self-link href=#mult-req></a></dfn>) after a group indicates that the group is required
383+
and must produce at least one value;
383384
even if the grammar of the items within the group would otherwise allow the entire contents to be omitted,
384385
at least one component value must not be omitted.
385386
</ul>
386387

387-
<p>For repeated component values (indicated by <span class=css data-link-type=maybe title=*>*</span>, <span class=css data-link-type=maybe title=+>+</span>, or <span class=css data-link-type=maybe title=#>#</span>),
388+
<p>For repeated component values (indicated by <a class=css data-link-type=maybe href=#mult-zero-plus title=*>*</a>, <a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a>, or <a class=css data-link-type=maybe href=#mult-comma title=#>#</a>),
388389
UAs must support at least 20 repetitions of the component.
389390
If a property value contains more than the supported number of repetitions,
390391
the declaration must be ignored as if it were invalid.</p>
@@ -683,7 +684,7 @@ <h3 class="heading settled heading" data-level=4.1 id=integers><span class=secno
683684
An <dfn data-dfn-type=dfn data-noexport="" id=integer>integer<a class=self-link href=#integer></a></dfn> is one or more decimal digits <span class=css data-link-type=maybe title=0>0</span> through <span class=css data-link-type=maybe title=9>9</span>
684685
and corresponds to a subset of the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>">&lt;number-token&gt;</a> production
685686
in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>.
686-
The first digit of an integer may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <span class=css data-link-type=maybe title=+>+</span>
687+
The first digit of an integer may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a>
687688
to indicate the integer’s sign.</p>
688689

689690
<h3 class="heading settled heading" data-level=4.2 id=numbers><span class=secno>4.2 </span><span class=content>
@@ -694,7 +695,7 @@ <h3 class="heading settled heading" data-level=4.2 id=numbers><span class=secno>
694695
or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits.
695696
It corresponds to the <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-number-token title="<number-token>">&lt;number-token&gt;</a> production
696697
in the <a href=http://www.w3.org/TR/css-syntax/>CSS Syntax Module</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3syn title=biblio-css3syn>[CSS3SYN]</a>.
697-
As with integers, the first character of a number may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <span class=css data-link-type=maybe title=+>+</span>
698+
As with integers, the first character of a number may be immediately preceded by <span class=css data-link-type=maybe title=->-</span> or <a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a>
698699
to indicate the number’s sign.</p>
699700

700701
<h3 class="heading settled heading" data-level=4.3 id=percentages><span class=secno>4.3 </span><span class=content>
@@ -1167,7 +1168,7 @@ <h3 class="heading settled heading" data-level=8.1 id=calc-notation><span class=
11671168
Mathematical Expressions: <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a></span><a class=self-link href=#calc-notation></a></h3>
11681169

11691170
<p>The <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-calc>calc()<a class=self-link href=#funcdef-calc></a></dfn> function allows mathematical expressions
1170-
with addition (<span class=css data-link-type=maybe title=+>+</span>), subtraction (<span class=css data-link-type=maybe title=->-</span>), multiplication (<span class=css data-link-type=maybe title=*>*</span>), and division (<span class=css data-link-type=maybe title=/>/</span>)
1171+
with addition (<a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a>), subtraction (<span class=css data-link-type=maybe title=->-</span>), multiplication (<a class=css data-link-type=maybe href=#mult-zero-plus title=*>*</a>), and division (<span class=css data-link-type=maybe title=/>/</span>)
11711172
to be used as component values.
11721173
The <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expression represents the result of the mathematical calculation it contains,
11731174
using standard operator precedence rules.
@@ -1250,8 +1251,8 @@ <h4 class="heading settled heading" data-level=8.1.1 id=calc-syntax><span class=
12501251

12511252
<p data-noexport="">Where a <dfn class=css-code data-dfn-type=type data-noexport="" id=typedef-dimension>&lt;dimension&gt;<a class=self-link href=#typedef-dimension></a></dfn> is a <a data-link-type=dfn href=#dimension title=dimension>dimension</a>.
12521253

1253-
<p>In addition, whitespace is required on both sides of the <span class=css data-link-type=maybe title=+>+</span> and <span class=css data-link-type=maybe title=->-</span> operators.
1254-
(The <span class=css data-link-type=maybe title=*>*</span> and <span class=css data-link-type=maybe title=/>/</span> operaters can be used without whitespace around them.)</p>
1254+
<p>In addition, whitespace is required on both sides of the <a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a> and <span class=css data-link-type=maybe title=->-</span> operators.
1255+
(The <a class=css data-link-type=maybe href=#mult-zero-plus title=*>*</a> and <span class=css data-link-type=maybe title=/>/</span> operaters can be used without whitespace around them.)</p>
12551256

12561257
<p>UAs must support <a class=css data-link-type=maybe href=#funcdef-calc title=calc()>calc()</a> expressions of at least 20 terms,
12571258
where each <code>NUMBER</code>, <code>DIMENSION</code>, or <code>PERCENTAGE</code> is a term.
@@ -1291,7 +1292,7 @@ <h4 class="heading settled heading" data-level=8.1.2 id=calc-type-checking><span
12911292

12921293
<ul>
12931294
<li>
1294-
At <span class=css data-link-type=maybe title=+>+</span> or <span class=css data-link-type=maybe title=->-</span>,
1295+
At <a class=css data-link-type=maybe href=#mult-one-plus title=+>+</a> or <span class=css data-link-type=maybe title=->-</span>,
12951296
check that both sides have the same type,
12961297
or that one side is a <a class="production css-code" data-link-type=type href=#number-value title="<number>">&lt;number&gt;</a> and the other is an <a class="production css-code" data-link-type=type href=#integer-value title="<integer>">&lt;integer&gt;</a>.
12971298
If both sides are the same type,
@@ -1300,7 +1301,7 @@ <h4 class="heading settled heading" data-level=8.1.2 id=calc-type-checking><span
13001301
resolve to <a class="production css-code" data-link-type=type href=#number-value title="<number>">&lt;number&gt;</a>.
13011302

13021303
<li>
1303-
At <span class=css data-link-type=maybe title=*>*</span>,
1304+
At <a class=css data-link-type=maybe href=#mult-zero-plus title=*>*</a>,
13041305
check that at least one side is <a class="production css-code" data-link-type=type href=#number-value title="<number>">&lt;number&gt;</a>.
13051306
If both sides are <a class="production css-code" data-link-type=type href=#integer-value title="<integer>">&lt;integer&gt;</a>,
13061307
resolve to <a class="production css-code" data-link-type=type href=#integer-value title="<integer>">&lt;integer&gt;</a>.
@@ -1802,7 +1803,7 @@ <h2 class="no-num heading settled heading" id=changes><span class=content>
18021803
<li>Clarified relative URL resolution for embedded style sheets.
18031804
<li>Clarified {<var>A</var>} variant of {<var>A</var>,<var>B</var>} notation.
18041805
<li>Added notation for restricting the length of comma-separated lists
1805-
specified with the <span class=css data-link-type=maybe title=#>#</span> notation.
1806+
specified with the <a class=css data-link-type=maybe href=#mult-comma title=#>#</a> notation.
18061807
<li>Clarified handling of <a class=css data-link-type=maybe href=#funcdef-toggle title=toggle()>toggle()</a> when used in shorthand declarations.
18071808
<li>Clarified that stringing together re-orderable combinations allows interleaving.
18081809
<li>Changed syntax references from the 2.1 grammar to the Syntax spec.
@@ -1980,6 +1981,16 @@ <h3 class="no-num no-ref heading settled heading" id=informative><span class=con
19801981
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
19811982
Index</span><a class=self-link href=#index></a></h2>
19821983
<div data-fill-with=index><ul class=indexlist>
1984+
<li>||, <a href=#comb-any title="section 2.2">2.2</a>
1985+
<li>!, <a href=#mult-req title="section 2.3">2.3</a>
1986+
<li>#, <a href=#mult-comma title="section 2.3">2.3</a>
1987+
<li>+, <a href=#mult-one-plus title="section 2.3">2.3</a>
1988+
<li>*, <a href=#mult-zero-plus title="section 2.3">2.3</a>
1989+
<li>?, <a href=#mult-opt title="section 2.3">2.3</a>
1990+
<li>&amp;&amp;, <a href=#comb-all title="section 2.2">2.2</a>
1991+
<li>|, <a href=#comb-one title="section 2.2">2.2</a>
1992+
<li>{A}, <a href=#mult-num title="section 2.3">2.3</a>
1993+
<li>{A,B}, <a href=#mult-num-range title="section 2.3">2.3</a>
19831994
<li>absolute length, <a href=#absolute-length title="section 5.2">5.2</a>
19841995
<li>&lt;angle&gt;, <a href=#angle-value title="section 6.1">6.1</a>
19851996
<li>attr(), <a href=#funcdef-attr title="section 8.3">8.3</a>
@@ -2013,8 +2024,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
20132024
<li>&lt;length&gt;, <a href=#length-value title="section 5">5</a>
20142025
<li>mm, <a href=#mm title="section 5.2">5.2</a>
20152026
<li>ms, <a href=#ms title="section 6.2">6.2</a>
2016-
<li>number, <a href=#number title="section 4.2">4.2</a>
20172027
<li>&lt;number&gt;, <a href=#number-value title="section 4.2">4.2</a>
2028+
<li>number, <a href=#number title="section 4.2">4.2</a>
20182029
<li>pc, <a href=#pc title="section 5.2">5.2</a>
20192030
<li>&lt;percentage&gt;, <a href=#percentage-value title="section 4.3">4.3</a>
20202031
<li>percentage, <a href=#percentage title="section 4.3">4.3</a>

0 commit comments

Comments
 (0)