meter; the HTML5 element

I'm amazed at how often I still "discover" a new HTML5 element. I say discover because really they're all written down in specs. But then again, who reads specs for their enjoyment?

Today I discovered the meter-element (by first discovering the progress-element). They're essentially the same, except that <meter> also adds some sugary deliciousness in the form of colouring. It's here that you should note that IE10 (and higher) only support <progress> at the moment and not <meter>. So while both elements are rendered pretty much the same by browsers, it's the semantic meaning that you have to pick.

What makes <meter> cool

So what makes it cool, you ask? Well the sugary deliciousness that I mentioned.

The meter-element has your standard min and max attributes, but also low, high and optimum.

If you're using a supported browser for <meter> you will see the bar in the Result tab. I have added some JavaScript to update the bar with 5 units every 500 milliseconds. My bar is set up from 0 to 100, so it could be percentage based. You're of course free to choose any numbers.

If you're using IE or a specific mobile browser, you'll probably see the fallback message. This element falls back graciously and I even added some JavaScript to also update my fallback text. Although I later found out that meter.value is NaN, so you have to change the JS to be independent of that element.

For IE 10 and higher, you could also change the meter-element to a <progress>-element and it will work, even with the same JavaScript code. The low, high and optimum attributes won't do anything and as such you will have no colour, but still a cool progress bar in HTML5.

Automatic colouring

If you look at the HTML again, you can see how you're supposed to use the low, high and optimum attributes. These are your 'breaking points' for when the browser starts to make your bar red, yellow and green respectively. You can even use CSS to change the <meter>'s style, although this is still vendor prefixed.

My meter is using sensible breaking points at 30% (low) and 60% (high). But you can change this and for example, if you're using it as an Health Points bar, you might have the low on 10% and high on 40%.

To be honest, I'm not really sure why there is an optimum attribute, so far it doesn't really do anything. But all in all, a really cool HTML5 element that takes away so much manual work for you!