HTML тег <meter>

Элемент <meter> (от англ. "meter" ‒ «счётчик, измеритель») определяет скалярное измерение в пределах известного диапазона или дробное значение. Подобный индикатор также известен, как оценочная шкала. Для использования данного тега должно быть известно максимальное значение.

Данный тег используется, к примеру, как необходимость отображения релевантности поискового запроса, результатов опроса, заряда батареи, использования дискового пространства и тому подобное. Текст, указанный внутри тега, отображается только для тех браузеров, которые его не поддерживают.

Примечание: Элемент <meter> не должен использоваться для обозначения индикатора прогресса, для этого предназначен элемент <progress>.

Синтаксис

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

Закрывающий тег

Обязателен.

Атрибуты

valueHTML5
Определяет текущее значение.

minHTML5
Задаёт минимально возможное значение. Значение по умолчанию ноль.

maxHTML5
Задаёт максимально возможное значение. Значение по умолчанию один. Если максимальное значение задано меньшим чем минимальное, то они меняются местами.

lowHTML5
Определяет низкие значения (но не минимальные). Это значение должно быть меньше чем high. Если указывается значение low меньше чем значение min, то low = min.

highHTML5
Определяет высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max.

optimumHTML5
Определяет оптимальное значение и должен находиться в пределах от min до max. Оно может быть большим, чем значение high.
Цвет зависит от расположения optimum:
красный: minoptimum < low
желтый: lowoptimumhigh
зеленый: high < optimummax

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

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;
}

Различия между HTML 4.01 и HTML5

Тег <meter> был добавлен в HTML5.

Пример использования:

Определяем оценочные данные в заданном диапазоне (шкалу):

Пример HTML:

Попробуй сам
<p>Заряд батареи</p>
    <meter value = "10" min = "0" max = "100" low = "20" high = "80" optimum = "90">10 из 100</meter> <br>
    <meter value = "20" min = "0" max = "100" low = "20" high = "80" optimum = "90">20 из 100</meter> <br>
    <meter value = "30" min = "0" max = "100" low = "20" high = "80" optimum = "90">30 из 100</meter> <br>
    <meter value = "40" min = "0" max = "100" low = "20" high = "80" optimum = "90">40 из 100</meter> <br>
    <meter value = "50" min = "0" max = "100" low = "20" high = "80" optimum = "90">50 из 100</meter> <br>
    <meter value = "60" min = "0" max = "100" low = "20" high = "80" optimum = "90">60 из 100</meter> <br>
    <meter value = "70" min = "0" max = "100" low = "20" high = "80" optimum = "90">70 из 100</meter> <br>
    <meter value = "80" min = "0" max = "100" low = "20" high = "80" optimum = "90">80 из 100</meter> <br>
    <meter value = "90" min = "0" max = "100" low = "20" high = "80" optimum = "90">90 из 100</meter> <br>
    <meter value = "100" min = "0" max = "100" low = "20" high = "80" optimum = "90">100 из 100</meter>

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

Поддержка браузерами


HTML уроки: HTML Элементы



Contema