- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 18 Nov 2011 03:06:08 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv17014
Modified Files:
Overview.html Overview.src.html
Log Message:
Rewrite of several of the example to use reduced HTML. Slight tweaks to some examples.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.93
retrieving revision 1.94
diff -u -d -r1.93 -r1.94
--- Overview.html 18 Nov 2011 02:31:55 -0000 1.93
+++ Overview.html 18 Nov 2011 03:06:05 -0000 1.94
@@ -332,25 +332,15 @@
and style sheet:</p>
<pre>
-<!doctype html>
-<html>
- <head>
- <title>Creating a list with markers</title>
- <style>
- li<code
- class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
- li { display: list-item; }
- </style>
- </head>
- <body>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- </body>
-</html>
- </pre>
+<style>
+li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+li { display: list-item; }
+</style>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol></pre>
<p>should produce something like this:</p>
@@ -841,7 +831,8 @@
class=css>none</code></a>’ in the shorthand must be applied to
whichever of the two properties aren't otherwise set by the shorthand.
- <pre class="example css-example">
+ <div class=example>
+ <pre>
list-style: none disc;
/* Sets the image to "none" and the type to "disc". */
@@ -852,15 +843,16 @@
/* Sets both image and type to "none". */
list-style: none disc url(bullet.png);
-/* Syntax error */
- </pre>
+/* Syntax error */</pre>
+ </div>
<p>Although authors may specify ‘<a href="#list-style"><code
class=property>list-style</code></a>’ information directly on list
item elements (e.g., LI in HTML), they should do so with care. Consider
the following rules:
- <pre class=example>
+ <div class=example>
+ <pre>
ol.alpha li { list-style: lower-alpha; }
ul li { list-style: disc; }
/* These won't work as expected. If you nest a <ul>
@@ -875,6 +867,7 @@
ul { list-style: disc; }
/* So do these, since inheritance will transfer the
'list-style' value to the list items. */</pre>
+ </div>
<!-- ====================================================================== -->
<h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
@@ -904,33 +897,23 @@
<p>In the following example, the content is centered within a marker box
of a fixed width. This document:</p>
- <pre class=html-example>
-<!doctype html>
-<html>
- <head>
- <title>Content alignment in the marker box</title>
- <style>
- LI<code
- class=css>::marker</code> {
- content: "(" counter(counter) ")";
- width: 6em;
- text-align: center;
- }
- LI {
- display: list-item;
- counter-increment: counter;
- }
- </style>
- </head>
- <body>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- </body>
-</html>
- </pre>
+ <pre>
+<style>
+li::marker {
+ content: "(" counter(counter) ")";
+ width: 6em;
+ text-align: center;
+}
+li {
+ display: list-item;
+ counter-increment: counter;
+}
+</style>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol></pre>
<p>should render something like this:</p>
@@ -940,43 +923,32 @@
(2) This is the
second item.
(3) This is the
- third item.
- </pre>
+ third item.</pre>
</div>
- <p>The next example uses markers to number notes (paragraphs).
-
<div class=example>
- <p>The following document:</p>
+ <p>In this example, markers are used to number paragraphs that are
+ designated as "notes":</p>
- <pre class=html-example>
-<!doctype html>
-<html>
- <head>
- <title>Markers to create numbered notes</title>
- <style>
- P { margin-left: 12 em; }
- P.Note<code
- class=css>::marker</code> {
- content: url("note.gif") "Note " counter(note-counter) ":";
- text-align: left;
- width: 10em;
- }
- P.Note {
- display: list-item;
- counter-increment: note-counter;
- }
- </style>
- </head>
- <body>
- <p>This is the first paragraph in this document.</p>
- <p class="Note">This is a very short document.</p>
- <p>This is the end.</p>
- </body>
-</html>
+ <pre>
+<style>
+p { margin-left: 12 em; }
+p.note::marker {
+ content: "Note " counter(note-counter) ":";
+ text-align: left;
+ width: 10em;
+}
+p.note {
+ display: list-item;
+ counter-increment: note-counter;
+}
+</style>
+<p>This is the first paragraph in this document.</p>
+<p class="note">This is a very short document.</p>
+<p>This is the end.</p>
</pre>
- <p>should render something like this:</p>
+ <p>It should render something like this:</p>
<pre>
This is the first paragraph
@@ -985,53 +957,47 @@
Note 1: This is a very short
document.
- This is the end.
-</pre>
+ This is the end.</pre>
</div>
<div class=example>
- <p>The following example illustrates how markers may be offset from their
- element. This HTML application and style sheet:</p>
+ <p>By using the <code class=css>::marker</code> pseudo-element, a list's
+ markers can be positioned much more flexibly, and even be styled
+ independently from the text of the list item itself:</p>
- <pre class=html-example>
-<!doctype html>
-<html>
- <head>
- <title>Marker example</title>
- <style>
- P { margin-left: 8em } /* Make space for counters */
- LI<code
- class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
- LI { display: list-item }
- </style>
- </head>
- <body>
- <p>This is a long preceding paragraph ...</p>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- <p>This is a long following paragraph ...</p>
- </body>
-</html>
- </pre>
+ <pre>
+<style>
+p { margin-left: 8em } /* Make space for counters */
+li { list-style-type: lower-roman; }
+li::marker { margin: 0 3em 0 0; font-weight: bold; }
+</style>
+<p>This is a long preceding paragraph ...</p>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol>
+<p>This is a long following paragraph ...</p></pre>
- <p>should render something like this:</p>
+ <p>The preceding document should render something like this:</p>
<pre>
This is a long preceding
paragraph ...
- i. This is the first item.
- ii. This is the second item.
- iii. This is the third item.
+ <b>i.</b> This is the first item.
+ <b>ii.</b> This is the second item.
+ <b>iii.</b> This is the third item.
This is a long following
- paragraph ...
-</pre>
+ paragraph ...</pre>
- <p>(Note the use of the implicit counter increment.)</p>
+ <p>Previously the only way to style a marker was through inheritance; one
+ had to put the desired marker styling on the list item, and then revert
+ that on a wrapper element around the list item's actual contents.
+ Non-inherited properties like ‘<code
+ class=property>margin</code>’ couldn't be adjusted at all on the
+ marker.</p>
</div>
<!-- ====================================================================== -->
@@ -1078,14 +1044,11 @@
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
li<code
- class=css>::marker</code> { content: normal /* initial value */; }
- </pre>
+ class=css>::marker</code> { content: normal /* initial value */; }</pre>
<p>And the following document fragment:</p>
- <pre>
-<li>List Item</li>
- </pre>
+ <pre><li>List Item</li></pre>
<p>The computed value of the ‘<code
class=property>content</code>’ property on the <code
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.140
retrieving revision 1.141
diff -u -d -r1.140 -r1.141
--- Overview.src.html 18 Nov 2011 02:31:55 -0000 1.140
+++ Overview.src.html 18 Nov 2011 03:06:06 -0000 1.141
@@ -97,28 +97,18 @@
<div class="html-example">
- <p>For instance, the following example illustrates how markers may be used to add parentheses around
- each numbered list item. This HTML application and style sheet:</p>
+ <p>For instance, the following example illustrates how markers may be used to add parentheses around each numbered list item. This HTML application and style sheet:</p>
<pre>
-<!doctype html>
-<html>
- <head>
- <title>Creating a list with markers</title>
- <style>
- li<code class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
- li { display: list-item; }
- </style>
- </head>
- <body>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- </body>
-</html>
- </pre>
+<style>
+li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+li { display: list-item; }
+</style>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol></pre>
<p>should produce something like this: </p>
@@ -129,8 +119,7 @@
</pre>
</div>
- <p>With descendant selectors and child selectors, it's possible to specify different marker types
- depending on the depth of embedded lists.</p>
+ <p>With descendant selectors and child selectors, it's possible to specify different marker types depending on the depth of embedded lists.</p>
<p class="issue">A future release of this module will probably include ways to render tree
lists.</p>
@@ -231,6 +220,7 @@
<div class="example">
<p>The following example sets the marker at the beginning of each list item to
be the image "ellipse.png".</p>
+
<pre>LI { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
</div>
@@ -435,7 +425,8 @@
<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.</p>
- <pre class='example css-example'>
+ <div class='example'>
+ <pre>
list-style: none disc;
/* Sets the image to "none" and the type to "disc". */
@@ -446,13 +437,13 @@
/* Sets both image and type to "none". */
list-style: none disc url(bullet.png);
-/* Syntax error */
- </pre>
+/* Syntax error */</pre>
+ </div>
- <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:</p>
+ <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:</p>
- <pre class=example>
+ <div class=example>
+ <pre>
ol.alpha li { list-style: lower-alpha; }
ul li { list-style: disc; }
/* These won't work as expected. If you nest a <ul>
@@ -467,6 +458,7 @@
ul { list-style: disc; }
/* So do these, since inheritance will transfer the
'list-style' value to the list items. */</pre>
+ </div>
<!-- ====================================================================== -->
@@ -485,32 +477,23 @@
<p>In the following example, the content is centered within a marker
box of a fixed width. This document:</p>
- <pre class="html-example">
-<!doctype html>
-<html>
- <head>
- <title>Content alignment in the marker box</title>
- <style>
- LI<code class=css>::marker</code> {
- content: "(" counter(counter) ")";
- width: 6em;
- text-align: center;
- }
- LI {
- display: list-item;
- counter-increment: counter;
- }
- </style>
- </head>
- <body>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- </body>
-</html>
- </pre>
+ <pre>
+<style>
+li::marker {
+ content: "(" counter(counter) ")";
+ width: 6em;
+ text-align: center;
+}
+li {
+ display: list-item;
+ counter-increment: counter;
+}
+</style>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol></pre>
<p>should render something like this: </p>
@@ -520,43 +503,31 @@
(2) This is the
second item.
(3) This is the
- third item.
- </pre>
+ third item.</pre>
</div>
-
- <p>The next example uses markers to number notes (paragraphs).</p>
-
<div class="example">
- <p>The following document:</p>
+ <p>In this example, markers are used to number paragraphs that are designated as "notes":</p>
- <pre class="html-example">
-<!doctype html>
-<html>
- <head>
- <title>Markers to create numbered notes</title>
- <style>
- P { margin-left: 12 em; }
- P.Note<code class=css>::marker</code> {
- content: url("note.gif") "Note " counter(note-counter) ":";
- text-align: left;
- width: 10em;
- }
- P.Note {
- display: list-item;
- counter-increment: note-counter;
- }
- </style>
- </head>
- <body>
- <p>This is the first paragraph in this document.</p>
- <p class="Note">This is a very short document.</p>
- <p>This is the end.</p>
- </body>
-</html>
+ <pre>
+<style>
+p { margin-left: 12 em; }
+p.note::marker {
+ content: "Note " counter(note-counter) ":";
+ text-align: left;
+ width: 10em;
+}
+p.note {
+ display: list-item;
+ counter-increment: note-counter;
+}
+</style>
+<p>This is the first paragraph in this document.</p>
+<p class="note">This is a very short document.</p>
+<p>This is the end.</p>
</pre>
- <p>should render something like this:</p>
+ <p>It should render something like this:</p>
<pre>
This is the first paragraph
@@ -565,52 +536,40 @@
Note 1: This is a very short
document.
- This is the end.
-</pre>
+ This is the end.</pre>
</div>
<div class="example">
- <p>The following example illustrates how markers may be offset from their element. This HTML
- application and style sheet:</p>
+ <p>By using the <code class=css>::marker</code> pseudo-element, a list's markers can be positioned much more flexibly, and even be styled independently from the text of the list item itself:</p>
- <pre class="html-example">
-<!doctype html>
-<html>
- <head>
- <title>Marker example</title>
- <style>
- P { margin-left: 8em } /* Make space for counters */
- LI<code class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
- LI { display: list-item }
- </style>
- </head>
- <body>
- <p>This is a long preceding paragraph ...</p>
- <ol>
- <li>This is the first item.</li>
- <li>This is the second item.</li>
- <li>This is the third item.</li>
- </ol>
- <p>This is a long following paragraph ...</p>
- </body>
-</html>
- </pre>
+ <pre>
+<style>
+p { margin-left: 8em } /* Make space for counters */
+li { list-style-type: lower-roman; }
+li::marker { margin: 0 3em 0 0; font-weight: bold; }
+</style>
+<p>This is a long preceding paragraph ...</p>
+<ol>
+ <li>This is the first item.</li>
+ <li>This is the second item.</li>
+ <li>This is the third item.</li>
+</ol>
+<p>This is a long following paragraph ...</p></pre>
- <p>should render something like this: </p>
+ <p>The preceding document should render something like this: </p>
<pre>
This is a long preceding
paragraph ...
- i. This is the first item.
- ii. This is the second item.
- iii. This is the third item.
+ <b>i.</b> This is the first item.
+ <b>ii.</b> This is the second item.
+ <b>iii.</b> This is the third item.
This is a long following
- paragraph ...
-</pre>
+ paragraph ...</pre>
- <p>(Note the use of the implicit counter increment.)</p>
+ <p>Previously the only way to style a marker was through inheritance; one had to put the desired marker styling on the list item, and then revert that on a wrapper element around the list item's actual contents. Non-inherited properties like 'margin' couldn't be adjusted at all on the marker.</p>
</div>
<!-- ====================================================================== -->
@@ -636,16 +595,17 @@
<div class="example">
<p>Given the following style sheet:</p>
+
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
-li<code class=css>::marker</code> { content: normal /* initial value */; }
- </pre>
+li<code class=css>::marker</code> { content: normal /* initial value */; }</pre>
+
<p>And the following document fragment:</p>
- <pre>
-<li>List Item</li>
- </pre>
- <p>The computed value of the 'content' property on the <code class=css>::marker</code>
- pseudo-element of the list item element is:</p>
+
+ <pre><li>List Item</li></pre>
+
+ <p>The computed value of the 'content' property on the <code class=css>::marker</code> pseudo-element of the list item element is:</p>
+
<pre>counter(list-item, decimal) "."</pre>
</div>
Received on Friday, 18 November 2011 03:06:15 UTC