Mezzoblue
6th Nov 2006, 12:02 pm
You might assume, having written a book on the subject, that I would be intimately familiar with all the ins and outs of the CSS spec. But since I usually keep my focus on the practical bits that actually work today, that's not necessarily so. Sometimes I get to thinking I'd really like some way to do x with CSS, and it turns out it's actually been around for the better part of a decade.
For example, every time I style an ordered list I wish there were some way to style list item counters independently of the content. Sure you could wrap extra markup around the content to achieve that somewhat, but it's not always practical and rarely desirable.
But, there is a way. There's the counter-increment and counter-reset properties. As a part of generated content (http://www.w3.org/TR/REC-CSS2/generate.html#counters), I've simply overlooked them. Turns out they're good at this sort of thing.
You take the style for a simple ordered list (see example) (http://mezzoblue.com/articles/supplements/2006/11/1/counter1.html):
ol { margin-left: 1.5em;}li { margin: 0.5em 0; list-style: upper-roman; list-style-position: inside;}And turn it into something a little fancier by taking control over those list items (see example) (http://mezzoblue.com/articles/supplements/2006/11/1/counter2.html):
ol { margin-left: 1.5em; counter-reset: steps;}li { margin: 0.5em 0; list-style: none; counter-increment: steps;}li:before { content: counter(steps, upper-roman) ". "; font: 11px "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif; color: #4e6672; float: left;}Of course it only works in Gecko-based browsers and Opera at the moment, so it's still useless for now.
My point isn't really to reveal this as something new, since many of you are likely to comment that you've known about it for years. It's just a nice surprise to find something exists that I often wish existed. Now I guess I can start wishing it were ready to use.
As a tangent, some will argue (not incorrectly) that generated content is a job for script. I suspect this example is a use case that exemplifies how it can be useful for general styling, in the spirit the spec intends; moving this kind of activity to script seems pointless.
More... (http://mezzoblue.com/archives/2006/11/01/counter_intu/)
For example, every time I style an ordered list I wish there were some way to style list item counters independently of the content. Sure you could wrap extra markup around the content to achieve that somewhat, but it's not always practical and rarely desirable.
But, there is a way. There's the counter-increment and counter-reset properties. As a part of generated content (http://www.w3.org/TR/REC-CSS2/generate.html#counters), I've simply overlooked them. Turns out they're good at this sort of thing.
You take the style for a simple ordered list (see example) (http://mezzoblue.com/articles/supplements/2006/11/1/counter1.html):
ol { margin-left: 1.5em;}li { margin: 0.5em 0; list-style: upper-roman; list-style-position: inside;}And turn it into something a little fancier by taking control over those list items (see example) (http://mezzoblue.com/articles/supplements/2006/11/1/counter2.html):
ol { margin-left: 1.5em; counter-reset: steps;}li { margin: 0.5em 0; list-style: none; counter-increment: steps;}li:before { content: counter(steps, upper-roman) ". "; font: 11px "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif; color: #4e6672; float: left;}Of course it only works in Gecko-based browsers and Opera at the moment, so it's still useless for now.
My point isn't really to reveal this as something new, since many of you are likely to comment that you've known about it for years. It's just a nice surprise to find something exists that I often wish existed. Now I guess I can start wishing it were ready to use.
As a tangent, some will argue (not incorrectly) that generated content is a job for script. I suspect this example is a use case that exemplifies how it can be useful for general styling, in the spirit the spec intends; moving this kind of activity to script seems pointless.
More... (http://mezzoblue.com/archives/2006/11/01/counter_intu/)