▷ Etiqueta METER » HTML desde Cero

Si estás familiarizado con la barra de progreso HTML, que muestra cuánto se ha realizado de una actividad, verás que el elemento meter es similar a ella: ambos muestran un valor actual a partir de un valor máximo. Pero a diferencia de la barra de progreso, la barra de contador no se utiliza para mostrar el progreso.

Se utiliza para mostrar un valor estático en un rango específico, por ejemplo, puedes indicar el espacio de almacenamiento utilizado en un disco mostrando cuánto del espacio de almacenamiento está lleno y cuánto no.

Además, el elemento meter también puede utilizarse para visualizar hasta tres regiones dentro de su rango. Reutilizando el ejemplo del espacio de almacenamiento, en lugar de mostrar sólo cuánto espacio está ocupado, también puedes indicar visualmente si el espacio ocupado está poco lleno (digamos por debajo del 30%) o casi medio lleno (entre el 30 y el 60%) o más de medio lleno (por encima del 60%) utilizando diferentes colores. Esto ayuda a los usuarios a saber cuándo están llegando al límite de almacenamiento.

En este post, te mostraremos cómo dar estilo a la barra del medidor para los dos propósitos mencionados, es decir, un medidor simple (sin regiones indicadas) y dos ejemplos de medidores con 3 regiones indicadas por color. Para esto último, trabajaremos en la creación de un medidor de “marcas” para mostrar marcas malas, medias y buenas, y un medidor de “pH” para mostrar valores de pH ácido, neural y alcalino.

Elemento <meter>

Al igual que su hermano, el elemento <progress>, un elemento meter también debe tener una etiqueta de inicio (<meter>) y una etiqueta de final (</meter>). Esto resulta muy útil cuando diseñamos una técnica robusta de respaldo para los navegadores más antiguos que no admiten el elemento meter.

El elemento meter está configurado con varios atributos, incluido value (el valor mostrado), min (el valor más bajo en el rango) y max (el valor más alto posible en el rango). El siguiente fragmento de código configura la visualización de un informe que muestra el total de visitas y el número de visitas de los usuarios para cada navegador:

HTML

<h1>Informe mensual del navegador</h1>
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total
Visitas<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet
Explorer<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter>   
312 Opera<br>
<meter value="200" min="0" max="14417">200</meter>    200
otros<br>

Ejecuta el código anterior y verás como el elemento <meter> proporciona una manera útil de mostrar un gráfico de barras en una página web.

Atributos de <meter>

Antes de empezar con los ejemplos y profundizar, echemos un vistazo rápido a su lista de atributos a continuación, más acerca de estos atributos como sus valores predeterminados, etc se cubrirá en los ejemplos.

Aparte de los atributos globales, el elemento meter puede tener 6 atributos más.

value– Un número de punto flotante que representa el valor actual del rango medido. Esto debe estar entre el valor min y el max (si se especifica).
min– Indica el límite inferior del rango medido. Esto debe ser menor que el valor max (si se especifica). Si no se especifica, el valor mínimo es 0.
max– Indica el límite superior del rango medido. Este debe ser mayor que el valor min (si se especifica). Si no se especifica, el valor máximo es 1.0.
low– Representa el límite superior del extremo inferior del rango medido. Debe ser mayor que el atributo min, pero menor que el valor high y max (si se especifica). Si no se especifica, o si es menor que el valor mínimo, el valor low es igual al valor min.
high– Representa el límite inferior del extremo superior del rango medido. Debe ser menor que el atributo max, pero mayor que el valor low y min (si se especifica). Si no se especifica, o si es mayor que el valor max, el valor high es igual al valor max.
optimum– Este atributo indica el valor óptimo y debe estar dentro del rango de los valores min y max. Cuando se usa con el atributo low y high, indica la zona preferida para un rango dado. Por ejemplo:

min ≤ optimum ≤ low– Si el valor óptimo es entre los valores min y low, entonces el rango inferior se considera que es la zona preferida.

high ≤ optimum ≤ max– Si el valor óptimo es entre los valores high y max, entonces el rango superior se considera que es la zona preferida.

Un meter con todo se vería así:

HTML

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>
<meter max=1.0 min=0.0 value=0.5 high=.75 low=.25 optimum=0.5></meter>

Ejemplo 1: Estilo de un indicador sencillo

He aquí un ejemplo muy sencillo en el que sólo se utiliza un atributo, el value. Antes de continuar, necesitamos saber tres cosas primero:

(1) Hay un valor min y max por defecto que definen el rango de meter, que son 0 y 1 respectivamente. (2) Si el value especificado por el usuario no entra dentro del rango de meter, tomará el valor de mín o máx, el que más se aproxime. (3) La etiqueta de cierre es obligatoria.

La sintaxis es la siguiente:

HTML

<meter value="0.5">0.5</meter>

Alternativamente, también podemos añadir los atributos mín. y máx., proporcionando así un rango definido por el usuario de la siguiente manera:

HTML

<meter min="10" max="100" value="30"></meter>

Ejemplo del elemento meter con atributos min y max

Ejemplo 2: Estilo del indicador “Marcas”

Primero, necesitamos dividir el rango en tres regiones (izquierda/baja, medio, derecha/alta). Aquí es donde entran en juego los atributos de “low” y “high“. Así es cómo se dividen las tres regiones.

Las tres regiones se forman entre min y low, low y high, y high y max.

Ahora es evidente que hay ciertas condiciones que los valores de low y high deben seguir para que se formen las tres regiones:

low no puede ser menor que min y mayor que high y max.
high no puede ser mayor que max y menor que low y min.
Y cuando se rompe un criterio, tanto low como high adoptarán el valor de la otra variable en el criterio que no se cumple. Es decir, si el valor de low se encuentra por debajo de min, lo cual no debería ser, low tomará el valor de min.

En este ejemplo, consideraremos que nuestras tres regiones de izquierda a derecha son:

Pobre: (0-33)
Promedio: (34-60)
Bueno: (61-100)

Por lo tanto, los siguientes son los valores para los atributos; min="0" low="34" high="60" max="100".

Aquí tienes una imagen que visualiza las regiones.

Aunque hay tres regiones en el medidor que acabamos de crear, de momento sólo indicará dos “tipos” de regiones en sólo dos colores. ¿Por qué? Porque optimum está en la región media.

Punto optimum

En cualquier región (de las tres) en la que caiga el punto óptimo (optimum), se considera una “región óptima” coloreada en verde de manera predeterminada. La(s) región(es) inmediatamente adyacente(s) se llama(n) “región subóptima” y se colorea en naranja. La que está más alejada es una “región no muy óptima”, coloreada en rojo.

Hasta ahora, en nuestro ejemplo no hemos asignado un valor para optimum. Por lo tanto, el valor predeterminado se convierte en 50, haciendo que la región intermedia sea la “región óptima” y las que están justo al lado de ella (tanto a la izquierda como a la derecha) sean “regiones subóptimas”.

En resumen, en el caso anterior, cualquier valor del elemento medidor que caiga en la región intermedia se indica en verde; el resto en naranja.

HTML

<div class="meter-container">
  <div class="meter-wrapper">
    <label>Pobre</label>
    <meter min="0" low="34" high="60" max="100" value="40"></meter>
  </div>
  <div class="meter-wrapper">
    <label>Promedio</label>
    <meter min="0" low="34" high="60" max="100" value="28"></meter>
  </div>
  <div class="meter-wrapper">
    <label>Bueno</label>
    <meter min="0" low="34" high="60" max="100" value="80"></meter>
  </div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

meter {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f5f5f5;
  display: block;
  margin-bottom: 10px;
}

meter::-webkit-meter-bar {
  background: #f5f5f5;
  border-radius: 5px;
}

meter::-webkit-meter-optimum-value {
  background: #2ecc71;
  border-radius: 5px;
}

meter::-webkit-meter-suboptimal-value {
  background: #f39c12;
  border-radius: 5px;
}

meter::-webkit-meter-even-less-good-value {
  background: #e74c3c;
  border-radius: 5px;
}

Eso no es lo que queremos. Queremos que esté coloreado de esta manera: Pobre (rojo), Promedio (naranja), Bueno (verde).

Dado que la región de la derecha se considerará nuestra región óptima, le asignaremos un valor optimum que caerá dentro de la región de la derecha (cualquier valor entre 61-100, incluyendo 61 y 100).

Vamos a tomar 90 para este ejemplo. Esto hará que la región de la derecha sea “óptima”, la región del medio (inmediatamente adyacente) sea “subóptima” y la región más a la izquierda sea la región “no muy óptima”.

HTML

<div class="meter-container">
  <div class="meter-wrapper">
    <label>Pobre</label>
    <meter min="0" low="34" high="60" max="100" value="40" optimum="90"></meter>
  </div>
  <div class="meter-wrapper">
    <label>Promedio</label>
    <meter min="0" low="34" high="60" max="100" value="28" optimum="90"></meter>
  </div>
  <div class="meter-wrapper">
    <label>Bueno</label>
    <meter min="0" low="34" high="60" max="100" value="80" optimum="90"></meter>
  </div>
</div>

Esto es lo que obtendremos en nuestro meter.

Ejemplo 3: Estilo del medidor de pH

Nota

Antes de comenzar con nuestro ejemplo final, ten en cuenta que los estilos CSS dependen del agente de usuario y son experimentales.

Primero, un respiro sobre los valores de pH. Una solución ácida tiene un pH inferior a 7, una solución alcalina tiene un pH superior a 7 y si aterriza en 7, es una solución neutra.

Así pues, utilizaremos los siguientes valores y atributos:

low="7" , high="7", max="14", y el min tomará el valor por defecto de cero.

Antes de añadir el resto de atributos para completar el código, decidamos los colores: Ácido (rojo), Neutro (blanco) y Alcalino (azul). Consideremos también la región ácida (región izquierda por debajo de 7) como “óptima”.

Aquí están los pseudoelementos CSS a los que apuntaremos para obtener la visual deseada en firefox.

CSS

.ph_meter {
    background: lightgrey;
    width: 300px;
}
.ph_meter:-moz-meter-optimum::-moz-meter-bar {
    background:indianred;
}
.ph_meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: antiquewhite;
}
.ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: steelblue;
}

Aquí está el código html completo y el resultado final del medidor de pH.

HTML

<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="6"></meter>
<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="7"></meter>
<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="8"></meter>

Nota

Parece que Chrome tiene una interpretación particular en cuanto a cómo muestra los valores “optimum” y “suboptimal” en la etiqueta <meter>. En Chrome, incluso si especificamos un valor de “optimum”, los valores por encima del “optimum” aún pueden mostrarse en rojo. Esto es una peculiaridad del navegador y no está relacionado con el código en sí.

Reglas de Oro

Todos los atributos mencionados anteriormente pueden ser números de punto flotante, por ejemplo, 12, -8, 3.25
Con base en la definición de cada atributo, las siguientes desigualdades se vuelven verdaderas,

min ≤ value ≤ max
min ≤ low ≤ high ≤ max (si se especifica low/high)
min ≤ optimum ≤ max (si se especifica optimum)

No hay una forma explícita de especificar unidades en el elemento <meter>, pero se recomienda a los autores que especifiquen las unidades utilizando el atributo title. Por ejemplo:

HTML

<meter max="256" value="120" title="GB">120GB de 256GB ha sido usado</meter>

No uses el elemento <meter> para …

Indicar el progreso de la finalización de una tarea (usar la etiqueta progress en su lugar).
Representar un valor escalar de un rango arbitrario, por ejemplo, para informar el peso o la altura de una persona.

Ejemplo General con la Etiqueta <meter>

Este experimento muestra los diversos estados del elemento <meter> bajo una combinación diferente de valores de entrada para cada atributo. Siéntete libre de editar los valores de los atributos del código principal para modificar la salida meter.

HTML

<h1>Elemento HTML meter</h1>
<p>Nota: - Edita el código de abajo para divertirte!</p>
Caso 1 - Sin atributos
<meter></meter>
<br>
Caso 2 - value < max (default: min=0, max=1)
<meter value=".5"></meter>
<br>
Case 3 - value = max (default: min=0, max=1)
<meter value="1"></meter>
<br>
Caso 4 - value > max (default: min=0, max=1)  (si value > max entonces value = max)
<meter value="5"></meter>
<br>
Caso 5 - value < min (default: min=0, max=1)  (sif value < min entonces value = min)
<meter value=".5"></meter>
<br>
Caso 6 - value = min (default: min=0, max=1)
<meter value="0"></meter>
<br>
Caso 7 - value > min (default: min=0, max=1)
<meter value=".5"></meter>
<br>
Caso 8 - value < high (default: min=0, max=1)
<meter value=".5" high=".8"></meter>
<br>
Caso 9 - value = high (default: min=0, max=1)
<meter value=".8" high=".8"></meter>
<br>
Caso 10 - value > high (default: min=0, max=1) (si value > high observa cómo cambia el color)
<meter value=".9" high=".8"></meter>
<br>
Caso 11 - value < low (default: min=0, max=1) (si value < low observa cómo cambia el color)
<meter value=".15" low=".25"></meter>
<br>
Caso 12 - value = low (default: min=0, max=1)
<meter value=".25" low=".25"></meter>
<br>
Caso 13 - value > low (default: min=0, max=1)
<meter value=".5" low=".25"></meter>
<br>
Caso 14 - optimum < low < high (default: min=0, max=1) (si optimum < low observa cómo cambia el color)
<meter low=".25" optimum=".15" high=".75" value=".5"></meter>
<br>
Caso 15 - low < optimum < high (default: min=0, max=1)
<meter low=".25" optimum=".5" high=".75" value=".5"></meter>
<br>
Caso 16 - low < high < optimum (default: min=0, max=1) (si optimum > high observa cómo cambia el color)
<meter low=".25" optimum=".85" high=".75" value=".5"></meter>
<br>
Caso 17 - value < low < high < optimum (default: min=0, max=1) (si value < low y optimum > high observa cómo cambia el color)
<meter low=".25" optimum=".8" high=".75" value=".2"></meter>
<br>
Caso 18 - value > high > low > optimum (default: min=0, max=1) (si value > high y optimum < low observa cómo cambia el color)
<meter low=".25" optimum=".2" high=".75" value=".8"></meter>

Visita https://caniuse.com/ para obtener información actualizada sobre la compatibilidad de este elemento con el navegador….

5/5 - (7 votos)

Etiqueta METER

Elemento <meter>

Atributos de <meter>

Ejemplo 1: Estilo de un indicador sencillo

Ejemplo 2: Estilo del indicador “Marcas”

Ejemplo 3: Estilo del medidor de pH

Reglas de Oro

Ejemplo General con la Etiqueta <meter>

Alex Walton

Deja una respuesta Cancelar la respuesta

Presiona ESC para cerrar

Elemento <meter>

Atributos de <meter>

Ejemplo 1: Estilo de un indicador sencillo

Ejemplo 2: Estilo del indicador “Marcas”

Ejemplo 3: Estilo del medidor de pH

Reglas de Oro

Ejemplo General con la Etiqueta <meter>

Compartir Artículo:

Alex Walton

Etiqueta FIGURE y FIGCAPTION

Etiqueta PROGRESS

Deja una respuesta Cancelar la respuesta