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">
<dt>Strength:</dt>
<dd><meter max="10" high="8" low="2" value="6">6</meter></dd>
<dt>Agility:</dt>
<dd><meter max="10" high="8" low="2" value="9">9</meter></dd>
<dt>Stamina:</dt>
<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>
