HTML5标记<meter>属性

Question

HTML5规范中有一个名为<meter>的新标记。 它有三个非常清晰易懂的属性，但它们的功能和视觉效果并不那么清晰。它们是高,低和最佳。

我看到一些红色或黄色的仪表元件，我猜这些颜色与这些属性有关。但我不知道如何。

任何人都可以为我描述它吗？

Answer 1

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

• 如果low < optimum < high：

  • 如果该值是< low或>high，它被显示为黄色，
  • 否则绿色（最佳没有影响）。

• 如果low < high < optimum：

  • 如果该值是< low，它被显示为红色。
  • 如果值为< high，则显示为黄色。
  • 否则绿色。

• 如果optimum < low < high：

  • 如果该值是> high，其被显示为红色。
  • 如果值为> low，则显示为黄色。
  • 否则绿色。

这实际上是什么spec said：

为计区域UA要求：如果最佳点等于低边界或高边界，或在任何地方在它们之间，那么在仪表的低和高界限之间的区域必须被视为最佳区域，并且低和高部分（如果有的话）必须被视为次优。否则，如果最佳点小于低边界，则最小值和低边界之间的区域必须被视为最佳区域，从低边界直到高边界的区域必须被视为次优区域，而其余​​地区必须被视为更不好的地区。最后，如果最佳点高于高边界，则情况相反;必须将高边界与最大值之间的区域视为最佳区域，将从高边界到下边界的区域视为次优区域，并将剩余区域视为更不好的区域。

我们使用绿色作为最佳区域，黄色使用次优区域，红色使用更少区域。

BTW，你可以风格的元素<meter>（见How to style HTML5 <meter> tag）。

Answer 2

理解功能性和那些3段的视觉效果（低，最佳的，高） 取决于米元件和它们的值所指定的属性; 相同的值可以显示在不同的颜色（绿色/黄色/红色），这取决于它的链段

为米色清楚理解的类型，值，段观看this video