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

ProgramBox

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

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#html #css #meter

#HTML #css #метр

Вопрос:

Мне интересно, как я мог бы оформить новый <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?

1. Я попытался отобразить тег meter в FF и IE, как в Chrome. Я применил display:block; width:100%; height:1em; множество градиентов. Это работает! Но когда мне приходится создавать другой элемент внутри счетчика, который будет действовать как значение счетчика … становится сложнее. Итак, на данный момент я решил использовать это .

2. @simone: Я думаю, если вы посмотрите на мой обновленный ответ, вы можете обнаружить, что он более подробный…

Ответ №1:

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

Ответ №2:

Я оформил счетчик с приятным едва заметным градиентом в браузерах 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%… для меня это того не стоит, но я оставлю это на усмотрение вашего проекта.

1. Да … к сожалению, прошел почти год, а мы наблюдаем увеличение всего на 1%.

2. Интересно, как мы можем помочь ему расти быстрее.

3. Мы не можем. Это зависит от создателей различных браузеров.

4. Глупо включать все эти кроссбраузерные градиенты, когда они находятся за специфичным для WebKit селектором псевдоэлементов, который Mozilla и IE никогда не будут анализировать.

5. Этот ответ устарел. Текущая поддержка браузера хорошая (не хватает поддержки только IE-11). Существует способ стилизовать этот элемент в разных браузерах, но этот ответ дает ответ только для браузеров, производных от webkit.

Ответ №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%);
}

где найти свойства Mozilla CSS

Ответ №4:

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

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

1. 3 элемента по цене 1? Какой обман!

2.ваше право .. это не настоящий ответ, потому что его нет.. возможно, это могло бы помочь понять, почему: w3schools.com/html5/tag_meter.asp w3schools.com/html5/tag_progress.asp -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (браузеры на базе Gecko) -Программное обеспечение o- Opera -atsc- Комитет по передовым телевизионным стандартам -wap- Форум WAP -webkit- Safari, Chrome (и другие браузеры на основе WebKit) -khtml- Браузер Konqueror

3. поскольку принятый ответ не работает во многих браузерах, а ie11 вообще не поддерживает тег meter, это неплохой ответ

Ответ №5:

Для тех, кто ищет нетривиальный стиль в 2021 году, безусловно, возможно создать любой тип счетчика, который вы хотите, творчески используя background-image собственность и друзей.

Единственное различие между Firefox и chrome заключается в background: none;

Для Safari требуется -webkit-appearance: none , в то время как для Chrome требуется -webkit-appearance: meter , поэтому они несовместимы. Способ заставить это работать выходит за рамки этого ответа.

 .scaffolding {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 8px;
}
label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 0;
}

meter,
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-inner-element {
    background: none;
    border-radius: 0;
    border: none;
    width: 100%;
    height: 4rem;
}

meter { 
    appearance: none;
    -moz-appearance: meter;
    -webkit-appearance: meter;
    width: 20rem; //very important

}

meter::-webkit-meter-optimum-value { 
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}
meter::-moz-meter-bar { 
    background: none;
    background-image: repeating-linear-gradient(to right,
     transparent 0rem, transparent 0.25rem, 
     green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
     green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
     green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
     green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
    repeating-linear-gradient(to right, 
    transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
    background-size: 2.5rem 3rem, 2.5rem 4rem;
    background-position-y: center, center;
    background-repeat: repeat-x, repeat-x;
}

 <div class="scaffolding">
  <label>40</label>
  <meter min="0" max="40" value="40"></meter>
  <label>20</label>
  <meter min="0" max="40" value="20"></meter>
  <label>15</label>
  <meter min="0" max="40" value="15"></meter>
  <label>35</label>
  <meter min="0" max="40" value="35"></meter>
  <label>4</label>
  <meter min="0" max="40" value="4"></meter>
</div>

Ответ №6:

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

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

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