w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

meter ... ⁄meter, display in browser

Browser display, meter element

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
meter intro meter parents - children meter fallback contentmeter: segments, values, colors, attributes meter syntaxmeter low, high attributesmeter min, max attributesmeter optimum attributemeter value attributemeter title attribute