Thanks to David Baron Mozilla now has support for CSS counters. You can see a nice testcase here: the 'content' property. This is of course great news as it brings Mozilla closer to being fully compliant to CSS 2.1. Lots of interesting things have been added in the past few weeks like outline and cursor:url(). In order to understand counters the best thing you can currently do is studying examples. Like the one I mentioned and for example this one counting headers. For the few people who like to read specifications: don’t. As the implementation of Mozilla is post specification-compliant the specification itself can only confuse you. This might also mean that there are some bugs in Opera’s implementation as the one of Mozilla is based on the CSS WG consensus of a few weeks ago.
Anyway, aren’t counters actually semantic?
Anne, in my very strict opinion, the content property with pure text as value is semantic enough to be laid out of the scope of styling. But counters represents only the structure of the document, like in the example with headings. It is handy for marking repeated elements as of one kind, like more important paragraphs (in some ordered) in the set of less important - there is no proper markup for it. And semantic is still sustained via atribute (i.e. class).
pi
It is a nice, and long awaited, addition. Obviously Opera and Gecko disagree a bit, I guess Opera's implementation reflects the current css2.1 CR, while Gecko is looking more into the future.
And it is fun to play with. I tried to use it to improve the XUL interface (numbering of tabs), but that didn't seem to work, unfortunately.
Counters are semantic (for an ol), but you can't manipulate them through html, the start attribute being pased out. Which is where the counter property comes into play.
Good news!
I don't agree that counter are semantic, though. We don't have different elements or attributes for making unordered lists with round or square bullets. We don't have different elements or attributes for making ordered lists with decimal, alphabetical, Roman, etc. numbering. So why should the actual numbers be more semantic?
The <li> is semantic, because it indicates a list item. The list marker is just an adornment. We don't change the meaning of it by starting to count at 100 instead of 1.
Tommy, we do, actually. What if it was part of some “Top 10” list? However, that last line was only meant half-serious.
@Philippe
The XUL problem might be Bug 232546.
Very good news. I could not be more glad. Or rather — I could: I wish positioning and floating of generated content follows this development very, very soon. Perhaps then I won't have to add hacks for Mozilla, or at least stop mildly regretting I have not added them ;)
I know you didn't ment this seriously, but ...
I don't think counters can be regarded as semantic additions to a document. They are available in the stylsheet but not as actual content.
In the example given above, the top 10 list, all meaning would be lost when viewed without stylesheets or with a text based browser.
If you would need such a list, than the numbers should be available in the HTML file.
Stylesheets certainly add possibilities for optimizing maintenance of long lists or headers in documents but they add functionality (like adding the url after a link when printing a document from a website) not meaning to the document.
If you would need such a list, than the numbers should be available in the HTML file.
I don't quite understand what you mean by that. Take this code:
<ol> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ol>
Where are the numbers?
I often write stories in DOCTYPE markup and present them as XML with CSS in a browser for reading. Being able to number the chapters without having to physically put a number in each <chapter>'s <title> element is very important as some chapters may be switched around later on, new chapters added, and some removed. It would be as nightmarish to keep all the chapter numbers up to date as it would be to manage an ordered list written with numbers and <br>s.
Also, as Aankhen said about the <li>, the numbers aren't in the markup. It's up to the "browser" to interperate and add them, and CSS does just that.