[html5] implementation of meter and its attributes

Ian Hickson ian at hixie.ch
Mon Apr 6 11:31:22 PDT 2009

On Mon, 6 Apr 2009, Jacob Rask wrote:
> 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?

Assuming the votes range was fixed, it would be fine.

You would need to give explicit min="" and max="" values though; the 
defaults of 0 and 1 respectively wouldn't really fit the other attributes 
you give.

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

This kind of thing has been considered by the CSSWG, yes. I expect it'll 
happen in some future Selectors version (not any time soon).

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

The idea is that the browsers would support it natively. Until that 
happens, I wouldn't use it.

Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

More information about the Help mailing list