Skip to content

Commit 931f680

Browse files
tabatkinstabatkins
committed
Rewrite 'list-style' section.
1 parent 8178193 commit 931f680

2 files changed

Lines changed: 115 additions & 76 deletions

File tree

‎css3-lists/Overview.html‎

Lines changed: 60 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525

2626
<h1>CSS Lists and Counters Module Level 3</h1>
2727

28-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 August 2012</h2>
28+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 August 2012</h2>
2929

3030
<dl>
3131
<dt>This version:
3232

33-
<dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120818">http://www.w3.org/TR/2012/WD-css3-lists-20120818</a>-->
33+
<dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120820">http://www.w3.org/TR/2012/WD-css3-lists-20120820</a>-->
3434
<a
3535
href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
3636

@@ -689,7 +689,7 @@ <h2 id=list-style-position-property><span class=secno>4. </span> Marker
689689
<tr>
690690
<th>Computed Value:
691691

692-
<td>specified value
692+
<td>specified value (but see prose)
693693
</table>
694694

695695
<p> This property helps control the position of the ‘<code
@@ -836,7 +836,7 @@ <h2 id=list-style-property><span class=secno>5. </span> The ‘<a
836836
<td>see individual properties
837837
</table>
838838

839-
<p>The ‘<a href="#list-style"><code
839+
<p> The ‘<a href="#list-style"><code
840840
class=property>list-style</code></a>’ property is a shorthand notation
841841
for setting the three properties ‘<a href="#list-style-type"><code
842842
class=property>list-style-type</code></a>’, ‘<a
@@ -847,15 +847,16 @@ <h2 id=list-style-property><span class=secno>5. </span> The ‘<a
847847
style sheet.
848848

849849
<div class=example>
850-
<p>For example:
850+
<p> For example:
851851

852852
<pre>
853-
UL { list-style: upper-roman inside } /* Any UL */
854-
UL UL { list-style: circle outside } /* Any UL child of a UL */
855-
</pre>
853+
<!--
854+
-->UL { list-style: upper-roman inside } /* Any UL */
855+
<!--
856+
-->UL UL { list-style: circle outside } /* Any UL child of a UL */</pre>
856857
</div>
857858

858-
<p>Using a value of ‘<a href="#list-style-type-none"><code
859+
<p> Using a value of ‘<a href="#list-style-type-none"><code
859860
class=css>none</code></a>’ in the shorthand is potentially ambiguous, as
860861
‘<a href="#list-style-type-none"><code class=css>none</code></a>’ is a
861862
valid value for both ‘<a href="#list-style-image"><code
@@ -867,41 +868,61 @@ <h2 id=list-style-property><span class=secno>5. </span> The ‘<a
867868
of the two properties aren't otherwise set by the shorthand.
868869

869870
<div class=example>
870-
<pre>
871-
list-style: none disc;
872-
/* Sets the image to "none" and the type to "disc". */
871+
<pre><!--
872+
-->list-style: none disc;
873+
<!--
874+
-->/* Sets the image to "none" and the type to "disc". */
875+
<!--
876+
-->
877+
<!--
878+
-->list-style: none url(bullet.png);
879+
<!--
880+
-->/* Sets the image to "url(bullet.png)" and the type to "none". */
881+
<!--
882+
-->
883+
<!--
884+
-->list-style: none;
885+
<!--
886+
-->/* Sets both image and type to "none". */
887+
<!--
888+
-->
889+
<!--
890+
-->list-style: none disc url(bullet.png);
891+
<!--
892+
-->/* Syntax error */</pre>
893+
</div>
873894

874-
list-style: none url(bullet.png);
875-
/* Sets the image to "url(bullet.png)" and the type to "none". */
895+
<div class=example>
896+
<p> Although authors may specify ‘<a href="#list-style"><code
897+
class=property>list-style</code></a>’ information directly on list item
898+
elements (e.g., <code>&lt;li></code> in HTML), they should do so with
899+
care. Consider the following rules:
876900

877-
list-style: none;
878-
/* Sets both image and type to "none". */
901+
<pre><!--
902+
-->ol.alpha li { list-style: lower-alpha; }
903+
<!--
904+
-->ul li { list-style: disc; }</pre>
879905

880-
list-style: none disc url(bullet.png);
881-
/* Syntax error */</pre>
882-
</div>
906+
<p> The above won't work as expected. If you nest a <code>&lt;ul></code>
907+
into an <code>&lt;ol class=alpha></code>, the first rule's specificity
908+
will make the <code>&lt;ul></code>&apos;s list items use the lower-alpha
909+
style.
883910

884-
<p>Although authors may specify ‘<a href="#list-style"><code
885-
class=property>list-style</code></a>’ information directly on list item
886-
elements (e.g., LI in HTML), they should do so with care. Consider the
887-
following rules:
911+
<pre><!--
912+
-->ol.alpha > li { list-style: lower-alpha; }
913+
<!--
914+
-->ul > li { list-style: disc; }</pre>
888915

889-
<div class=example>
890-
<pre>
891-
ol.alpha li { list-style: lower-alpha; }
892-
ul li { list-style: disc; }
893-
/* These won't work as expected. If you nest a &lt;ul>
894-
into an &lt;ol class=alpha>, the first rule's specificity
895-
will make the &lt;ul>'s list items use the lower-alpha style. */
896-
897-
ol.alpha > li { list-style: lower-alpha; }
898-
ul > li { list-style: disc; }
899-
/* These work as intended. */
900-
901-
ol.alpha { list-style: lower-alpha; }
902-
ul { list-style: disc; }
903-
/* So do these, since inheritance will transfer the
904-
'list-style' value to the list items. */</pre>
916+
<p> These work as intended.
917+
918+
<pre><!--
919+
-->ol.alpha { list-style: lower-alpha; }
920+
<!--
921+
-->ul { list-style: disc; }</pre>
922+
923+
<p> These are even better, since inheritance will transfer the ‘<a
924+
href="#list-style"><code class=property>list-style</code></a>’ value to
925+
the list items.
905926
</div>
906927
<!-- ====================================================================== -->
907928

‎css3-lists/Overview.src.html‎

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -453,54 +453,72 @@ <h2 id='list-style-property'>
453453
<td>see individual properties
454454
</table>
455455

456-
<p>The 'list-style' property is a shorthand notation for setting the
457-
three properties 'list-style-type', 'list-style-image', and 'list-style-position'
458-
at the same place in the style sheet.
456+
<p>
457+
The 'list-style' property is a shorthand notation
458+
for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position'
459+
at the same place in the style sheet.
459460

460461
<div class="example">
461-
<p>For example:
462+
<p>
463+
For example:
462464

463-
<pre>
464-
UL { list-style: upper-roman inside } /* Any UL */
465-
UL UL { list-style: circle outside } /* Any UL child of a UL */
466-
</pre>
465+
<pre>&#xa;<!--
466+
-->UL { list-style: upper-roman inside } /* Any UL */&#xa;<!--
467+
-->UL UL { list-style: circle outside } /* Any UL child of a UL */</pre>
467468
</div>
468469

469-
<p>Using a value of ''none'' in the shorthand is potentially ambiguous, as ''none'' is a valid value for both 'list-style-image' and 'list-style-type'. To resolve this ambiguity, a value of ''none'' in the shorthand must be applied to whichever of the two properties aren't otherwise set by the shorthand.
470+
<p>
471+
Using a value of ''none'' in the shorthand is potentially ambiguous,
472+
as ''none'' is a valid value for both 'list-style-image' and 'list-style-type'.
473+
To resolve this ambiguity,
474+
a value of ''none'' in the shorthand must be applied to whichever of the two properties aren't otherwise set by the shorthand.
470475

471476
<div class='example'>
472-
<pre>
473-
list-style: none disc;
474-
/* Sets the image to "none" and the type to "disc". */
475-
476-
list-style: none url(bullet.png);
477-
/* Sets the image to "url(bullet.png)" and the type to "none". */
478-
479-
list-style: none;
480-
/* Sets both image and type to "none". */
481-
482-
list-style: none disc url(bullet.png);
483-
/* Syntax error */</pre>
477+
<pre><!--
478+
-->list-style: none disc;&#xa;<!--
479+
-->/* Sets the image to "none" and the type to "disc". */&#xa;<!--
480+
-->&#xa;<!--
481+
-->list-style: none url(bullet.png);&#xa;<!--
482+
-->/* Sets the image to "url(bullet.png)" and the type to "none". */&#xa;<!--
483+
-->&#xa;<!--
484+
-->list-style: none;&#xa;<!--
485+
-->/* Sets both image and type to "none". */&#xa;<!--
486+
-->&#xa;<!--
487+
-->list-style: none disc url(bullet.png);&#xa;<!--
488+
-->/* Syntax error */</pre>
484489
</div>
485490

486-
<p>Although authors may specify 'list-style' information directly on list item elements (e.g., LI in HTML), they should do so with care. Consider the following rules:
487491

488492
<div class=example>
489-
<pre>
490-
ol.alpha li { list-style: lower-alpha; }
491-
ul li { list-style: disc; }
492-
/* These won't work as expected. If you nest a &lt;ul>
493-
into an &lt;ol class=alpha>, the first rule's specificity
494-
will make the &lt;ul>'s list items use the lower-alpha style. */
495-
496-
ol.alpha > li { list-style: lower-alpha; }
497-
ul > li { list-style: disc; }
498-
/* These work as intended. */
499-
500-
ol.alpha { list-style: lower-alpha; }
501-
ul { list-style: disc; }
502-
/* So do these, since inheritance will transfer the
503-
'list-style' value to the list items. */</pre>
493+
<p>
494+
Although authors may specify 'list-style' information directly on list item elements
495+
(e.g., <code>&lt;li></code> in HTML),
496+
they should do so with care.
497+
Consider the following rules:
498+
499+
<pre><!--
500+
-->ol.alpha li { list-style: lower-alpha; }&#xa;<!--
501+
-->ul li { list-style: disc; }</pre>
502+
503+
<p>
504+
The above won't work as expected.
505+
If you nest a <code>&lt;ul></code> into an <code>&lt;ol class=alpha></code>,
506+
the first rule's specificity will make the <code>&lt;ul></code>&apos;s list items use the lower-alpha style.
507+
508+
<pre><!--
509+
-->ol.alpha > li { list-style: lower-alpha; }&#xa;<!--
510+
-->ul > li { list-style: disc; }</pre>
511+
512+
<p>
513+
These work as intended.
514+
515+
<pre><!--
516+
-->ol.alpha { list-style: lower-alpha; }&#xa;<!--
517+
-->ul { list-style: disc; }</pre>
518+
519+
<p>
520+
These are even better,
521+
since inheritance will transfer the 'list-style' value to the list items.
504522
</div>
505523

506524

0 commit comments

Comments
 (0)