HTML5 tags <metp>

Question

The HTML5 specification has a new <meter> . It has three attributes that are so understandable, but their functionality and visual effects are not so clear. They are high, low and optimal.

I saw some metric elements in red or yellow, and I think these colors are associated with these attributes. But I dont know how.

Can anyone describe this for me?

Answer 1

The specification does not define colors. For the default styles, in Firefox 22 and Safari 6,

• If low < optimum < high :

  • If the value is < low or> high , it is displayed in yellow,
  • Otherwise green (optimal does not affect).

• If low < high < optimum :

  • If the value is < low , it is displayed as red.
  • If the value is < high , it is displayed in yellow.
  • Otherwise green.

• If optimum < low < high :

  • If the value is > high , it appears as red.
  • If the value is > low , it is displayed in yellow.
  • Otherwise green.

Actually this means spec :

UA requirements for calibration areas : if the optimum point is equal to the lower boundary or high boundary or somewhere between them, then the region between the lower and upper boundaries of the calibration should be considered as the optimal region, and the low and high parts, if any, should be considered as suboptimal . Otherwise, if the optimal point is less than the lower boundary, then the region between the minimum value and the lower boundary should be considered as the optimal region, the region from the lower boundary to the high boundary should be considered as a suboptimal region, and the remaining region should be considered as an even less good region. Finally, if the optimal point is above the upper limit, then the situation changes to the opposite; the region between the high boundary and the maximum value should be considered as the optimal region, the region from the high boundary to the lower boundary should be considered as a suboptimal region, and the remaining region should be considered as an even less good region.

We use green for the optimal area, yellow for the non-optimal area, and red for an even less good area.

By the way, you can style the <meter> element (see How to style the HTML5 <meter tag ).

Answer 2

understanding the functionality and visual effect of these three segments (low, optimal, high) depends on the attributes specified in the counter element and their values; the same value can be displayed in different colors (green / yellow / red) depending on the type of segment

for a clear understanding of the colors, values, segments of the watch this video