I’m not sure why you’re asking that on this post, however, since CSS counters have nothing to do with preventing image extraction from pages.

Perhaps I wasn’t clear enough in my introduction that I intended to simply state how there are many examples of replacing JavaScript with CSS-based techniques, such as Eric Meyer’s early css/edge examples, and that the general trend of doing so can often be beneficial. I’ve no evidence that this particular technique is anything beyond kinda neat and definitely makes you think about CSS and its capabilities. :)

That said, benchmarks for this technique in particular would be interesting, too.

And “results in a more accessible page”? I think experience has shown us that we need to be very careful in assuming a new technique makes a page more accessible rather than less. If the text may not be selectable and may not appear in the DOM… how likely is it that it improves accessibility?

Sorry to seem catty. Its definitely cool :) but practical and useful? That remains to be seen.

ol:hover:after { /* display counters */ }

then you get a rollover for the “Number of items in this list” example. And you can certainly use sibling selectors, as long as the browser supports them and counters, of course.

You’re right, memco, that it’s kind of limited. I think this is partially by design and partially because CSS implementations just aren’t quite up to scratch yet. zachleat’s point about CSS expressions being less than perfect is also a good point, which is why I do think of this particular example as more of a theoretical showcase than anything for now. That said, I think the separation of content and presentation and, therefore, CSS expressions has more to do with design intent than it does technical ability, and from that perspective I don’t think CSS expressions should be universally considered a Bad Thing.

Wait, what?

Still, from a theoretical perspective, and a look at the sort of future potential this may hold, it’s quite interesting.