My problem with HTML 5 - Styling <meter>

I consider myself quite a forward-looking chap. Apart from the occasional glance backwards to see IE6 still behind me and throw it some pity code every now and again, I try and use the latest technology and techniques whenever I can.

Looking forward then, to HTML 5, I'm met with a lot of optimism. These new elements, accessible web forms, canvas, SVG, are all going to save me a lot of trouble in the future and will generally make the Internet experience better.

I recently had a read of the HTML 5 doctor blog and am excited to see what's going on. However, reading the Measure up with the meter tag article, my brain did a backflip and my mouth said "Wuh?! How'd they do that?"

I'm refering to a specific part of the article where author Tom Leadbetter shows off some meter tags and the JustGiving web site saying "we could use meter here" (linked image below)

He also shows the code that goes below it, reproduced and corrected for the example here:

Target

245

Amount raised so far

185

What I was thinking at this point was, "how on earth is that possible using those tags? Surely that's not posssible." So, I set about trying to prove that it was possible...

It's not

See my attempt to style the meter tag. (works in Opera, Firefox and Safari)

The fundamental issue is that using CSS and HTML5 alone, you do not have access to values of attributes that you can use again to set CSS properties. My main issue is that this is trivial in javascript, as demonstrated on the demo page.

There are some potential CSS modules that can help in this respect, namely CSS Variables and CSS Math. I am also oblivious to the power of canvas and SVG, so if anyone can give me an answer using those I'd be very pleased.

I like the idea of HTML 5 but actually styling these new elements is going to be a real challenge. So, community at large, how do you solve this one?

Update: I submitted this to the W3 CSS Working Group and got some very good responses. Principally, as Bruce commented, I should be using the CSS3 Values attr() element to access values of properties and do the math, then use the generated content module to put the graphic in the right place. Their main concern is that you'd have to use "s/#meter::after/#meter::after::after" as a selector, which isn't supported by anything right now, and background clipping is a bit dodgy too.

Brad Kemper did a quick mock-up which will work on webkit nightlies. I would update my demo to show what the CSS WG guys were doing, but nothing works, it's all theory at the moment. Lets hope for more soon.

HTML5