Skip to content

Commit 427dc85

Browse files
tabatkinstabatkins
committed
[css-values] Add a table of examples for the 2x3 common patterns.
1 parent d93b8e6 commit 427dc85

2 files changed

Lines changed: 79 additions & 4 deletions

File tree

‎css-values/Overview.bs‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,43 @@ Component value multipliers</h3>
233233
If a property value contains more than the supported number of repetitions,
234234
the declaration must be ignored as if it were invalid.
235235

236+
<h3 id='combinator-multiplier-patterns'>
237+
Combinator and Multiplier Patterns</h3>
238+
239+
There are a small set of common ways to combine multiple independent <a>component values</a> in particular numbers and orders.
240+
In particular, it's common to want to express that,
241+
from a set of component value,
242+
the author must select zero or more, one or more, or all of them,
243+
and in either the order specified in the grammar or in any order.
244+
245+
All of these can be easily expressed using simple patterns of <a href="#component-combinators">combinators</a> and <a href="#component-multipliers">multipliers</a>:
246+
247+
<table class='data'>
248+
<thead>
249+
<tr>
250+
<th>
251+
<th>in order
252+
<th>any order
253+
<tbody>
254+
<tr>
255+
<th>zero or more
256+
<td><pre>A? B? C?</pre>
257+
<td><pre> A? || B? || C?</pre>
258+
259+
<tr>
260+
<th>one or more
261+
<td><pre> [ A? B? C? ]!</pre>
262+
<td><pre>A || B || C</pre>
263+
264+
<tr>
265+
<th>all
266+
<td><pre>A B C </pre>
267+
<td><pre>A && B && C</pre>
268+
</table>
269+
270+
Note that all of the "any order" possibilities are expressed using combinators,
271+
while the "in order" possibilities are all variants on juxtaposition.
272+
236273
<h3 id="component-whitespace">
237274
Component values and white space</h3>
238275

‎css-values/Overview.html‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,9 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
126126
<li><a href=#component-types><span class=secno>2.1</span> Component value types</a>
127127
<li><a href=#component-combinators><span class=secno>2.2</span> Component value combinators</a>
128128
<li><a href=#component-multipliers><span class=secno>2.3</span> Component value multipliers</a>
129-
<li><a href=#component-whitespace><span class=secno>2.4</span> Component values and white space</a>
130-
<li><a href=#value-examples><span class=secno>2.5</span> Property value examples</a></ul>
129+
<li><a href=#combinator-multiplier-patterns><span class=secno>2.4</span> Combinator and Multiplier Patterns</a>
130+
<li><a href=#component-whitespace><span class=secno>2.5</span> Component values and white space</a>
131+
<li><a href=#value-examples><span class=secno>2.6</span> Property value examples</a></ul>
131132
<li><a href=#textual-values><span class=secno>3</span> Textual Data Types</a>
132133
<ul class=toc>
133134
<li><a href=#keywords><span class=secno>3.1</span> Pre-defined Keywords</a>
@@ -388,7 +389,44 @@ <h3 class="heading settled heading" data-level=2.3 id=component-multipliers><spa
388389
If a property value contains more than the supported number of repetitions,
389390
the declaration must be ignored as if it were invalid.</p>
390391

391-
<h3 class="heading settled heading" data-level=2.4 id=component-whitespace><span class=secno>2.4 </span><span class=content>
392+
<h3 class="heading settled heading" data-level=2.4 id=combinator-multiplier-patterns><span class=secno>2.4 </span><span class=content>
393+
Combinator and Multiplier Patterns</span><a class=self-link href=#combinator-multiplier-patterns></a></h3>
394+
395+
<p>There are a small set of common ways to combine multiple independent <a data-link-type=dfn href=http://dev.w3.org/csswg/css-syntax-3/#component-value title="component values">component values</a> in particular numbers and orders.
396+
In particular, it’s common to want to express that,
397+
from a set of component value,
398+
the author must select zero or more, one or more, or all of them,
399+
and in either the order specified in the grammar or in any order.</p>
400+
401+
<p>All of these can be easily expressed using simple patterns of <a href=#component-combinators>combinators</a> and <a href=#component-multipliers>multipliers</a>:</p>
402+
403+
<table class=data>
404+
<thead>
405+
<tr>
406+
<th>
407+
<th>in order
408+
<th>any order
409+
<tbody>
410+
<tr>
411+
<th>zero or more
412+
<td><pre>A? B? C?</pre>
413+
<td><pre> A? || B? || C?</pre>
414+
415+
<tr>
416+
<th>one or more
417+
<td><pre> [ A? B? C? ]!</pre>
418+
<td><pre>A || B || C</pre>
419+
420+
<tr>
421+
<th>all
422+
<td><pre>A B C </pre>
423+
<td><pre>A &amp;&amp; B &amp;&amp; C</pre>
424+
</table>
425+
426+
<p>Note that all of the "any order" possibilities are expressed using combinators,
427+
while the "in order" possibilities are all variants on juxtaposition.</p>
428+
429+
<h3 class="heading settled heading" data-level=2.5 id=component-whitespace><span class=secno>2.5 </span><span class=content>
392430
Component values and white space</span><a class=self-link href=#component-whitespace></a></h3>
393431

394432
<p>Unless otherwise specified,
@@ -405,7 +443,7 @@ <h3 class="heading settled heading" data-level=2.4 id=component-whitespace><span
405443
In this case, a space would be required before the <span class=css data-link-type=maybe title=2>2</span>
406444
to get this parsed as the two lengths <span class=css data-link-type=maybe title=1em>1em</span>and <span class=css data-link-type=maybe title=2em>2em</span>.</p>
407445

408-
<h3 class="heading settled heading" data-level=2.5 id=value-examples><span class=secno>2.5 </span><span class=content>
446+
<h3 class="heading settled heading" data-level=2.6 id=value-examples><span class=secno>2.6 </span><span class=content>
409447
Property value examples</span><a class=self-link href=#value-examples></a></h3>
410448

411449
<p>Below are some examples of properties with their corresponding value

0 commit comments

Comments
 (0)