csswg/css3-lists Overview.html,1.75,1.76 Overview.src.html,1.124,1.125

Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv21676

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Rewrote the list-style examples.  They were always far too big and verbose for my taste.


Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.75
retrieving revision 1.76
diff -u -d -r1.75 -r1.76
--- Overview.html	23 Jul 2011 00:09:30 -0000	1.75
+++ Overview.html	23 Jul 2011 00:28:22 -0000	1.76
@@ -795,7 +795,7 @@
 
    <pre>
 UL { list-style: upper-roman inside }  /* Any UL */
-UL > UL { list-style: circle outside } /* Any UL child of a UL */
+UL UL { list-style: circle outside } /* Any UL child of a UL */
 		</pre>
   </div>
 
@@ -813,13 +813,13 @@
 
   <pre class="example css-example">
 list-style: none disc;
-/* Sets the image to ''none'' and the type to ''disc''. */
+/* Sets the image to "none" and the type to "disc". */
 
 list-style: none url(bullet.png);
-/* Sets the image to ''url(bullet.png)'' and the type to ''none''. */
+/* Sets the image to "url(bullet.png)" and the type to "none". */
 
 list-style: none;
-/* Sets both image and type to ''none''. */
+/* Sets both image and type to "none". */
 
 list-style: none disc url(bullet.png);
 /* Syntax error */
@@ -827,66 +827,24 @@
 
   <p>Although authors may specify &lsquo;<a href="#list-style"><code
    class=property>list-style</code></a>&rsquo; information directly on list
-   item elements (e.g., LI in HTML), they should do so with care. The
-   following rules look similar, but the first declares a descendant selector
-   and the second a (more specific) child selector.
-
-  <pre class=example>
-	OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
-	OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
-		</pre>
-
-  <p>Authors who use only the descendant selector may not achieve the results
-   they expect. Consider the following rules:
-
-  <pre class="example html-example">
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>WARNING: Unexpected results due to cascade&lt;/title>
-  &lt;style>
-    ol.alpha li { list-style: lower-alpha; }
-    ul li       { list-style: disc; }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol class=alpha>
-   &lt;li>level 1
-    &lt;ul>
-     &lt;li>level 2&lt;/li>
-    &lt;/ul>
-   &lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-	</pre>
-
-  <p>The desired rendering would have level 1 list items with &lsquo;<a
-   href="#lower-alpha"><code class=property>lower-alpha</code></a>&rsquo;
-   labels and level 2 items with &lsquo;<a href="#disc"><code
-   class=property>disc</code></a>&rsquo; labels. However, the cascading order
-   will cause the first style rule (which includes specific class
-   information) to mask the second. The following rules solve the problem by
-   employing a child selector instead:
+   item elements (e.g., LI in HTML), they should do so with care. Consider
+   the following rules:
 
   <pre class=example>
-OL.alpha > LI   { list-style: lower-alpha }
-UL LI           { list-style: disc }
-</pre>
-
-  <p>Another solution would be to specify &lsquo;<a href="#list-style"><code
-   class=property>list-style</code></a>&rsquo; information only on the list
-   type elements:
+ol.alpha li { list-style: lower-alpha; }
+ul li       { list-style: disc; }
+/* These won't work as expected.  If you nest a &lt;ul>
+into an &lt;ol class=alpha>, the first rule's specificity 
+will make the &lt;ul>'s list items use the lower-alpha style. */
 
-  <pre class=example>
-OL.alpha   { list-style: lower-alpha }
-UL         { list-style: disc }
-</pre>
+ol.alpha > li { list-style: lower-alpha; }
+ul > li       { list-style: disc; }
+/* These work as intended. */
 
-  <p>Inheritance will transfer the &lsquo;<a href="#list-style"><code
-   class=property>list-style</code></a>&rsquo; values from OL and UL elements
-   to LI elements. This is the recommended way to specify list style
-   information.</p>
+ol.alpha { list-style: lower-alpha; }
+ul       { list-style: disc; }
+/* So do these, since inheritance will transfer the 
+'list-style' value to the list items. */</pre>
   <!-- ====================================================================== -->
 
   <h2 id=marker-pseudoelement><span class=secno>6. </span> Markers: The

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.124
retrieving revision 1.125
diff -u -d -r1.124 -r1.125
--- Overview.src.html	23 Jul 2011 00:09:30 -0000	1.124
+++ Overview.src.html	23 Jul 2011 00:28:22 -0000	1.125
@@ -425,7 +425,7 @@
 
 		<pre>
 UL { list-style: upper-roman inside }  /* Any UL */
-UL > UL { list-style: circle outside } /* Any UL child of a UL */
+UL UL { list-style: circle outside } /* Any UL child of a UL */
 		</pre>
 	</div>
 
@@ -433,72 +433,36 @@
 
 	<pre class='example css-example'>
 list-style: none disc;
-/* Sets the image to ''none'' and the type to ''disc''. */
+/* Sets the image to "none" and the type to "disc". */
 
 list-style: none url(bullet.png);
-/* Sets the image to ''url(bullet.png)'' and the type to ''none''. */
+/* Sets the image to "url(bullet.png)" and the type to "none". */
 
 list-style: none;
-/* Sets both image and type to ''none''. */
+/* Sets both image and type to "none". */
 
 list-style: none disc url(bullet.png);
 /* Syntax error */
 	</pre>
 
 	<p>Although authors may specify 'list-style' information directly on
-	list item elements (e.g., LI in HTML), they should do so with care. The following rules look
-	similar, but the first declares a descendant selector and the second a (more specific) child selector.</p>
-
-	<pre class="example">
-	OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
-	OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */
-		</pre>
-
-	<p>Authors who use only the descendant selector may not
-	achieve the results they expect. Consider the following rules:</p>
-
-	<pre class="example html-example">
-&lt;!doctype html>
-&lt;html>
- &lt;head>
-  &lt;title>WARNING: Unexpected results due to cascade&lt;/title>
-  &lt;style>
-    ol.alpha li { list-style: lower-alpha; }
-    ul li       { list-style: disc; }
-  &lt;/style>
- &lt;/head>
- &lt;body>
-  &lt;ol class=alpha>
-   &lt;li>level 1
-    &lt;ul>
-     &lt;li>level 2&lt;/li>
-    &lt;/ul>
-   &lt;/li>
-  &lt;/ol>
- &lt;/body>
-&lt;/html>
-	</pre>
-
-	<p>The desired rendering would have level 1 list items with 'lower-alpha' labels and level 2 items
-	with 'disc' labels. However, the cascading order will cause the first style rule (which includes
-	specific class information) to mask the second. The following rules solve the problem by employing a
-	child selector instead:</p>
-
-	<pre class="example">
-OL.alpha > LI   { list-style: lower-alpha }
-UL LI           { list-style: disc }
-</pre>
-
-	<p>Another solution would be to specify 'list-style' information only
-	on the list type elements:
+	list item elements (e.g., LI in HTML), they should do so with care.  Consider the following rules:</p>
+	
+	<pre class=example>
+ol.alpha li { list-style: lower-alpha; }
+ul li       { list-style: disc; }
+/* These won't work as expected.  If you nest a &lt;ul>
+into an &lt;ol class=alpha>, the first rule's specificity 
+will make the &lt;ul>'s list items use the lower-alpha style. */
 
-	<pre class="example">
-OL.alpha   { list-style: lower-alpha }
-UL         { list-style: disc }
-</pre>
+ol.alpha > li { list-style: lower-alpha; }
+ul > li       { list-style: disc; }
+/* These work as intended. */
 
-	<p>Inheritance will transfer the 'list-style' values from OL and UL
-	elements to LI elements. This is the recommended way to specify list style information.</p>
+ol.alpha { list-style: lower-alpha; }
+ul       { list-style: disc; }
+/* So do these, since inheritance will transfer the 
+'list-style' value to the list items. */</pre>
 
 
 <!-- ====================================================================== -->

Received on Saturday, 23 July 2011 00:28:29 UTC