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:

<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>

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.

If you enjoyed this post, leaving a comment or subscribe to the RSS feed to have future articles delivered to your feed reader.

Steve Workman

Steve Workman is the Head of Web Engineering at Yell. He is also an organiser for London Web Standards is an occasional public speaker, talking about web performance and web standards

More Posts - Website - Twitter - Google Plus

Tags:

3 Comments

  1. bruce said:

    Good article Steve

    Your problem reminds me of the stylable forms problem. There aren’t CSS hooks into the new elements yet, because HTML 5 is a markup language, not a styling language. The CSS working groups won’t want to start specifying properties etc on a spec that’s still in flux.

    It would be nice to be able to do maths with the CSS. But you can style it to some extent. With the server, do the maths: so if your min is 0, your max is 75 and current value is 25, set an inline style to be width:33%. You can style a legend, I imagine, by using meter:before {content: attr(min);} and meter:after {content: attr(max);}

    Here’s a crappy example I knocked up in a couple of minutes http://people.opera.com/brucel/dev/html5-meter-style.html

    But I don’t have any moral objection to having to use JS to make the meter look all snazzy.

  2. axel said:

    I read the same article and played around with css only solutions (look at http://www.am530.de/lab/html5/meter.php). But even if it is possible to reach the styling goal in some browsers, it is not pratical at all. As long as you can’t calculate in CSS (which is in the draft – http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc), in combination with using of attribute values, CSS will never be the way to enhance the meter and / or progress element.
    Firefox 4.0 (http://hacks.mozilla.org/2010/06/css3-calc/) might be the first browser which can understand calculations, but if it is possible to use it together with attrs(), I don’t know.
    I think bruce is right, javascript (maybe in combination with canvas) will be the best way to handle the meter element for next few years.

Leave a response