[html5] implementation of meter and its attributes

Jacob Rask jacob at jacobrask.net
Mon Apr 6 02:56:03 PDT 2009

Not exactly a "help" post, but not a specs post either, so here it comes.

I've experimented a bit with a voting system (simply +/-), presenting
the results in a meter element like so:
<meter optimum="100" high="50" low="-10" value="1">+1</meter>

1) would this be a good and indented use for the element?

2) I've experimented further with some CSS styling.
For instance, meter[value='1'] { color: green; } and meter[value='-1']
{ color: red; }
Quite useful, at least if you would be able to use <> operators, which
isn't even supported in CSS3, right? For now, you would have to do
meter[value='1'], meter[value='2'], etc. Just consider the
possibilites of meter[value<=0] or something like that instead. Is
there any cross pollination between the WHATWG and CSS working groups?

Right now, I will probably use JavaScript to compare the meter value
with it's high/low/optimum values to see if it should have the class
"high", "low" or "medium"...

3) Do you have any other ideas on smart ways to use meters, with or
without CSS? I was considering something like meter { width:
attr(value)px; } but I didn't get that to work.

-- Jacob Rask

More information about the Help mailing list