Report section style list numbering in CSS?

Question

Now I know about the "normal" CSS list styles (roman, latin, etc) and certainly in years past they were somewhat inflexible in not allowing things like:

(a)

or

a)

only

a.

Now I believe that you can get an effect like the above with the :before and :after pseudo-elements. Is that correct? And whats the browser compatibility like if you can?

My main question however is that I want to have report style numbering:

1. Introduction 1.1 Objectives 1.2 Assumptions 1.3 Limitations 1.3.1 ...
2. New Section ...

and so on.

Can CSS do this and, if so, whats the browser compatibility like?

Answer 1

See Generated content, automatic numbering, and lists.

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

H1:before {
 content: "Chapter " counter(chapter) ". ";
 counter-increment: chapter;  /* Add 1 to chapter */
 counter-reset: section;      /* Set section to 0 */
}
H2:before {
 content: counter(chapter) "." counter(section) " ";
 counter-increment: section;
}

Edit: quirksmode.org has a better table of css supports on browsers. Almost all browsers, except pre IE8b2 IEs. So yes, totally useless.

Answer 2

A simple markup example would be:

<ol>
 <li>level one</li>
 <ol start="10"> 
  <li>level two</li>
  <li>level two</li>
  <ol start="110">
   <li>level three</li>
  </ol> 
  <li>level two
 </ol> 
 <li>level one</li>
</ol>

The result of this is:

   1.  level one
        10. level two
        11. level two
             110. level three
        12. level two 
   2. level one

Browser support is fairly wide: MSIE6 complies. This is HTML 4.0

Answer 3

Here's the W3C specification for CSS2's automatic numbering and incrementing, with an example of 1.1, 1.2, 1.3 type numbering.

http://www.w3.org/TR/CSS2/generate.html#counters

I can't help you with the support question.