HTML and CSS Reference
In-Depth Information
If the specified value is less than 0, a min attribute must be present, and a max attribute must be present if
the value exceeds 1. As long as the minimum and maximum values are indicated, the actual value can be
any number within that range. You can even use negative numbers:
<p>Rating: <meter min="-1000" max="100" value="-1000">Worst. Episode. Ever.</meter></p>
The meter element also accepts optional high , low , and optimum attributes, so you can indicate not only
a measurement on a scale, but the relative quality of that measurement:
<p>Your score: <meter min="0" max="100" value="63" low="20" high="80" optimum="60">
63%, slightly above average</meter></p>
That's all well and good for marking up scalar measurements with semantically rich metadata, but now
comes the cool part: in place of the meter element's text contents, a supporting browser will display the
measurement as a graphically rendered bar, like you see in Figure 8-29. The filled portion of the bar
represents the meter 's value.
Figure 8-29. A browser replaces meter elements with a rendered bar (this image is taken from Chrome on Windows)
Chrome and Opera both present meter gauges as a gray box filled with a green bar representing the
value. The bar turns yellow when the value is either high or low (if those attributes are present) or if it's
equal to the min or max attributes, to indicate that the gauge has crossed the specified threshold.
Unfortunately you won't have much influence over the bar's styling, so bear that in mind when you use the
meter element. Different browsers render the bar in different ways, with differing levels of support for CSS
to change its appearance. You can declare a width and height for the bar and perhaps add a few other
decorations such as a border or a shadow, but for the most part you're stuck with the color and style the
browser gives you, at least for now.
For a more complete and elaborate example, Listing 8-26 presents a collection of scores rated on a scale
of zero to ten, where anything above 8 is considered a high score and anything below 2 is considered low
(we haven't implied any optimum score here). We don't need to include a min attribute because the
minimum score is 0, the default low end of the scale. The entire set of scores is marked up in a description
list (the dl , dt , and dd elements are covered in Chapter 4).
Listing 8-26. Displaying a set of scores with meter elements
<h2>Power Levels</h2>
<dl class="power-levels">
<dd><meter max="10" high="8" low="2" value="6">6</meter></dd>
<dd><meter max="10" high="8" low="2" value="9">9</meter></dd>
<dd><meter max="10" high="8" low="2" value="7">7</meter></dd>
<dt>Energy Projection:</dt>
<dd><meter max="10" high="8" low="2" value="0">0</meter></dd>
<dt>Combat Skills:</dt>
<dd><meter max="10" high="8" low="2" value="7">7</meter></dd>
Search WWH ::

Custom Search