Тег <meter>

Тег <meter> является датчиком и используется для вывода значения в определенном диапазоне. Например, для отображения использования диска, или процента проголосовавших за определенного кандидата на выборах.

Атрибуты тега <meter>

value

Текущее значение в диапазоне. По умолчанию 0.

min

Нижняя граница диапазона. По умолчанию 0.

max

Верхняя граница диапазона. По умолчанию 1.

low

Верхний предел низких значений, т.е. с min до low – низкие значения, с low до high – средние значения. По умолчанию min.

high

Нижний предел высоких значений, т.е. с low до high – средние значения, с high до max – высокие значения. По умолчанию max.

optimum

Оптимальное значение. По умолчанию (min+max)/2.

Значения всех перечисленных атрибутов могут быть числами с плавающей точкой.

Для тега <meter> также доступны общие атрибуты и атрибуты обработки событий.

Должны выполняться неравенства:

• min ≤ value ≤ max
• min ≤ low ≤ high ≤ max
• min ≤ optimum ≤ max

Браузеры, не отображающие тег <meter> выводят текст из контейнера <meter>...</meter>

<meter value="150" max="736" title="150ГБ из 736ГБ занято"
       style="height: 30px; width: 100%">150ГБ из 736ГБ занято</meter>

Примеры различных вариантов тега <meter> (по умолчанию min=0, max=1)

1. min < value < max

   <meter value=".5"></meter>

2. value = max

   <meter value="1"></meter>

3. value > max

   <meter value="1.5"></meter>

4. value = min

   <meter value="0"></meter>

5. value < min

   <meter value="-.5"></meter>

6. value < high

   <meter value=".5" high=".8"></meter>

7. value = high

   <meter value=".8" high=".8"></meter>

8. value > high

   <meter value=".9" high=".8"></meter>

9. value < low

   <meter value=".15" low=".25"></meter>

10. value = low

    <meter value=".25" low=".25"></meter>

11. value > low

    <meter value=".5" low=".25"></meter>

12. optimum < low < value < high

    <meter value=".5" low=".25" high=".75" optimum=".15"></meter>

13. low < value = optimum < high

    <meter value=".5" low=".25" high=".75" optimum=".5"></meter>

14. low < value < high < optimum

    <meter value=".5" low=".25" high=".75" optimum=".85"></meter>

15. value < low < high < optimum

    <meter value=".2" low=".25" high=".75" optimum=".8"></meter>

16. value > high > low > optimum

    <meter value=".8" low=".25" high=".75" optimum=".2"></meter>

Firefox 16+ отображаeт элемент <meter> со следующими значениями стилей:

meter {
-moz-appearance: meterbar;
background: rgba(0, 0, 0, 0) linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%) repeat scroll 0 0;
display: inline-block;
vertical-align: -0.2em;
}
*::-moz-meter-bar {
-moz-appearance: meterchunk;
display: inline-block !important;
float: none !important;
height: 100%;
overflow: visible !important;
position: static !important;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%) repeat scroll 0 0;
}

Chrome 8+, Opera 11+, Safari 6+ отображают элемент <meter> со следующими значениями стилей:

meter {
-webkit-appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
meter::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
height: 100%;
width: 100%;
}
meter::-webkit-meter-bar {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
height: 100%;
width: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
height: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-suboptimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
height: 100%;
box-sizing: border-box;
}

meter::-webkit-meter-even-less-good-value {
background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
height: 100%;
box-sizing: border-box;
}

Элементу <meter>, как и любому другому элементу, можно задать ширину и высоту. Но гораздо интереснее то, что есть возможность менять и фон.

<style type="text/css">
    meter.my_meter {
        margin-top: 10px;
        width: 100%;
        height: 25px;
        background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
        background-size: 50px 25px;
    }
    meter.my_meter::-webkit-meter-bar {
        height: 25px;
        background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
        background-size: 50px 25px;
        border-radius: 0;
        border: none;
    }
    meter.my_meter::-webkit-meter-optimum-value {
        vertical-align: top;
        background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
    }
    meter.my_meter:-moz-meter-optimum::-moz-meter-bar {
        background: linear-gradient(#bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
    }
</style>
<meter class="my_meter" value=".5"></meter>

Для отображения <meter> в Internet Explorer, который не поддерживает этот тег, надо имитировать внешний вид датчика, используя блоки <div> внутри тега <meter>. Браузеры, поддерживающие элемент <meter>, будут игнорировать содержимое тега. Браузеры, не поддерживающие элемент <meter>, будут игнорировать сам тег, а отображать его содержимое.

<style type="text/css">
    .ie_meter {
        width: 100%;
        height: 25px;
        background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
        background-size: 50px 25px;
    }
    .ie_meter > div {
        height: inherit;
        background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
    }
</style>
<meter class="my_meter" value=".5">
    <div class="ie_meter">
        <div style="width: 50%;"></div>
    </div>
</meter>