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,则显示为黄色.
  • 否则绿色.

这实际上是规范所说的:

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

我们使用绿色表示最佳区域,黄色表示次优区域,红色表示更好的区域.

顺便说一句,您可以设置<meter>元素的样式(请参阅如何设置HTML5 <米>标签的样式).