Хорошее использование HTML5 "прогресса" или "метра"?

Question

Скажем, у вас есть опрос с 10 страницами (один вопрос на страницу).В верхней части каждой страницы вы включаете текст «Вопрос 2 из 10».Является ли такая вещь хорошим кандидатом на « progress » или « meter »?

С семантической точки зрения, «прогресс» изначально кажется наиболее подходящим.Но чем больше я читаю и смотрю на примеры, я думаю, что «метр» может быть более подходящим.

<meter max="10" value="1">Question 1 of 10</meter>
<progress max="10" value="1">Question 1 of 10</progress>

Answer 1

Согласно последнему рабочему проекту HTML5 , тег progress лучше всего использовать для отображения хода выполнения конкретной задачи.meter лучше всего использовать для не связанных задач задач, таких как дисковое пространство или использование памяти.

Элемент progress представляет ход выполнения задачи.

Принимая во внимание, что

Элемент meter представляет скалярное измерение в пределах известного диапазона или дробное значение;например, использование диска, релевантность результата запроса или доля голосующего населения, выбравшего конкретного кандидата.

Редактировать - поскольку рендеринг и стилизация кажутсяпроблема, у вас может быть больше удачи, используя другие теги.Например, сексуальный навигатор прогресса может быть закодирован с помощью:

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

и стилизован под что-то , например, .

Answer 2

С семантической точки зрения, progress кажется правильным для использования здесь. Я также задал вопрос HTML5 Doctor , и они, похоже, тоже с этим согласились. Моя проблема в том, что progress очень плохо поддерживается по всем направлениям в данный момент (5/5/11). Это делает его очень сложным для практического использования сегодня.

В качестве пробела я планирую использовать соглашение об использовании нового имени элемента в качестве имени класса в стандартном элементе div (A.K.A. - Семантическое имя класса). Более подробно об этой идее: http://jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names

Вот как будет выглядеть мой код сегодня. Через год или два, когда этот элемент получит лучшую поддержку, я вернусь и заменим его реальными тегами progress.

<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="10">
    Question 1 of 10
</div>

Answer 3

Так как это значение является определенным, кажется, "метр" был бы лучше. Попробуйте эту ссылку и посмотрите, поможет ли это: http://peter.sh/examples/?/html/meter-progress.html

Answer 4

Тег определяет скалярное измерение в пределах известного диапазона или дробного значения. Это также известно как датчик.

В Google Chrome итоговый счетчик выглядит следующим образом:

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

В Windows 7 полученный прогресс выглядит следующим образом:

Примечание: тег не должен использоваться для индикации прогресса (как в индикаторе выполнения). Для индикаторов выполнения используйте тег.

Answer 5

определенно метр;см. демо здесь

Answer 6

Метры не поддерживаются IE. Даже не IE10.

Answer 7

Визуально, я думаю, что метр более уместен.