tipos - Cómo diseñar la etiqueta HTML5<meter>

tipos de etiquetas html

Question

Me pregunto cómo podría diseñar la nueva etiqueta <meter> .

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

Solo quiero cambiar el color de fondo y el color del valor, pero no puedo encontrar las propiedades CSS correctas. Para los navegadores basados ​​en webkit he encontrado estos:

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));
}

¿Dónde puedo encontrar las propiedades CSS correctas para los navegadores basados ​​en gecko (Firefox), Opera e IE?

Answer 1

A continuación se presentan las reglas para FireFox. Incluí una captura de pantalla sobre dónde encontrar las reglas en el inspector de 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 2

Los elementos del medidor se parecen a las barras de progreso que se utilizan en otros lugares de la plataforma en la que se encuentra. intente esto para reemplazar los elementos del medidor:

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

Answer 3

Obtuve el estilo del medidor con un bonito gradiente sutil en los navegadores Webkit usando el siguiente código:

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);
}

Sin embargo, Chris Coyier en CSS-Tricks recomienda el siguiente código HTML :

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

... en lugar de las etiquetas <meter> o <progress> HTML5. En este momento (febrero de 2013), estoy de acuerdo con él:

Para empeorar las cosas, las cosas son muy diferentes en todos los navegadores, incluso entre diferentes navegadores WebKit. Los pseudo elementos también funcionan de manera inconsistente. Odio dejar las cosas colgando así, pero este es realmente un tema para otro momento. Basta con decir que, para estas barras de progreso en particular, lo div / span es el boleto por ahora.

Los navegadores simplemente no parecen estar listos para aceptar las nuevas etiquetas estándar de HTML5 para <meter> y <progress> . Dicho esto, sugeriría que las personas superen el deseo de ir directamente al futuro y prefieran algo que funcione visualmente hasta nuevo aviso. También debo mencionar que en el momento actual, el soporte actual del navegador para estas etiquetas es del 53% ... no vale la pena para mí, pero lo dejaré a la discreción de su proyecto.

Answer 4

Puede diseñar el tamaño y la posición del medidor utilizando algo como lo siguiente en su css:

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

Para los colores, debe utilizar un kit de web apropiado para su navegador.