HTML5 Meter element examples

Example 1: CSS based implementation of the demonstration screenshot from the html5 meter element specification.

Suggested groups

Hide suggested groups

CSS based meter element styling, I used the html code and layout pecifications from the HTML5 (Edition for Web Authors) specification. Had to use a lot of CSS3 attributes for filtering the original source-code (the different colors of text and link elements) but the styling of the meter-tag itself is based on a simple usage of :before and :after. Tested on Firefox 3.6, Safari 4.0.3, Google Chrome 5.0.375, Opera 10.0, Internet Explorer 8 (no HTML5 , therefore IE does not show any "meter graphic", but fallback looks still fine).

Get the CSS

Example 2: CSS based meter styling, by using the suggestion of this html5doctor article.

Target
£250.00
Raised so far
£145.00
74%

Tom Leadbetter suggests a combination of a definition list and the meter element to code a something like this. I added the percentual display as another meter element and tried to style - this is how far I came (without images):

  • Firefox 3.6.3:looks fine, we have a glossy sphere, shadow and light effects
  • Safari 4: does not support inset shadow values at all, so no light effects, but still a sphere.
  • Chrome 5.0.3: does support inset shadow values, but it gets in conflict with the rounded corners, the inset shadow creates an ugly square around the complete sphere, so this should de disabled for chrome, therefore also no light effects here.
  • Opera 10.0: does not support rounded corners, so I receive a "boxy" variant, but you can still get the point.
  • Internet Explorer 8: does not support html5, you see a "text version" - acceptable but far from beeing beautiful.

To create something like this with pure css, and no images - not a good idea, a hell lot of CSS syntax with minimal browser support - see you back a few browser versions later I guess.

Get the CSS anyway

Example 3: CSS based gauge (using a background-image).

16

The speed-o-meter itself is a background image, all other elements (the needle, infobox) are "generated" via the pseudo-classes :before and :after. I use transformations to put the needle to the correct position, it seems that opera (version 10.0) doesn't take it. Safari, Chrome and Firefox do what I want.

Get the CSS

Working with a neat and clean CSS solution would be nice, but for fancy layouts browser support is too weak, and until you can't calculate in combination with attributes inside CSS these solutions are not practical at all. So what options do I have - I could implement a little serverside action to work with placeholders inside CSS, but this won't solve the problems with the styling. I could generate an bitmap graphic and load it instead (that would be so 1.0). I should have a look at Canvas, VML and Javascript as soon as possible...

Example 4: First try of a JQuery based meter solution

74% 50%

This example is based on the canvas element. Currently working on Firefox 3.6, Google Chrome 5.0.3 and Safari 4.0.3. Opera 10.0 supports most of it, but has problems with the text. In this draft of the JQuery plugin I did not find the time to implement VML logic for internet explorer, but you might want to use ie-canvas for testing. The plugin is far from beeing a real working one, it is more a proof of concept. Stay tuned - an improved version will follow soon.

Get the code anyway