El elemento meter HTML5

16-12-2013 - Andrés Cruz

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:

<meter></meter>

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:

Pseudo clases	Descripción
`-webkit-meter-bar`	Define un color para el tag meter.
`-webkit-meter-optimum-value`	Define un color para el tag meter cuando el medidor está dentro del rango low-high (`low <= value <= high`). El color por defecto es verde.
`-webkit-meter-suboptimum-value`	Define un color para el tag meter cuando el medidor está fuera del rango low-high (`low > value` o `value > high`). El color por defecto es amarillo.

Ejemplo 1

Este ejemplo muestra algunos de los atributos presentados anteriormente: value, max y min.

Además de esto, usaremos un script para variar el valor del tag meter en un tiempo determinado y apreciar su comportamiento en el tiempo.

Para ver el código completo del experimento, has clic aquí.

Ejemplo 2

Este ejemplo muestra todos los atributos presentados anteriormente: value, max, min, low y high; además, todos ellos presentan uno de las pseudo clases ya definidas y explicadas en la sección de arriba.

Con ayuda del script anterior, veremos como:

Cambiar el color del medidor:

    #meter2::-webkit-meter-bar {
        background:blue;
    }

Cambiar el color del medidor cuando el medidor esta en el rango low <= optimum <= high:

    #meter2::-webkit-meter-bar {
        background:blue;
    }

Cambiar el color cuando esta de este rango; es decir; low <= optimum <= high:

    #meter2::-webkit-meter-bar {
        background:blue;
    }

Para ver el código completo del experimento, has clic aquí.

Ejemplo 3

También podemos aplicarle un gradiente, en vez de un color solido:

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

Para ver el código completo del experimento, has clic aquí.

Progreso HTML

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy