- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 23 Jul 2011 01:18:02 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-lists
In directory hutz:/tmp/cvs-serv26423
Modified Files:
Overview.html Overview.src.html
Log Message:
Rearranged and reworded parts of the -image/-type section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.html,v
retrieving revision 1.76
retrieving revision 1.77
diff -u -d -r1.76 -r1.77
--- Overview.html 23 Jul 2011 00:28:22 -0000 1.76
+++ Overview.html 23 Jul 2011 01:17:59 -0000 1.77
@@ -151,9 +151,8 @@
Declaring a List Item</a>
<li><a href="#marker-content"><span class=secno>3. </span> Marker Content:
- The ‘<code class=property>list-style-type</code>’ and
- ‘<code class=property>list-style-image</code>’ properties</a>
-
+ The ‘<code class=property>list-style-image</code>’ and
+ ‘<code class=property>list-style-type</code>’ properties</a>
<li><a href="#list-style-position-property"><span class=secno>4. </span>
Marker Position: The ‘<code
@@ -163,8 +162,8 @@
‘<code class=property>list-style</code>’ shorthand
property</a>
- <li><a href="#marker-pseudoelement"><span class=secno>6. </span> Markers:
- The ‘<code class=css>::marker</code>’ pseudo-element</a>
+ <li><a href="#marker-pseudo-element"><span class=secno>6. </span> Markers:
+ The <code class=css>::marker</code> pseudo-element</a>
<ul class=toc>
<li><a href="#content-property"><span class=secno>6.1. </span>
Generating the computed value of the ‘<code
@@ -334,7 +333,7 @@
<head>
<title>Creating a list with markers</title>
<style>
- li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+ li<code class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
</head>
@@ -372,12 +371,12 @@
class=css>list-item</code>’ or ‘<a
href="#inline-list-item"><code
class=css>inline-list-item</code></a>’ (defined later in this
- section). This, in addition to generating a ‘<code
- class=css>::marker</code>’ pseudo-element and enabling the
- properties described below for that element, causes that element to
- increment the list item counter ‘<code
- class=css>list-item</code>’. (This does not affect the specified or
- computed values of the counter properties.)
+ section). This, in addition to generating a <code
+ class=css>::marker</code> pseudo-element and enabling the properties
+ described below for that element, causes that element to increment the
+ list item counter ‘<code class=css>list-item</code>’. (This
+ does not affect the specified or computed values of the counter
+ properties.)
<p>The ‘<code class=css>list-item</code>’ counter is a real
counter, and can be directly affected using the ‘<code
@@ -431,11 +430,11 @@
<p>The ‘<a href="#inline-list-item"><code
class=css>inline-list-item</code></a>’ display value makes the
- element a list item, which means it can generate a ::marker
- pseudo-element. The element also affects the predefined ‘<code
- class=css>list-item</code>’ counter, as specified above. Otherwise,
- this display value is treated identically to ‘<code
- class=css>inline</code>’.
+ element a list item, which means it can generate a <code
+ class=css>::marker</code> pseudo-element. The element also affects the
+ predefined ‘<code class=css>list-item</code>’ counter, as
+ specified above. Otherwise, this display value is treated identically to
+ ‘<code class=css>inline</code>’.
<p class=note>This display value is silly, and only necessary because we
haven't yet defined ‘<code class=property>display</code>’ to
@@ -445,28 +444,27 @@
<!-- ====================================================================== -->
<h2 id=marker-content><span class=secno>3. </span> Marker Content: The
- ‘<a href="#list-style-type"><code
- class=property>list-style-type</code></a>’ and ‘<a
- href="#list-style-image"><code
- class=property>list-style-image</code></a>’ properties</h2>
+ ‘<a href="#list-style-image"><code
+ class=property>list-style-image</code></a>’ and ‘<a
+ href="#list-style-type"><code
+ class=property>list-style-type</code></a>’ properties</h2>
<table class=propdef>
<tbody>
<tr>
<th>Name:
- <td><dfn id=list-style-type>list-style-type</dfn>
+ <td><dfn id=list-style-image>list-style-image</dfn>
<tr>
<th>Value:
- <td><a href="#ltstring"><b><string></b></a> | <a
- href="#ltcounter-style"><b><counter-style></b></a> | none
+ <td><image> | none
<tr>
- <th>Initial:
+ <th>Initial
- <td>disc
+ <td>none
<tr>
<th>Applies To:
@@ -494,59 +492,42 @@
<td>specified value
</table>
- <p>When the ‘<a href="#list-style-image"><code
- class=property>list-style-image</code></a>’ property is ‘<a
- href="#none"><code class=css>none</code></a>’ or not a valid image,
- the ‘<a href="#list-style-type"><code
- class=property>list-style-type</code></a>’ property is instead used
- to construct the default contents of a list item's marker.
-
- <dl>
- <dt><dfn id=ltstring><string></dfn>
-
- <dd>The ‘<code class=css>::marker</code>’ pseudoelement must
- use the provided string as its default contents.
-
- <dt><dfn id=ltcounter-style><counter-style></dfn>
-
- <dd>
- <p>The ‘<code class=css>::marker</code>’ pseudoelement's
- default contents must be the value of the ‘<code
- class=css>list-item</code>’ counter, formatted according to the
- given counter style. Algorithms for formatting a value according to a
- counter style are given later in this spec.</p>
+ <p>The ‘<a href="#list-style-type"><code
+ class=property>list-style-type</code></a>’ property specifies an
+ image that will be used as the list marker. If the value resolves to a
+ valid image, the image must be used as the default contents of the <code
+ class=css>::marker</code> pseudo-element.
- <p>This specification defines a method for authors to create their own
- counter styles which may be used here. Additionally, many useful counter
- styles are predefined in the sections on <a
- href="#predefined-counters">Complex Counter Styles</a> and <a
- href="#ua-stylesheet">Predefined Counter Styles</a>.</p>
+ <p>If the value ‘<a href="#none"><code
+ class=css>none</code></a>’ is provided, or the <b><image></b>
+ doesn't resolve to a valid image, then the default contents are given by
+ ‘<a href="#list-style-type"><code
+ class=property>list-style-type</code></a>’ instead.
- <dt><dfn id=none>none</dfn>
+ <div class=example>
+ <p>The following example sets the marker at the beginning of each list
+ item to be the image "ellipse.png".</p>
- <dd>The ‘<code class=css>::marker</code>’ pseudoelement must
- have no default contents. This will suppress the creation of a marker
- unless the ‘<code class=css>::marker</code>’ has its contents
- specified directly through the ‘<code
- class=property>content</code>’ property.
- </dl>
+ <pre>LI { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
+ </div>
<table class=propdef>
<tbody>
<tr>
<th>Name:
- <td><dfn id=list-style-image>list-style-image</dfn>
+ <td><dfn id=list-style-type>list-style-type</dfn>
<tr>
<th>Value:
- <td><image> | none
+ <td><a href="#ltstring"><b><string></b></a> | <a
+ href="#ltcounter-style"><b><counter-style></b></a> | none
<tr>
- <th>Initial
+ <th>Initial:
- <td>none
+ <td>disc
<tr>
<th>Applies To:
@@ -574,23 +555,64 @@
<td>specified value
</table>
- <p>This property sets the image that will be used as the list item marker.
- When the <b><image></b> resolves to a valid image, it is used as the
- default contents of ‘<code class=css>::marker</code>’ instead
- of the value specified by ‘<a href="#list-style-type"><code
- class=property>list-style-type</code></a>’.
+ <p>When the ‘<a href="#list-style-image"><code
+ class=property>list-style-image</code></a>’ property is ‘<a
+ href="#none"><code class=css>none</code></a>’ or not a valid image,
+ the ‘<a href="#list-style-type"><code
+ class=property>list-style-type</code></a>’ property must instead
+ used to construct the default contents of a list item's marker.
- <p>If the value ‘<a href="#none"><code
- class=css>none</code></a>’ is provided, or the <b><image></b>
- doesn't resolve to a valid image, then the default contents are given by
- ‘<a href="#list-style-type"><code
- class=property>list-style-type</code></a>’ instead.
+ <dl>
+ <dt><dfn id=ltstring><string></dfn>
+
+ <dd>The <code class=css>::marker</code> pseudo-element must use the
+ provided string as its default contents.
+
+ <dt><dfn id=ltcounter-style><counter-style></dfn>
+
+ <dd>
+ <p>The <code class=css>::marker</code> pseudo-element's default contents
+ must be the value of the ‘<code class=css>list-item</code>’
+ counter, formatted according to the given counter style. Algorithms for
+ formatting a value according to a counter style are given later in this
+ spec.</p>
+
+ <p>This specification defines a method for authors to create their own
+ counter styles which may be used here. Additionally, many useful counter
+ styles are predefined in the sections on <a
+ href="#predefined-counters">Complex Counter Styles</a> and <a
+ href="#ua-stylesheet">Predefined Counter Styles</a>.</p>
+
+ <dt><dfn id=none>none</dfn>
+
+ <dd>The <code class=css>::marker</code> pseudo-element must have no
+ default contents. This will suppress the creation of a marker unless the
+ <code class=css>::marker</code> has its contents specified directly
+ through the ‘<code class=property>content</code>’ property.
+ </dl>
<div class=example>
- <p>The following example sets the marker at the beginning of each list
- item to be the image "ellipse.png".</p>
+ <p>The following examples illustrate how to set markers to various values:</p>
- <pre>LI { list-style-image: url("http://www.example.com/ellipse.png") }</pre>
+ <pre>
+ul { list-style-type: "★"; }
+/* Sets the marker to a "star" character */
+
+p.note {
+ display: list-item;
+ list-style-type: "Note:";
+ list-style-position: inside;
+}
+/* Gives note paragraphs a marker consisting of the string "Note:" */
+
+ol { list-style-type: upper-roman; }
+/* Sets all ordered lists to use the upper-roman counter-style
+ (<a href="#upper-roman">defined in this specification</a>) */
+
+ul { list-style-type: none; }
+/* Suppresses the marker entirely, unless list-style-image is specified
+ with a valid image, or the marker's contents are set explicitly via
+ the 'content' property. */</pre>
</div>
<!-- ====================================================================== -->
@@ -641,45 +663,45 @@
<td>specified value
</table>
- <p>This property specifies the position of the ‘<code
- class=css>::marker</code>’ pseudo-element's box in the <a
+ <p>This property specifies the position of the <code
+ class=css>::marker</code> pseudo-element's box in the <a
href="#list-item"><i>list item</i></a>. Values have the following
meanings:
<dl>
<dt><dfn id=inside>inside</dfn>
- <dd>The ‘<code class=css>::marker</code>’ pseudo-element is a
- ‘<code class=css>display:inline</code>’ element placed
- immediately before the ‘<code class=css>::before</code>’
- pseudo-element in the <a href="#list-item"><i>list
- item</i></a>‘<code class=css>s principle box, after which the
- element</code>’s content flows. Note that if there is no inline
- content, this will create a line box, just as content in an inline
- ‘<code class=css>::before</code>’ pseudo-element would. Also
- note that all the properties that apply to inline elements apply to the
- ‘<code class=css>::marker</code>’ pseudo-element in this
- state, and this ‘<code class=css>::marker</code>’ box
- participates in the inline box model in the normal manner.
+ <dd>The <code class=css>::marker</code> pseudo-element is a ‘<code
+ class=css>display:inline</code>’ element placed immediately before
+ the ‘<code class=css>::before</code>’ pseudo-element in the
+ <a href="#list-item"><i>list item</i></a>‘<code class=css>s
+ principle box, after which the element</code>’s content flows. Note
+ that if there is no inline content, this will create a line box, just as
+ content in an inline ‘<code class=css>::before</code>’
+ pseudo-element would. Also note that all the properties that apply to
+ inline elements apply to the <code class=css>::marker</code>
+ pseudo-element in this state, and this <code class=css>::marker</code>
+ box participates in the inline box model in the normal manner.
<dt><dfn id=outside>outside</dfn>
<dd>As ‘<a href="#inside"><code class=css>inside</code></a>’,
plus the ‘<code class=property>position</code>’ property on
- the ::marker pseudo-element must computer to ‘<code
- class=css>marker</code>’. The section on the new ‘<code
- class=property>marker</code>’ value for ‘<code
+ the <code class=css>::marker</code> pseudo-element must computer to
+ ‘<code class=css>marker</code>’. The section on the new
+ ‘<code class=property>marker</code>’ value for ‘<code
class=property>position</code>’ explains the consequences of this.
- Additionally, the base directionality of the ::marker pseudo-element
- (used as an input to the bidi resolution algorithm) must be taken from
- the marker's <a href="#marker-positioning-reference-element"><i>marker
- positioning reference element</i></a>.
+ Additionally, the base directionality of the <code
+ class=css>::marker</code> pseudo-element (used as an input to the bidi
+ resolution algorithm) must be taken from the marker's <a
+ href="#marker-positioning-reference-element"><i>marker positioning
+ reference element</i></a>.
</dl>
<p>Note that a marker is only generated if the computed value of the
‘<code class=property>content</code>’ property for the
- element's ‘<code class=css>::marker</code>’ pseudo-element is
- not ‘<a href="#none"><code class=css>none</code></a>’.
+ element's <code class=css>::marker</code> pseudo-element is not ‘<a
+ href="#none"><code class=css>none</code></a>’.
<div class=example>
<p>For example:
@@ -847,24 +869,25 @@
'list-style' value to the list items. */</pre>
<!-- ====================================================================== -->
- <h2 id=marker-pseudoelement><span class=secno>6. </span> Markers: The
- ‘<code class=css>::marker</code>’ pseudo-element</h2>
+ <h2 id=marker-pseudo-element><span class=secno>6. </span> Markers: The
+ <code class=css>::marker</code> pseudo-element</h2>
<p>Markers are created by setting an element's ‘<code
class=property>display</code>’ property to ‘<code
class=css>list-item</code>’ or ‘<a
href="#inline-list-item"><code
- class=css>inline-list-item</code></a>’. The ::marker pseudo-element
- is only created if the computed value of the ‘<code
- class=property>content</code>’ property for the pseudo-element is
- not ‘<a href="#none"><code class=css>none</code></a>’.
+ class=css>inline-list-item</code></a>’. The <code
+ class=css>::marker</code> pseudo-element is only created if the computed
+ value of the ‘<code class=property>content</code>’ property
+ for the pseudo-element is not ‘<a href="#none"><code
+ class=css>none</code></a>’.
<p>Just like other generated content, markers generate a box when they're
created, which has margins, border, padding, and everything else a box
normally has. Markers are placed at the beginning of their superior
- parent's content, before the ::before pseudo-element (if it exists).
- ::marker pseudoelements are inline by default, though certain values for
- ‘<a href="#list-style-position"><code
+ parent's content, before the ::before pseudo-element (if it exists). <code
+ class=css>::marker</code> pseudo-elements are inline by default, though
+ certain values for ‘<a href="#list-style-position"><code
class=property>list-style-position</code></a>’ on the list item can
make the marker box positioned, which can have an effect on the computed
value of display.
@@ -879,7 +902,7 @@
<head>
<title>Content alignment in the marker box</title>
<style>
- LI::marker {
+ LI<code class=css>::marker</code> {
content: "(" counter(counter) ")";
width: 6em;
text-align: center;
@@ -924,7 +947,7 @@
<title>Markers to create numbered notes</title>
<style>
P { margin-left: 12 em; }
- P.Note::marker {
+ P.Note<code class=css>::marker</code> {
content: url("note.gif") "Note " counter(note-counter) ":";
text-align: left;
width: 10em;
@@ -967,7 +990,7 @@
<title>Marker example</title>
<style>
P { margin-left: 8em } /* Make space for counters */
- LI::marker { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
+ LI<code class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
LI { display: list-item }
</style>
</head>
@@ -1005,11 +1028,11 @@
computed value of the ‘<code class=property>content</code>’
property</h3>
- <p>If a ‘<code class=css>::marker</code>’ pseudo-element has
- its ‘<code class=property>content</code>’ property set to
- ‘<code class=css>normal</code>’, the computed value of the
- marker's ‘<code class=property>content</code>’ property must
- be determined according to the following algorithm:
+ <p>If a <code class=css>::marker</code> pseudo-element has its ‘<code
+ class=property>content</code>’ property set to ‘<code
+ class=css>normal</code>’, the computed value of the marker's
+ ‘<code class=property>content</code>’ property must be
+ determined according to the following algorithm:
<ol>
<li>If the computed value of ‘<a href="#list-style-image"><code
@@ -1046,7 +1069,7 @@
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
-li::marker { content: normal /* initial value */; }
+li<code class=css>::marker</code> { content: normal /* initial value */; }
</pre>
<p>And the following document fragment:</p>
@@ -1056,9 +1079,8 @@
</pre>
<p>The computed value of the ‘<code
- class=property>content</code>’ property on the ‘<code
- class=css>::marker</code>’ pseudo-element of the list item element
- is:</p>
+ class=property>content</code>’ property on the <code
+ class=css>::marker</code> pseudo-element of the list item element is:</p>
<pre>counter(list-item, decimal) "."</pre>
</div>
@@ -1072,20 +1094,20 @@
this new value.
<p>The new positioning scheme defined in this section can be used on all
- elements, not just ::marker pseudo-elements. In some situations, such as
- legal proceedings or official minutes, the precise form that the list
- marker takes is a vital part of the content. It's not acceptable for the
- marker to change (from a custom-defined marker to a default bullet or
- alpha marker) just because the UA is not rendering CSS, or a server error
- is temporarily preventing the CSS file from being loaded, as the precise
- form of the marker is used to officially refer to that segment. The only
- way to guarantee that the marker will be rendered correctly, regardless of
- whether CSS is applied, is to specify the marker outside of CSS, directly
- in the document's markup. However, the page author may still want to style
- the marker in many of the ways that are available to them when using
- ordinary CSS-generated markers. To accomodate this, the new positioning
- scheme can be used to position the marker-in-content as if it were an
- ordinary CSS-generated marker.
+ elements, not just <code class=css>::marker</code> pseudo-elements. In
+ some situations, such as legal proceedings or official minutes, the
+ precise form that the list marker takes is a vital part of the content.
+ It's not acceptable for the marker to change (from a custom-defined marker
+ to a default bullet or alpha marker) just because the UA is not rendering
+ CSS, or a server error is temporarily preventing the CSS file from being
+ loaded, as the precise form of the marker is used to officially refer to
+ that segment. The only way to guarantee that the marker will be rendered
+ correctly, regardless of whether CSS is applied, is to specify the marker
+ outside of CSS, directly in the document's markup. However, the page
+ author may still want to style the marker in many of the ways that are
+ available to them when using ordinary CSS-generated markers. To accomodate
+ this, the new positioning scheme can be used to position the
+ marker-in-content as if it were an ordinary CSS-generated marker.
<h3 id=position-marker><span class=secno>7.1. </span> The ‘<code
class=css>marker</code>’ value for ‘<code
@@ -1226,15 +1248,16 @@
href="#marker-attachment0"><code
class=property>marker-attachment</code></a>’ property</h3>
- <p>By default, elements or ::marker pseudo-elements with ‘<code
- class=css>position:marker</code>’ position themselves according to
- their list item's directionality. However, if the list item is grouped
- with several other list items which may have different directionality (for
- example, multiple <li>s with different "dir" attributes in an <ol>
- in HTML), it is sometimes more useful to have all the markers line up on
- one side, so the author can specify a single "gutter" on that side and be
- assured that all the markers will lie in that gutter and be visible. The
- ‘<a href="#marker-attachment0"><code
+ <p>By default, elements or <code class=css>::marker</code> pseudo-elements
+ with ‘<code class=css>position:marker</code>’ position
+ themselves according to their list item's directionality. However, if the
+ list item is grouped with several other list items which may have
+ different directionality (for example, multiple <li>s with different
+ "dir" attributes in an <ol> in HTML), it is sometimes more useful to
+ have all the markers line up on one side, so the author can specify a
+ single "gutter" on that side and be assured that all the markers will lie
+ in that gutter and be visible. The ‘<a
+ href="#marker-attachment0"><code
class=property>marker-attachment</code></a>’ property defined in
this section allows an author to control this, switching list items to
positioning their markers based off the list container's directionality
@@ -1390,9 +1413,9 @@
string returned by the counter() or counters() functions. Instead, the
prefix and suffix are added by the algorithm that constructs the computed
value of the ‘<code class=property>contents</code>’ property
- for the ::marker pseudo-element. This also implies that the prefix and
- suffix always come from the specified counter-style, even if the actual
- representation is constructed by a fallback style.
+ for the <code class=css>::marker</code> pseudo-element. This also implies
+ that the prefix and suffix always come from the specified counter-style,
+ even if the actual representation is constructed by a fallback style.
<p>The general form of an ‘<code
class=css>@counter-style</code>’ rule is:
@@ -1957,10 +1980,10 @@
<p>The ‘<a href="#descdef-prefix"><code
class=property>prefix</code></a>’ descripter specifies a string that
is prepended to the marker representation. Prefixes are only added by the
- algorithm for constructing the default contents of the ::marker
- pseudo-element; the prefix is not added automatically when the counter()
- or counters() functions are used. Prefixes are added to the representation
- after negative signs.
+ algorithm for constructing the default contents of the <code
+ class=css>::marker</code> pseudo-element; the prefix is not added
+ automatically when the counter() or counters() functions are used.
+ Prefixes are added to the representation after negative signs.
<h3 id=counter-style-suffix><span class=secno>8.4. </span> Symbols after
the marker: the ‘<a href="#descdef-suffix"><code
@@ -1987,10 +2010,10 @@
<p>The ‘<a href="#descdef-suffix"><code
class=property>suffix</code></a>’ descripter specifies a string that
is appended to the marker representation. Suffixes are only added by the
- algorithm for constructing the default contents of the ::marker
- pseudo-element; the suffix is not added automatically when the counter()
- or counters() functions are used. Suffixes are added to the representation
- after negative signs.
+ algorithm for constructing the default contents of the <code
+ class=css>::marker</code> pseudo-element; the suffix is not added
+ automatically when the counter() or counters() functions are used.
+ Suffixes are added to the representation after negative signs.
<h3 id=counter-style-range><span class=secno>8.5. </span> Limiting the
counter scope: the ‘<a href="#descdef-range"><code
@@ -4289,7 +4312,7 @@
text-align: match-parent;
}
-li::marker {
+li<code class=css>::marker</code> {
display: inline;
margin-right: 1em;
text-align: end;
@@ -4322,8 +4345,8 @@
href="#lower-alpha"><code class=property>lower-alpha</code></a>’,
‘<a href="#upper-alpha"><code
class=property>upper-alpha</code></a>’, ‘<a href="#none"><code
- class=property>none</code></a>’). It does not include the ::marker
- pseudo element.
+ class=property>none</code></a>’). It does not include the <code
+ class=css>::marker</code> pseudo element.
<p>The Full profile contains everything.</p>
<!-- ====================================================================== -->
@@ -4349,8 +4372,8 @@
in this module when compared to CSS2.1.
<ol>
- <li>The ::marker pseudo-element has been introduced to allow styling of
- the list marker directly.
+ <li>The <code class=css>::marker</code> pseudo-element has been introduced
+ to allow styling of the list marker directly.
<li>The ‘<code class=css>marker</code>’ value for ‘<code
class=property>position</code>’ has been added, to allow elements
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-lists/Overview.src.html,v
retrieving revision 1.125
retrieving revision 1.126
diff -u -d -r1.125 -r1.126
--- Overview.src.html 23 Jul 2011 00:28:22 -0000 1.125
+++ Overview.src.html 23 Jul 2011 01:17:59 -0000 1.126
@@ -107,7 +107,7 @@
<head>
<title>Creating a list with markers</title>
<style>
- li::marker { content: "(" counter(list-item, lower-roman) ")"; }
+ li<code class=css>::marker</code> { content: "(" counter(list-item, lower-roman) ")"; }
li { display: list-item; }
</style>
</head>
@@ -143,7 +143,7 @@
<p>To declare a <dfn>list item</dfn>, the 'display'
property must be set to ''list-item'' or ''inline-list-item'' (defined
- later in this section). This, in addition to generating a ''::marker''
+ later in this section). This, in addition to generating a <code class=css>::marker</code>
pseudo-element and enabling the properties described below for that element,
causes that element to increment the list item counter ''list-item''.
(This does not affect the specified or computed values of the counter
@@ -184,7 +184,7 @@
</table>
<p>The ''inline-list-item'' display value makes the element a list item,
- which means it can generate a ::marker pseudo-element. The element also
+ which means it can generate a <code class=css>::marker</code> pseudo-element. The element also
affects the predefined ''list-item'' counter, as specified above. Otherwise,
this display value is treated identically to ''inline''.</p>
@@ -196,18 +196,18 @@
<!-- ====================================================================== -->
<h2 id='marker-content'>
-Marker Content: The 'list-style-type' and 'list-style-image' properties</h2>
+Marker Content: The 'list-style-image' and 'list-style-type' properties</h2>
<table class="propdef">
<tr>
<th>Name:
- <td><dfn>list-style-type</dfn>
+ <td><dfn>list-style-image</dfn>
<tr>
<th>Value:
- <td><b><string></b> | <b><counter-style></b> | none
+ <td><image> | none
<tr>
- <th>Initial:
- <td>disc
+ <th>Initial
+ <td>none
<tr>
<th>Applies To:
<td><i title="list item">list items</i>
@@ -225,44 +225,26 @@
<td>specified value
</table>
- <p>When the 'list-style-image' property is ''none'' or not a valid image,
- the 'list-style-type' property is instead used to construct the default
- contents of a list item's marker.</p>
-
- <dl>
- <dt><dfn><string></dfn></dt>
- <dd>The ''::marker'' pseudoelement must use the provided string as its default
- contents.</dd>
+ <p>The 'list-style-type' property specifies an image that will be used as the list marker. If the value resolves to a valid image, the image must be used as the default contents of the <code class=css>::marker</code> pseudo-element.</p>
- <dt><dfn><counter-style></dfn></dt>
- <dd>
- <p>The ''::marker'' pseudoelement's default contents must be the value of
- the ''list-item'' counter, formatted according to the given counter style.
- Algorithms for formatting a value according to a counter style are given
- later in this spec.</p>
- <p>This specification defines a method for authors to create their
- own counter styles which may be used here. Additionally, many
- useful counter styles are predefined in the sections on
- <a href="#predefined-counters">Complex Counter Styles</a> and
- <a href="#ua-stylesheet">Predefined Counter Styles</a>.</p>
- </dd>
+ <p>If the value ''none'' is provided, or the <b><image></b> doesn't resolve to a valid image, then the default contents are given by 'list-style-type' instead.</p>
- <dt><dfn>none</dfn></dt>
- <dd>The ''::marker'' pseudoelement must have no default contents. This will
- suppress the creation of a marker unless the ''::marker'' has its contents
- specified directly through the 'content' property.</dd>
- </dl>
+ <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>
<table class="propdef">
<tr>
<th>Name:
- <td><dfn>list-style-image</dfn>
+ <td><dfn>list-style-type</dfn>
<tr>
<th>Value:
- <td><image> | none
+ <td><b><string></b> | <b><counter-style></b> | none
<tr>
- <th>Initial
- <td>none
+ <th>Initial:
+ <td>disc
<tr>
<th>Applies To:
<td><i title="list item">list items</i>
@@ -280,17 +262,51 @@
<td>specified value
</table>
- <p>This property sets the image that will be used as the list item marker. When
- the <b><image></b> resolves to a valid image, it is used as the default contents
- of ''::marker'' instead of the value specified by 'list-style-type'.</p>
+ <p>When the 'list-style-image' property is ''none'' or not a valid image, the 'list-style-type' property must instead used to construct the default contents of a list item's marker.</p>
- <p>If the value ''none'' is provided, or the <b><image></b> doesn't resolve
- to a valid image, then the default contents are given by 'list-style-type' instead.</p>
+ <dl>
+ <dt><dfn><string></dfn></dt>
+ <dd>The <code class=css>::marker</code> pseudo-element must use the provided string as its default contents.</dd>
- <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>
+ <dt><dfn><counter-style></dfn></dt>
+ <dd>
+ <p>The <code class=css>::marker</code> pseudo-element's default contents must be the value of
+ the ''list-item'' counter, formatted according to the given counter style.
+ Algorithms for formatting a value according to a counter style are given
+ later in this spec.</p>
+ <p>This specification defines a method for authors to create their
+ own counter styles which may be used here. Additionally, many
+ useful counter styles are predefined in the sections on
+ <a href="#predefined-counters">Complex Counter Styles</a> and
+ <a href="#ua-stylesheet">Predefined Counter Styles</a>.</p>
+ </dd>
+
+ <dt><dfn>none</dfn></dt>
+ <dd>The <code class=css>::marker</code> pseudo-element must have no default contents. This will suppress the creation of a marker unless the <code class=css>::marker</code> has its contents specified directly through the 'content' property.</dd>
+ </dl>
+
+ <div class='example'>
+ <p>The following examples illustrate how to set markers to various values:</p>
+
+ <pre>
+ul { list-style-type: "★"; }
+/* Sets the marker to a "star" character */
+
+p.note {
+ display: list-item;
+ list-style-type: "Note:";
+ list-style-position: inside;
+}
+/* Gives note paragraphs a marker consisting of the string "Note:" */
+
+ol { list-style-type: upper-roman; }
+/* Sets all ordered lists to use the upper-roman counter-style
+ (<a href="#upper-roman">defined in this specification</a>) */
+
+ul { list-style-type: none; }
+/* Suppresses the marker entirely, unless list-style-image is specified
+ with a valid image, or the marker's contents are set explicitly via
+ the 'content' property. */</pre>
</div>
<!-- ====================================================================== -->
@@ -325,19 +341,19 @@
<td>specified value
</table>
- <p>This property specifies the position of the ''::marker'' pseudo-element's box
+ <p>This property specifies the position of the <code class=css>::marker</code> pseudo-element's box
in the <i>list item</i>. Values have the following meanings:</p>
<dl>
<dt><dfn>inside</dfn></dt>
- <dd>The ''::marker'' pseudo-element is a 'display:inline' element placed immediately before the ''::before'' pseudo-element in the <i>list item</i>'s principle box, after which the element's content flows. Note that if there is no inline content, this will create a line box, just as content in an inline ''::before'' pseudo-element would. Also note that all the properties that apply to inline elements apply to the ''::marker'' pseudo-element in this state, and this ''::marker'' box participates in the inline box model in the normal manner.</dd>
+ <dd>The <code class=css>::marker</code> pseudo-element is a 'display:inline' element placed immediately before the ''::before'' pseudo-element in the <i>list item</i>'s principle box, after which the element's content flows. Note that if there is no inline content, this will create a line box, just as content in an inline ''::before'' pseudo-element would. Also note that all the properties that apply to inline elements apply to the <code class=css>::marker</code> pseudo-element in this state, and this <code class=css>::marker</code> box participates in the inline box model in the normal manner.</dd>
<dt><dfn>outside</dfn></dt>
- <dd>As ''inside'', plus the 'position' property on the ::marker pseudo-element must computer to ''marker''. The section on the new 'marker' value for 'position' explains the consequences of this. Additionally, the base directionality of the ::marker pseudo-element (used as an input to the bidi resolution algorithm) must be taken from the marker's <i>marker positioning reference element</i>.</dd>
+ <dd>As ''inside'', plus the 'position' property on the <code class=css>::marker</code> pseudo-element must computer to ''marker''. The section on the new 'marker' value for 'position' explains the consequences of this. Additionally, the base directionality of the <code class=css>::marker</code> pseudo-element (used as an input to the bidi resolution algorithm) must be taken from the marker's <i>marker positioning reference element</i>.</dd>
</dl>
<p>Note that a marker is only generated if the computed value of the 'content'
- property for the element's ''::marker'' pseudo-element is not ''none''.</p>
+ property for the element's <code class=css>::marker</code> pseudo-element is not ''none''.</p>
<div class=example>
<p>For example:
@@ -467,15 +483,15 @@
<!-- ====================================================================== -->
-<h2 id='marker-pseudoelement'>
-Markers: The ''::marker'' pseudo-element</h2>
+<h2 id='marker-pseudo-element'>
+Markers: The <code class=css>::marker</code> pseudo-element</h2>
<p>Markers are created by setting an element's 'display' property to
- ''list-item'' or ''inline-list-item''. The ::marker pseudo-element is only created if
+ ''list-item'' or ''inline-list-item''. The <code class=css>::marker</code> pseudo-element is only created if
the computed value of the 'content' property for the pseudo-element is not
''none''.</p>
- <p>Just like other generated content, markers generate a box when they're created, which has margins, border, padding, and everything else a box normally has. Markers are placed at the beginning of their superior parent's content, before the ::before pseudo-element (if it exists). ::marker pseudoelements are inline by default, though certain values for 'list-style-position' on the list item can make the marker box positioned, which can have an effect on the computed value of display.</p>
+ <p>Just like other generated content, markers generate a box when they're created, which has margins, border, padding, and everything else a box normally has. Markers are placed at the beginning of their superior parent's content, before the ::before pseudo-element (if it exists). <code class=css>::marker</code> pseudo-elements are inline by default, though certain values for 'list-style-position' on the list item can make the marker box positioned, which can have an effect on the computed value of display.</p>
<div class="example">
<p>In the following example, the content is centered within a marker
@@ -487,7 +503,7 @@
<head>
<title>Content alignment in the marker box</title>
<style>
- LI::marker {
+ LI<code class=css>::marker</code> {
content: "(" counter(counter) ")";
width: 6em;
text-align: center;
@@ -533,7 +549,7 @@
<title>Markers to create numbered notes</title>
<style>
P { margin-left: 12 em; }
- P.Note::marker {
+ P.Note<code class=css>::marker</code> {
content: url("note.gif") "Note " counter(note-counter) ":";
text-align: left;
width: 10em;
@@ -576,7 +592,7 @@
<title>Marker example</title>
<style>
P { margin-left: 8em } /* Make space for counters */
- LI::marker { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
+ LI<code class=css>::marker</code> { margin: 0 3em 0 0; content: counter(list-item, lower-roman) "."; }
LI { display: list-item }
</style>
</head>
@@ -614,7 +630,7 @@
<h3 id='content-property'>
Generating the computed value of the 'content' property</h3>
- <p>If a ''::marker'' pseudo-element has its 'content' property set to ''normal'',
+ <p>If a <code class=css>::marker</code> pseudo-element has its 'content' property set to ''normal'',
the computed value of the marker's 'content' property must be determined
according to the following algorithm:</p>
@@ -634,13 +650,13 @@
<p>Given the following style sheet:</p>
<pre>
li { display: list-item; list-style-type: decimal /* initial value */; }
-li::marker { content: normal /* initial value */; }
+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 ''::marker''
+ <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>
@@ -655,7 +671,7 @@
value.</p>
<p>The new positioning scheme defined in this section can be used on all
- elements, not just ::marker pseudo-elements. In some situations, such as
+ elements, not just <code class=css>::marker</code> pseudo-elements. In some situations, such as
legal proceedings or official minutes, the precise form that the list marker
takes is a vital part of the content. It's not acceptable for the marker to
change (from a custom-defined marker to a default bullet or alpha marker)
@@ -738,7 +754,7 @@
<h3 id='marker-attachment'>
The 'marker-attachment' property</h3>
- <p>By default, elements or ::marker pseudo-elements with ''position:marker'' position themselves according to their list item's directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible. The 'marker-attachment' property defined in this section allows an author to control this, switching list items to positioning their markers based off the list container's directionality instead.</p>
+ <p>By default, elements or <code class=css>::marker</code> pseudo-elements with ''position:marker'' position themselves according to their list item's directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible. The 'marker-attachment' property defined in this section allows an author to control this, switching list items to positioning their markers based off the list container's directionality instead.</p>
<table class="propdef">
<tr>
@@ -842,7 +858,7 @@
<li>Return the representation.</li>
</ol>
- <p class='note'>Note that the prefix and suffix don't play a part in this algorithm. This is intentional; the prefix and suffix aren't part of the string returned by the counter() or counters() functions. Instead, the prefix and suffix are added by the algorithm that constructs the computed value of the 'contents' property for the ::marker pseudo-element. This also implies that the prefix and suffix always come from the specified counter-style, even if the actual representation is constructed by a fallback style.</p>
+ <p class='note'>Note that the prefix and suffix don't play a part in this algorithm. This is intentional; the prefix and suffix aren't part of the string returned by the counter() or counters() functions. Instead, the prefix and suffix are added by the algorithm that constructs the computed value of the 'contents' property for the <code class=css>::marker</code> pseudo-element. This also implies that the prefix and suffix always come from the specified counter-style, even if the actual representation is constructed by a fallback style.</p>
<p>The general form of an ''@counter-style'' rule is:</p>
@@ -1345,7 +1361,7 @@
<p>The 'prefix' descripter specifies a string that is prepended to the
marker representation. Prefixes are only added by the algorithm for constructing
- the default contents of the ::marker pseudo-element; the prefix is not
+ the default contents of the <code class=css>::marker</code> pseudo-element; the prefix is not
added automatically when the counter() or counters() functions are used.
Prefixes are added to the representation after negative signs.</p>
@@ -1367,7 +1383,7 @@
<p>The 'suffix' descripter specifies a string that is appended to the
marker representation. Suffixes are only added by the algorithm for constructing
- the default contents of the ::marker pseudo-element; the suffix is not
+ the default contents of the <code class=css>::marker</code> pseudo-element; the suffix is not
added automatically when the counter() or counters() functions are used.
Suffixes are added to the representation after negative signs.</p>
@@ -3229,7 +3245,7 @@
text-align: match-parent;
}
-li::marker {
+li<code class=css>::marker</code> {
display: inline;
margin-right: 1em;
text-align: end;
@@ -3251,7 +3267,7 @@
'list-style-image', and 'list-style-type' (but only the following
values: 'disc', 'circle, square', 'decimal', 'lower-roman',
'upper-roman', 'lower-alpha', 'upper-alpha', 'none'). It does not
- include the ::marker pseudo element.</p>
+ include the <code class=css>::marker</code> pseudo element.</p>
<p>The Full profile contains everything.</p>
@@ -3290,7 +3306,7 @@
compared to CSS2.1.</p>
<ol>
- <li>The ::marker pseudo-element has been introduced to allow styling of the list marker directly.</li>
+ <li>The <code class=css>::marker</code> pseudo-element has been introduced to allow styling of the list marker directly.</li>
<li>The ''marker'' value for 'position' has been added, to allow elements in the document to position themselves similarly to how markers do.</li>
Received on Saturday, 23 July 2011 01:18:11 UTC