HTML5标记<米>属性</米>

Question

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

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

有人能为我描述一下吗？

Answer 1

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

• 如果low < optimum < high：

  • 如果值是＆lt; low或＆gt; high，显示为黄色，
  • 否则为绿色（最佳无效）。

• 如果low < high < optimum：

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

• 如果optimum < low < high：

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

这实际上是spec said：

  

规范区域的UA要求：如果最佳点等于低边界或高边界，或者它们之间的任何位置，那么低边界和高边界之间的区域必须将仪表视为最佳区域，并且必须将低和高部分（如果有的话）视为次优。否则，如果最佳点小于低边界，则必须将最小值和低边界之间的区域视为最佳区域，从低边界到高边界的区域必须被视为次优区域，其余地区必须被视为一个更不好的地区。最后，如果最佳点高于高边界，那么情况就会逆转;必须将高边界和最大值之间的区域视为最佳区域，从高边界到低边界的区域必须被视为次优区域，其余区域必须被视为更不好的区域

我们使用绿色表示最佳区域，黄色表示次优区域，红色表示更差的区域。

顺便说一句，您可以设置<meter>元素的样式（请参阅How to style HTML5 <meter> tag）。

Answer 2

了解这3个细分的功能和视觉效果（低，最佳，高） 取决于仪表元素上指定的属性及其值; 相同的值可以用不同的颜色（绿色/黄色/红色）显示，具体取决于其段的类型

清楚了解仪表颜色，值，细分观察this video