HTML5 tag <meter> attributes -

there new tag called <meter> in html5 specification. has 3 attributes clear understand, functionality , visual effects not clear. high, low , optimum.

i saw meter elements in red or yellow color, , guess these colors related attributes. don't know how.

can describe me?

the spec doesn't specify colors. default styles, in firefox 22 , safari 6,

• if low < optimum < high:

  • if value < low or > high, displayed yellow,
  • otherwise green (optimum has not effect).

• if low < high < optimum:

  • if value < low, displayed red.
  • if value < high, displayed yellow.
  • otherwise green.

• if optimum < low < high:

  • if value > high, displayed red.
  • if value > low, displayed yellow.
  • otherwise green.

this spec said:

ua requirements regions of gauge: if optimum point equal low boundary or high boundary, or anywhere in between them, region between low , high boundaries of gauge must treated optimum region, , low , high parts, if any, must treated suboptimal. otherwise, if optimum point less low boundary, region between minimum value , low boundary must treated optimum region, region low boundary high boundary must treated suboptimal region, , remaining region must treated less region. finally, if optimum point higher high boundary, situation reversed; region between high boundary , maximum value must treated optimum region, region high boundary down low boundary must treated suboptimal region, , remaining region must treated less region.

we use green optimum region, yellow suboptimal region , red less region.

btw style <meter> element (see how style html5 <meter> tag).