Главная -> Статьи о HTML5 -> Новый тег meter в html5

Новый тег meter в html5

HTML5 предлагает нам несколько новых тегов, таких как time, mark и meter. О последнем пойдет речь в этой статье.

Начнем с  того, что этот элемент является внутристроковым, поэтому может быть использован внутри других строковых тегов, таких как h1 или p.

В спецификации HTML 5 о теге meter сказано примерно следующее:

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

Простейший пример

Для того чтобы Вам стало всё понятно, приведем простой пример:

<meter value="8" min="0" max="10">Текст, выводимый если тег meter не поддерживается.</meter>

На этот код браузер Google Chrome покажет Вам следующую картинку:

Тег meter в Google Chrome

А Opera такую:

Тег meter в OperaInternet Explorer не нарисует ничего, т.к. не умеет.

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

Теперь разберемся с атрибутами. У данного элемента есть 6 допустимых атрибутов: value, min, max, high, low, optimum. Давайте разберемся с каждый по очереди:

Атрибут value обозначает текущее значение. Если этот атрибут не указан, то его значение берется как первое число внутри тега. Т.е. например в коде:

<meter> 2 из 10</meter>

атрибут value будет равен 2. Если внутри тега чисел нет, то value = 0.

Атрибут min обозначает минимально допустимое значение. Если атрибут не указан явно, то минимальное значение равно 0.

Атрибут max обозначает максимально возможное значение. Если максимальное значение задано меньшим чем минимальное, то они меняются местами, т.е. min = max, а max = min. Если max не задан то максимальное значение равно 1. Однако если Вы зададите тип содержания тега (например проценты), то максимальным числом будет 100%.

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

Атрибут high отделяет высокие значения (но не максимальные). Если значение high меньше чем значение low, то high = low. Если high задано большим, чем max, то high = max. Значения большие, чем high будут подсвечиваться желтым или красным цветом (по умолчанию).

Атрибут optimum обозначает оптимальное значение и должно находиться в пределах от min до max. Оно может быть большим чем значение high.

Еще несколько примеров использования meter

Давайте теперь рассмотрим еще несколько примеров.

Простейший из них:

<p>Ваши баллы: <meter>2 из 10</meter></p>

Если Вы запустите этот пример в браузере, то должны увидеть (но пока не увидите) полоску заполненную на 20% зеленым цветом. На момент написания статьи функция считывания данных из внутренней строки тега не была реализована ни в одном браузере. Исправить ситуацию можно следующим образом:

<p>Ваши баллы: <meter min="0" max="10" value="2">2 из 10</meter></p>

Запустив его, Вы увидите полоску закрашенную на 20% зеленым цветом. Работает это во всех браузерах кроме IE и FF.

Точно то же самое будет отображаться если код страницы будет следующий:

<meter>20%</meter>

или такой:

<meter>1/5</meter>

Теперь давайте разберемся с цветами. Введите следующий текст:

<p>Ваши баллы: <meter value="1" min="0" max="10" low="2" high="8" optimum="9">2 из 10</meter></p>

В браузере отобразится полоска на 10% закрашенная красным цветом. При значениях атрибута value от 2 до 7 полоска будет желтой. При значениях от 8 до 10 - оптимальной, т.е. зеленой.

Неправильное использование тега

Как же не нужно использовать элемент meter?

Во-первых он не должен быть пустым:

<meter min="0" max="100" value="75"></meter>

Внутри тега обязательно должен находиться какой-либо текст:

<meter min="0" max="100" value="75">обязательный текст</meter>

Иначе браузер не обработает тег вообще.

Во-вторых, обязательно нужно задавать атрибуты min и max, если значение которое Вы хотите отобразить не находится в диапазоне от 0 до 1.

Т.е. вот так <meter>12cm</meter> использовать этот тег нельзя! Нужно вот так: <meter min="0" max="20">12cm</meter>

Тег meter и Internet Explorer

Чтобы тег meter работал в Internet Explorer нужно добавить вот такие строчки в голову Вашей страницы:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Живой пример использования тега meter можно найти тут: http://html5blog.ru/examples/meter-tag.php