Styling HTML5 elements

Hi all,

I've been looking at styling HTML 5 elements using CSS3 and have come across
some examples where it doesn't suffice.

A recent html5doctor.com post on the meter tag (
http://html5doctor.com/measure-up-with-the-meter-tag/) brought up some
issues with styling of such an element. I wrote a blog post about it here:
http://www.steveworkman.com/web-design/html-5-web-design/2009/my-problem-with-html-5-styling-meter/but
there's a brief summary below:

This code:
<dl>
<dt>Target</dt>
<dd><meter min=”245″ value=”245″ title=”pounds”>245</meter></dd>
<dt>Amount raised so far</dt>
<dd><meter min=”0″ max=”250″ value=”185″ title=”pounds”>185</meter></dd>
</dl>

should be able to produce this image:
http://html5doctor.com/wp-content/uploads/2009/08/just-giving-example.jpg

I could only get this far: http://download.steveworkman.com/meter.html and
that's only when using javascript.

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.

Does anyone in the group have an idea as to how you would produce this
image?

Many thanks,
Steve Workman

www.steveworkman.com