Recently in css Category

One of the very nice new features in Deer Park (the codename for Firefox 1.5 alpha) is that CSS counters are finally implemented!

Beware, though! If you try to use them following the examples in the current CSS 2.1 spec, they won't work! Apparently there is a new draft of CSS 2.1 coming out, and deer park implements counters that follow that draft.

All the examples out there on the net are based on the CSS spec. Since counters have never worked before, no one has written their own examples, just recycled things from the spec. They tend to look like this:

h1:before {
    content: counter(h1) ":"  /* display counter value */
    counter-increment: h1;  /* increment counter */
    counter-reset: h2 h3 h4;  /* reset other counters */
}

If you try this, all your h1 elements will be prefixed with the number 1. The counter-increment doesn't work if you do it this way. It has something obscure to do with the scope fo the counter-reset, but I didn't dig deep enough to try to understand what was going on.

To make it work, increment and reset your counters as part of the CSS styles for the tag itself, not as part of the :before pseudo-element. This code works, for example:

h1 {
    counter-increment: h1;
   counter-reset: h2 h3 h4;
}
h1:before {
    content: counter(h1) ": ";
}

Happy counting!

[If you want to know more about why this all is, try this bugzilla entry. Comment #109 is a good starting point.

Thanks to Philippe Wittenbergh for putting me on the right track with this post.]