HTML-тег <meter>
Тег <meter> — один из элементов HTML5. Он задаёт скалярную величину в известном диапазоне или наглядно показывает долю (например, заряд батареи, занятость диска). Чтобы использовать <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>Результат
DANGER
Тег <meter> не предназначен для индикации прогресса. Для этого используйте <progress>.
TIP
Для оформления <meter> применяйте CSS: background-color, box-shadow, width и height.
Пример тега <progress> с CSS (фон, тень, ширина, высота):
Полосы загрузки на HTML <progress> | пример | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 0 3px #666 inset;
}
progress[value]::-webkit-progress-value {
background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
-webkit-linear-gradient(top, #96f204, #8ebf42),
-webkit-linear-gradient(right, #96f204, #8ebf42);
background-size: 40px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<p>Downloading:
<progress value="35" max="100"></progress>
<span>35%</span>
</p>
<p>Progress bar:
<progress value="80" max="100"></progress>
<span>80%</span>
</p>
</body>
</html>Отображение числового диапазона
Атрибуты min и max задают диапазон. Атрибут optimum — желаемое значение (например, проходной балл). Внешний вид в зависимости от optimum может различаться в браузерах.
HTML-тег <meter>
<meter value="15" min="0" max="70" optimum="60"></meter>Отображение процента
Процент
<meter value="0.8">80%</meter>Стилизация тега <meter>
Сначала задайте размеры свойствами width и height.
Пример HTML-тега <meter>:
meter {
width: 300px;
height: 20px;
}У нативного meter нет надёжных кросс-браузерных крючков для стилизации. Ниже приведённые вендорные псевдоэлементы устарели или не поддерживаются — не опирайтесь на них в продакшене. Для полностью кастомного доступного индикатора используйте свой компонент с ARIA или <progress>, если значение означает именно прогресс.
Для WebKit/Blink можно использовать следующие псевдоклассы:
| Псевдокласс | Описание |
|---|---|
| -webkit-meter-inner-element | Дополнительная разметка для отображения только для чтения. |
| -webkit-meter-bar | Контейнер шкалы со значением. |
| -webkit-meter-optimum-value | Текущее значение; по умолчанию зелёное, если value в диапазоне low–high. |
| -webkit-meter-suboptimum-value | Жёлтый цвет, когда значение вне диапазона low–high. |
| -webkit-meter-even-less-good-value | Красный, когда value и optimum в противоположных «зонах» относительно low–high (например, value high > low > optimum). |
Для сброса оформления по умолчанию задайте appearance: none.
Сброс оформления meter через appearance
meter {
-webkit-appearance: none;
}В примере ниже используются псевдоэлементы -webkit-meter-bar и -webkit-meter-optimum-value.
Стилизация <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%;
}Каждый цвет в линейном градиенте фона соответствует доле подкатегории.
Стилизация <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%;
}Пример стилизации <meter>:
Пример стилизации <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>В браузерах WebKit для <meter> поддерживаются свойства transition и animation. Ширину значения при :hover можно менять через transition, а background-position контейнера анимировать через keyframes.
Пример стилизации <meter> с CSS transition:
Пример стилизации <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>Псевдоэлементы шкалы поддерживаются только в WebKit; их можно использовать для подписей над шкалой.
Стилизация <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;
}Пример <meter> с псевдоэлементами:
Пример <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: оформите шкалу через -moz-appearance: meterbar. Если не нужны фаска и тиснение по умолчанию, задайте -moz-appearance: none.
Стилизация <meter>
meter {
-moz-appearance: none;
width: 400px;
height: 30px;
}В современных версиях Firefox стилизация шкалы через CSS-псевдоэлементы не поддерживается.
Фон полосы значения можно задать через псевдокласс ::-moz-meter-bar.
Стилизация <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.
Стилизация <meter>
meter {
background: none;
background-color: lightgray;
box-shadow: 0 5px 5px -5px #333 inset;
}Пример <meter> для Firefox:
Пример <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 на шкале в Firefox не поддерживаются. Поддержка CSS3-переходов и анимаций для meter также ограничена.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| form | form_id | Форма, с которой связан meter. |
| high | число | Верхняя «хорошая» граница (не max). Если high < low, high = low; если high > max, high = max. |
| low | число | Нижняя граница (не min). Должно быть < high. Если low < min, low = min. |
| max | число | Максимум; по умолчанию 1. |
| min | число | Минимум; по умолчанию 0. |
| optimum | число | Оптимальное значение в диапазоне min–max; может быть больше high. |
| value | число | Текущее значение; по умолчанию 0.5, если опущено. |
Тег поддерживает глобальные атрибуты и атрибуты событий.
Practice
Какова функция HTML-тега <meter>?