Как создать тег HTML5 <meter>

Ответ 1

Я получил метр с красивым тонким градиентом в браузерах Webkit, используя следующий код:

meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers

meter::-webkit-meter-bar {
    background: #FFF;
    border: 1px solid #CCC;
}

meter::-webkit-meter-optimum-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

Однако Крис Койер в CSS-Tricks рекомендует следующий код HTML:

<div class="meter">
    <span style="width: 25%"></span>
</div>

... а не теги HTML5 <meter> или <progress>. На данный момент (февраль 2013 года) я согласен с ним:

Чтобы все ухудшилось, в браузерах все очень разные вещи, даже между различными браузерами WebKit. Псевдоэлементы также работают непоследовательно. Мне не нравится оставлять вещи такими, как это, но это действительно тема для другого времени. Достаточно сказать, для этих конкретные индикаторы выполнения, элемент div/span - это билет на данный момент.

Браузеры на самом деле не готовы принять новые стандартные теги HTML5 для <meter> и <progress>. С учетом сказанного я бы посоветовал, чтобы люди преодолели желание идти прямо в будущее и скорее пойти на то, что работает визуально, до дальнейшего уведомления. Я также должен отметить, что в текущий момент текущая поддержка браузера для этих тегов составляет 53%... это не стоит для меня, оставим это на усмотрение вашего проекта.

Ответ 2

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

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>

Ответ 3

Ниже приведены правила для FireFox. Я включил скриншот о том, где найти правила в инспекторе Firefox.

::-moz-meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  -moz-appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:-moz-meter-optimum::-moz-meter-bar {
  /* green. */
  background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
  /* orange. */
  background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  /* red. */
  background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

Ответ 4

Вы можете стилизовать размер и положение метра, используя в css что-то вроде следующего:

meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

Для цветов вам нужно использовать веб-набор, соответствующий вашему браузеру.

Ответ 5

Согласно MDN Meter, только Chrome и Opera в настоящее время реализуют метр, FF имеет журнал ошибок, а сафари - в ночное время.

Ответ 6

Вот кросс-браузерное решение в 2019 году:

meter {
  --background: #dadada;
  --optimum: forestgreen;
  --sub-optimum: gold;
  --sub-sub-optimum: crimson;

  /* The gray background in Firefox */
  background: var(--background);
  display: block;
  margin-bottom: 1em;
  width: 100%;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
  background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
  background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
  background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
  background: var(--sub-sub-optimum);
}

<label>
  Optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=80>
    80/100
  </meter>
</label>

<label>
  Sub-optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=50>
    80/100
  </meter>
</label>

<label>
  Sub-sub-optimum
  <meter value=80 min=0 low=30 high=60 max=100 optimum=20>
    80/100
  </meter>
</label>