HTML тег <meter>

Тег <meter> является одним из элементов HTML5. Он определяет скалярное измерение в известном диапазоне — единственное значение, которое находится где-то между минимумом и максимумом. Типичные сценарии использования включают уровень заряда батареи, использование диска, результат теста, рейтинг релевантности или степень наполненности контейнера. Поскольку индикатору нужна фиксированная шкала для отображения, всегда следует знать (и обычно указывать) максимальное значение.

На этой странице рассматриваются синтаксис и атрибуты <meter>, то, как атрибуты low, high и optimum влияют на цвет индикатора, как подписать meter для обеспечения доступности, а также ограничения стилизации с помощью CSS.

Информация

<meter> vs <progress>: используйте <meter> для статического измерения (например, «6,7 ГБ из 8 ГБ использовано»). Используйте <progress> для отображения завершённости задачи, которая движется к 100% (например, загрузка файла или страницы). Они выглядят похоже, но означают разные вещи.

Синтаксис

Тег <meter> используется парно. Содержимое записывается между открывающим (<meter>) и закрывающим (</meter>) тегами.

Пример HTML-тега `<meter>`:

Пример HTML-тега <meter> | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br />
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Попробуйте сами »

Результат

Опасно

Тег <meter> не предназначен для отображения прогресса. Для этой цели используйте тег <progress>.

Совет

Используйте CSS-свойства background-color, box-shadow, width и height для стилизации элемента <meter>.

Доступность: всегда подписывайте meter

Элемент <meter> не имеет неявного доступного имени. Без дополнительных пояснений программа чтения с экрана озвучивает только значение, не указывая, что именно измеряется. Текст, размещённый между тегами, является визуальным запасным вариантом для очень старых браузеров — он не гарантированно используется как доступное имя.

Давайте каждому meter настоящую метку. Наиболее очевидный вариант — элемент <label>, связанный через id; в противном случае используйте aria-label или aria-labelledby.

Подпись элемента <meter>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Associated <label> -->
    <label for="disk">Disk usage:</label>
    <meter id="disk" value="6" min="0" max="8">6 GB of 8 GB</meter>

    <!-- aria-label when no visible label is shown -->
    <meter value="0.6" aria-label="Password strength">60%</meter>
  </body>
</html>

Result

Цветовые зоны: `low`, `high` и `optimum`

Браузер автоматически раскрашивает индикатор в зависимости от того, куда попадает value относительно атрибутов low, high и optimum. Пороговые значения делят диапазон на три полосы — ниже low, между low и high, и выше high — а optimum сообщает браузеру, какая полоса является хорошей. Исходя из этого, браузер выбирает одно из трёх состояний:

Зелёный — значение находится в полосе, содержащей optimum (или рядом с ней). Это «хорошая» зона.
Жёлтый — значение находится на одну полосу дальше от оптимальной (приемлемо, но не идеально).
Красный — значение находится в полосе на противоположном конце диапазона от optimum (наихудшая зона).

Точные цвета зависят от браузера, но логика зелёный/жёлтый/красный остаётся неизменной. Обратите внимание, что значения high и low не означают «большой = хорошо». Если optimum меньше low, то маленькие значения отображаются зелёным, а большие — красным.

Три индикатора, соответствующие трём цветовым состояниям:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- value above high, optimum is low -> red -->
    <label for="m1">Server load (high is bad):</label>
    <meter id="m1" value="90" min="0" max="100" low="33" high="66" optimum="10">90%</meter>
    <br />

    <!-- value in the middle band -> yellow -->
    <label for="m2">Server load (medium):</label>
    <meter id="m2" value="50" min="0" max="100" low="33" high="66" optimum="10">50%</meter>
    <br />

    <!-- value in the optimum band -> green -->
    <label for="m3">Server load (low is good):</label>
    <meter id="m3" value="15" min="0" max="100" low="33" high="66" optimum="10">15%</meter>
  </body>
</html>

Result

Поскольку optimum (10) здесь находится в нижней полосе, малые значения считаются нормальными (зелёный), а высокие — опасными (красный) — именно то, что нужно для чего-то вроде нагрузки на процессор. Перенесите optimum на большое значение, и цвета инвертируются, что подходит для индикатора «уровень заряда батареи» или «надёжность пароля», где больше — лучше.

Отображение числового диапазона

Атрибуты min и max определяют шкалу, по которой строится индикатор. Значение value интерпретируется на этой шкале: при min="0" и max="70" значение value равное 15 заполнит примерно 21% полосы. Используйте атрибут optimum, чтобы отметить идеальную точку в диапазоне — например, проходной балл в тесте — который (вместе с low и high) управляет цветом индикатора, описанным выше.

Результат теста из 70 баллов, где больше — лучше:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="score">Test score:</label>
    <meter id="score" value="15" min="0" max="70" low="35" high="55" optimum="65">15 out of 70</meter>
  </body>
</html>

Result

Отображение процентного значения

Если опустить min и max, они по умолчанию равны 0 и 1. Это делает <meter> удобным для дробей: значение value равное 0.8 отображает 80% полосы. Это удобно для таких вещей, как оценка релевантности или индикатор «полнота профиля».

Всегда указывайте видимую метку (или aria-label) и человекочитаемый запасной текст, чтобы смысл был понятен без стилизации.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="complete">Profile completeness:</label>
    <meter id="complete" value="0.8">80%</meter>
  </body>
</html>

Result

Стилизация HTML-тега `<meter>`

Прежде всего, задайте размер с помощью свойств width и height.

Пример HTML-тега <meter>:

meter {
  width: 300px;
  height: 20px;
}

Современные браузеры не предоставляют надёжных кросс-браузерных хуков для стилизации нативного элемента управления meter. Показанные ниже вендорные псевдоэлементы устарели или не поддерживаются в актуальных браузерах, поэтому не следует полагаться на них в продакшне. Если вам нужен полностью стилизованный и доступный индикатор, рассмотрите использование кастомного ARIA-совместимого компонента или тег <progress>, если значение отражает прогресс.

Примеры ниже приведены для справки, но обращайтесь с ними осторожно: каждый браузер предоставляет свои нестандартные псевдоэлементы, они несовместимы между собой, и некоторые были полностью удалены. Если вам нужен полностью стилизованный и доступный индикатор, создайте кастомный компонент из простых элементов с role="meter", aria-valuenow, aria-valuemin и aria-valuemax, и анимируйте его. Движки Webkit/Blink предоставляют следующие псевдоэлементы:

Псевдокласс	Описание
-webkit-meter-inner-element	Дополнительная разметка, используемая для отображения элемента meter только для чтения.
-webkit-meter-bar	Содержит шкалу индикатора meter со значением.
-webkit-meter-optimum-value	Текущее значение элемента meter, которое по умолчанию зелёное, когда атрибут value попадает в диапазон low–high.
-webkit-meter-suboptimum-value	Тег meter становится жёлтым, когда значение выходит за пределы диапазона low–high.
-webkit-meter-even-less-good-value	Тег meter становится красным, когда атрибуты value и optimum выходят за пределы диапазона low–high, но в противоположных зонах. Например, value high > low > optimum.

Затем нужно сбросить стандартный внешний вид (appearance) шкалы meter до «none».

Тег meter со стилизованным свойством appearance

meter {
  -webkit-appearance: none;
}

В нашем примере мы будем использовать псевдоклассы -webkit-meter-bar и -webkit-meter-optimum-value.

Стилизация HTML-тега <meter>

meter::-webkit-meter-bar {
  background: none;
  background-color: lightgrey;
  box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 3px 3px -3px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

Каждый цвет в фоновом линейном градиенте представляет пространство, занятое подкатегориями.

Стилизация HTML-тега <meter>

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
  transition: width .5s;
  width: 100%;
}

Пример стилизации HTML-тега `<meter>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        box-shadow: 0 3px 3px -3px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Попробуйте сами »

Свойства transition и animation для элемента <meter> поддерживаются браузерами Webkit. Изменяйте ширину значения (при :hover) с помощью переходов и анимируйте background-position контейнера с помощью keyframes.

Пример стилизации HTML-тега `<meter>` с помощью CSS-свойства transition:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
        transition: width .5s;
        width: 100% !important;
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Попробуйте сами »

Псевдоэлементы для шкалы meter поддерживаются только браузерами Webkit. Псевдоэлементы можно использовать для отображения метаинформации над шкалой meter.

Стилизация HTML-тега <meter>

meter {
  margin: 2em;
  position: relative;
}

meter::before {
  content: 'Used storage';
  position: absolute;
  top: -100%;
}

meter::after {
  content: 'Free storage';
  position: absolute;
  top: -100%;
  right: 0;
}

Пример HTML-тега `<meter>` с псевдоэлементами:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        margin: 2em;
        width: 400px;
        height: 30px;
        position: relative;
      }
      meter::before {
        content: 'Used storage';
        position: absolute;
        top: -100%;
      }
      meter::after {
        content: 'Free storage';
        position: absolute;
        top: -100%;
        right: 0;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
        transition: width .5s;
        width: 100% !important;
        /* !important required. to override the inline styles in WebKit. */
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Попробуйте сами »

Теперь воспользуемся запасным вариантом для Firefox. Закрасьте шкалу meter с помощью -moz-appearance: meterbar. Если вам не нужен стандартный эффект скоса и рельефа, установите -moz-appearance в значение «none».

Стилизация HTML-тега <meter>

meter {
  -moz-appearance: none;
  width: 400px;
  height: 30px;
}

Firefox больше не поддерживает стилизацию шкалы meter через CSS-псевдоэлементы.

Здесь мы стилизуем фон значения шкалы meter с помощью псевдокласса ::-moz-meter-bar.

Стилизация HTML-тега <meter>

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

В Firefox можно использовать сам селектор meter для стилизации фона контейнера.

Стилизация HTML-тега <meter>

meter {
  background: none;
  background-color: lightgray;
  box-shadow: 0 5px 5px -5px #333 inset;
}

Пример HTML-тега `<meter>` для Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 400px;
        height: 30px;
        background: none;
        /* Required to get rid of the default background property */
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-moz-meter-bar {
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Попробуйте сами »

Псевдоэлементы ::before и ::after для шкалы meter не поддерживаются Firefox. Поддержка переходов и анимации CSS3 также слабая.

Атрибуты

Атрибут	Значение	Описание
form	form_id	Указывает форму (формы), которой принадлежит тег `<meter>`.
high	число	Указывает высокие значения (но не максимальные). Если значение high меньше low, то high = low. Если high больше max, то high = max.
low	число	Определяет низкие значения (но не минимальные). Это значение должно быть меньше high. Если значение low меньше min, то low = min.
max	число	Определяет максимально возможное значение. Значение по умолчанию равно 1.
min	число	Определяет минимально возможное значение. Значение по умолчанию равно 0.
optimum	число	Определяет оптимальное значение, которое должно находиться в диапазоне, заданном атрибутами min и max. Оно может быть больше значения high.
value	число	Устанавливает текущее значение. Если не указано, значение по умолчанию равно 0,5.

Тег <meter> поддерживает глобальные атрибуты и атрибуты событий.

Практика

Что представляет HTML-элемент meter?

Скалярное измерение в известном диапазоне, например использование диска или результат теста.Прогресс выполнения задачи, движущейся к 100%.Элемент управления в виде выпадающего списка для выбора одного варианта.Гиперссылку на другой документ.

Синтаксис

Пример HTML-тега <meter>:

Результат

Доступность: всегда подписывайте meter

Цветовые зоны: low, high и optimum

Отображение числового диапазона

Отображение процентного значения

Стилизация HTML-тега <meter>

Пример стилизации HTML-тега <meter>:

Пример стилизации HTML-тега <meter> с помощью CSS-свойства transition:

Пример HTML-тега <meter> с псевдоэлементами:

Пример HTML-тега <meter> для Firefox:

Атрибуты

Практика

Пример HTML-тега `<meter>`:

Цветовые зоны: `low`, `high` и `optimum`

Стилизация HTML-тега `<meter>`

Пример стилизации HTML-тега `<meter>`:

Пример стилизации HTML-тега `<meter>` с помощью CSS-свойства transition:

Пример HTML-тега `<meter>` с псевдоэлементами:

Пример HTML-тега `<meter>` для Firefox: