Vamos a repasar la nueva etiqueta meter HTML5, con esta etiqueta se pretende representar mediante una barra un rango de valores. No lo confundáis como una barra de progreso.
2 elementos parecidos son:
Os dejo una imagen de ejemplo de la etiqueta meter:
Vamos a ver su sintaxis extraída de su web oficial:
<meter value="2" min="0" max="10"></meter>
He puesto una sintaxis sencilla, con un valor por defecto y valores mínimo y máximo. Los atributos que se pueden usar en esta etiqueta para sacarle el máximo provecho son:
Las barras que representan el valor son de color verde por defecto, pero si el dato se encuentra entre los valores min y low o high y max serán de color amarillo.
Quizás con la exlicación superior de los atributos no os hayáis hecho una idea clara, os he preparado este código de ejemplo para ver el orden de los atributos:
//Orden normal min <= low <= value <= high <= max //En caso de definir el atributo optimum min <= low <= optimum <= high <= max
Los valores de los atributos deben obedecer este orden superior.
Vamos con varios ejemplos de esta nueva etiqueta HTML5:
<meter min="2" max="20" value="4">valor 4</meter> <meter min="2" max="20" value="10">valor 10</meter> <meter min="2" max="20" value="19">valor 19</meter> <meter min="10" max="30" value="12" optimum="20">valor 12</meter> <meter min="10" max="30" value="29" optimum="20">valor 29</meter> <meter min="10" max="30" value="20" optimum="20">valor 20</meter> <meter min="10" low="15" high="25" max="30" value="12" optimum="20">valor 12</meter> <meter min="10" low="15" high="25" max="30" value="28" optimum="20">valor 28</meter> <meter min="10" low="15" high="25" max="30" value="22" optimum="20">valor 22</meter> <meter min="10" low="15" high="25" max="30" value="18" optimum="20">valor 18</meter> <meter min="10" low="15" high="25" max="30" value="20" optimum="20">valor 20</meter> <meter style="width:350px; height:50px;" min="10" max="30" value="12" optimum="20">valor 12</meter> <meter style="width:350px; height:50px;" min="10" low="15", high="25" max="30" value="28" optimum="20">valor 28</meter> <meter style="width:350px; height:50px;" min="10" low="15", high="25" max="30" value="12" optimum="20">valor 12</meter>
Os explico cada uno de los 4 bloques de código:
Estas son las 3 clases principales:
Ejemplo código CSS:
/* Safari Chrome */meter::-webkit-meter-bar {background:#f3f3f3;} meter::-webkit-meter-optimum-value{background:#cb5700;} meter::-webkit-meter-suboptimum-value{background:#000000;} /* firefox */meter::-moz-meter-bar {background:#f3f3f3;} meter::-moz-meter-optimum-value{background:#cb5700;} meter::-moz-meter-suboptimum-value{background:#000000;}
En esta url tenéis el listado completo de los nuevos input de HTML5.
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.