HTML5 Meters—Ready for Primetime?
© 2012, Martin Rinehart
HTML5 features three meter facilities: <meter> and <progress> for output and <input type='range'> for input. This page asks the question, "Are these HTML5 meters ready for primetime?".
The short answer is no. Sorry to say, the slightly longer answer is no, not for several years. Even then they may make cross-browser incompatibilities worse than ever.
HTML5 Meters in Your Browser
These samples use the actual HTML5 tags. What you see will depend on the browser you are using. (Use Chrome or Opera to see them all, in contemporary HTML5.)
The <meter> Tag
The <progress> Tag
Those are the HTML5 output meters, in your current browser. Next, we try the HTML5 input meter.
<input type='range'>
0.5
3
3.0
HTML5 Meter Screenshots
These screenshots were taken from the above samples (minus the text), using the specified browsers, all versions as of 7 August, 2012. These are actual sizes, all browsers adjusted to 100% zoom. Top-to-bottom these show the same tags used above: <meter>, <progress> and <input type='range'>.
As you can see, Chrome and Opera fully support the new meter types. Unfortunately, the size difference is so large that you will need separate stylesheets (at least) to support them both. Firefox as yet only supports the <progress> meter. IE 9 has no support for any of these HTML5 features. Microsoft's earlier browsers are stuck, for all time, in HTML4.
P.S. As of late May, 2013, IE9 supports <progress> and <input type='range'> but not <meter>. Firefox supports <meter> and <progress> but not <input type='range'>.
Lost in the screen shot, the Chrome <progress> meter features a slick gradient washing repeatedly from the low to the current value of the meter. This gives the eye a place to rest while whatever work is being completed. (If your design wants the viewer looking elsewhere, this may be the opposite of the effect you want. Don't tell us. Tell Google.)
Note: Safari and Chrome are both based on the Webkit rendering engine and both give similar results in many tests such as this one.
The Future
Let's look at the past. Last year the market share of IE6 dropped below one percent (in at least one important market-share tabulation). Many sites dropped IE6 support. IE6 was released in 2001 and lived for a full decade. What should we expect from IE7 and IE8?
IE7 now auto-updates to IE9. We may be free from IE7 within the next year or two. IE9 has added some HTML5 support, and may add more. Windows XP does not permit browser versions later than IE8, however so we will certainly have IE8 to contend with as long as we have XP. (If history repeats, we'll drop our last IE8 support in 2018.) So we have years ahead of us where any attempt to use HTML5 meters will have to be backed up with pages prepared for non-HTML5 meters, too.
Additionally, the HTML5 standard is silent on the question of display specifics. Today we need two different displays to accomodate Chrome and Opera, plus an additional option for Firefox, which supports one of the HTML5 meters. It looks like the era of cross-browser incompatibility is far from over.
Feedback: MartinRinehart at gmail dot com
# # #