El elemento meter HTML5

La función de la etiqueta meter es la de indicar una medida dentro de un rango; es decir debe ser acotada, tener un inicio y un fin.

Su sintaxis es la siguiente:

Hasta ahora, nada nuevo; vemos que como la mayoría de las etiquetas en HTML presenta una etiqueta de inicio <meter> y otra de cierre </meter>.

Atributos de la etiqueta (tag) meter

• value: Un valor punto flotante que representa el valor actual de la medición. Este valor debe de estar entre el valor máximo (max) y el valor mínimo (min).
  • min <= value <= max.
• min: Indica el límite inferior (cota inferior) del rango de medición; y por lo tanto el valor mínimo posible para el atributo value; este valor debe ser más pequeño que el de el atributo max; si no se especifica el valor mínimo será cero.
• max: Indica el límite superior (cota superior) del rango de medición; y por lo tanto el valor máximo posible para el atributo value; este valor debe ser más grande que el de el atributo min; si no se especifica el valor máximo será uno.
• low: Representa el límite superior de la parte baja del rango de medición. Esta debe ser mayor que el atributo min, pero menor que high y max (si se especifica). Si no se especifica, o si es menor que el valor mínimo, el bajo valor es igual al valor min.
• high: Representa el límite inferior de la parte alta del rango de medición. Esto debe ser menor que el atributo max, pero mayor que low y min (si se especifica). Si no se especifica, o si es mayor que el valor máximo, el alto valor es igual al valor max.
• optimum: Este atributo indica el valor óptimo o el mejor valor; el cual debe estar en el rango definido por los atributo low y min. Cuando son usados los atributos low y high, estos indican la zona preferida por el rango dado. Por ejemplo:
  • min <= optimum <= low; si el valor óptimo está en este rango (entre min y low) entonces el rango inferior se considera preferido.
  • high <= optimum <= max; si el valor óptimo está en este rango (entre high y max) entonces el rango superior se considera preferido.

Reglas en general para el uso del elemento meter

• Todos los atributos mencionados anteriormente pueden ser números punto flotantes.
• Segun las definiciones de cada atributo, las siguientes expresiones son verdaderas:

• min <= value <= max.
• min <= low <= high <= max (Sí low/hight es especificado).
• min <= optimum <= max (Si optimum es especificado).

No debemos utilizar la etiqueta (tag) meter para

• Indicar el estado de un progreso o tarea; para eso está la etiqueta progress.
• Representar valores en donde el valor sea arbitrario o no pueda ser acotado.

Estilos de la etiqueta (tag) meter

Al igual que otros elementos, podemos definir atributos como width, height, display etc. Para variar el tamaño o comportamiento del elemento (tag) meter; sin embargo existen pseudo clases específicas para el elemento meter:

   
   #meter5 {
   width:60%;
   height:60px;
}
#meter5::-webkit-meter-bar {
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #eee), color-stop(0.45, #eee), color-stop(0.55, #ccc));
   border-radius:5px;
}
#meter5::-webkit-meter-optimum-value {
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
   border-radius:5px;
}
#meter5::-webkit-meter-suboptimum-value {
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
   border-radius:5px;
}