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