Как оформить тег HTML5 <meter>

Question

Мне интересно, как я смогу оформить новый тег <meter>.

<meter value=80 min=0 max=100>
  80/100
</meter>

Я просто хочу изменить цвет фона и цвет значения, но я не могу найти правильные свойства CSS. Для браузеров на основе webkit я нашел следующие:

meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}

Где я могу найти подходящие свойства CSS для браузеров на основе Gecko (Firefox), Opera и IE?

Answer 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% ... это не стоит для меня, но я оставлю это на усмотрение вашего проекта.

Answer 2

Ниже приведены правила для 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%);
}

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Вот кросс-браузерное решение в 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>

Обратите внимание, что незаполненная (серая) часть измерителя имеет стиль ::-webkit-meter-bar в Chrome, тогда как firefox использует ::-moz-meter-bar для заполненной (зеленой, желтой, красной) части и стилизует незаполненную часть с помощью meter элемент сам.

Также обратите внимание, что у firefox есть псевдоселекторы на элементе meter, чтобы различать оптимальные и субоптимальные значения (:-moz-optimal, :-moz-sub-optimal и :-moz-sub-sub-optimal; тогда вы просто стилизуете псевдодетель ::-moz-meter-bar для соответствующий псевдо-селектор), в то время как Chrome позволяет стилизовать различные псевдо-элементы для этой цели (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value и ::-webkit-meter-even-less-good-value соответственно).

Вот ссылка, которая объясняет, что означают эти префиксные псевдоэлементы. https://scottaohara.github.io/a11y_styled_form_controls/src/meter/