HTML5 标签 属性

Question

有一个名为 <meter> 的新标签在 HTML5 规范中。它的三个属性非常好理解，但是它们的功能和视觉效果却不是很清楚。它们是高、低和最佳。

我看到一些红色或黄色的仪表元素，我猜这些颜色与那些属性有关。但我不知道怎么办。

谁能帮我描述一下？

Answer 1

规范并没有真正指定颜色。对于默认样式，在 Firefox 22 和 Safari 6 中，

• 如果 low < optimum < high :

  • 如果值为 < low或 > high , 显示为黄色,
  • 否则为绿色(最优无效)。

• 如果 low < high < optimum :

  • 如果值为< low , 显示为红色。
  • 如果值为< high , 显示为黄色。
  • 否则为绿色。

• 如果 optimum < low < high :

  • 如果值为> high , 显示为红色。
  • 如果值为> low , 显示为黄色。
  • 否则为绿色。

这实际上就是spec said :

UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.

我们使用绿色表示最佳区域，黄色表示次优区域，红色表示不太好的区域。

顺便说一句，你可以为 <meter> 设置样式元素(参见 How to style HTML5 <meter> tag)。