meter ... ⁄meter, display in browser
Browser display, meter element
- empty meter element (start tag, end tag only): does not display in browser
- its children, phrasing content: the display depends strictly on the nested element
- its content, type text (fallback content): displays in browsers that do not support the meter element
- the value of the value attribute of the meter element: display in browser as follows:
-in green if it's part of the optimal segment
-in yellow if it's part of the suboptimal segment or
-in red if it's part of the even less suboptimal segment
Display type: inline-block
Video demonstration meter element, view in browser
HTML5 meter, browser display, Tutorial
min | video details |
---|---|
00:05 | video tutorial: testing the browser display of the meter element |
00:13 | empty (start tag, end tag only) meter element: displays a gray horizontal bar in browser |
00:13 | the content of a meter element: displays only in browsers that do not support the meter element as fallback content; e.g. currently UE9 does not support meter element |
00:30 | test in IE9: we see the fallback content displaying instead of the horizontal bar |
00:42 | the measured value (0.5) in this case displays in green on the meter because its inside the optimal zone on the meter |
00:49 | by changing the value of the value attribute, the length of the green segment changes too in order to reflect the new value on meter |
01:05 | any value we choose between 0 and 1 will display in green because the whole meter is considered optimal since the optimum point 0.5 is between the min(0) and max(1) |
01:11 | the value 0.2 will display in yellow if it's inside the suboptimal segment |
01:18 | the value 0.2 will display in red if it's inside the even less optimal segment |