Tag HTML <meter>

Il tag <meter> è uno degli elementi HTML5. Definisce una misurazione scalare all'interno di un intervallo noto — un singolo valore che si trova da qualche parte tra un minimo e un massimo. I casi d'uso tipici includono il livello di carica della batteria, l'utilizzo del disco, un punteggio di un test, una valutazione di rilevanza o quanto è pieno un contenitore. Poiché il gauge necessita di una scala fissa su cui disegnare, dovresti sempre conoscere (e di solito dichiarare) il valore massimo.

Questa pagina tratta la sintassi e gli attributi di <meter>, come gli attributi low, high e optimum influenzano il colore del gauge, come etichettare un meter per l'accessibilità e i limiti dello stile con CSS.

Informazione

<meter> vs <progress>: usa <meter> per una misurazione statica (es. "6,7 GB di 8 GB utilizzati"). Usa <progress> per il completamento di un'attività che avanza verso il 100% (es. il caricamento di un file o il caricamento di una pagina). Sembrano simili ma significano cose diverse.

Sintassi

Il tag <meter> va in coppia. Il contenuto viene scritto tra i tag di apertura (<meter>) e di chiusura (</meter>).

Esempio del tag HTML `<meter>`:

Esempio del tag HTML <meter>|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br />
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Provalo tu stesso »

Risultato

Pericolo

Il tag <meter> non viene utilizzato per indicare un avanzamento. Per questo scopo, usa il tag <progress>.

Suggerimento

Usa le proprietà CSS background-color, box-shadow, width e height per stilizzare l'elemento <meter>.

Accessibilità: etichettare sempre un meter

Un elemento <meter> non ha un nome accessibile implicito. Da solo, uno screen reader annuncia solo il valore, senza alcuna indicazione di cosa si stia misurando. Il testo che inserisci tra i tag è un fallback visivo per browser molto vecchi — non viene esposto in modo affidabile come nome accessibile.

Fornisci sempre a ogni meter un'etichetta reale. L'opzione più chiara è un elemento <label> associato tramite id; in alternativa usa aria-label o aria-labelledby.

Etichettare un elemento <meter>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Associated <label> -->
    <label for="disk">Disk usage:</label>
    <meter id="disk" value="6" min="0" max="8">6 GB of 8 GB</meter>

    <!-- aria-label when no visible label is shown -->
    <meter value="0.6" aria-label="Password strength">60%</meter>
  </body>
</html>

Result

Zone di colore: `low`, `high` e `optimum`

Il browser colora il meter automaticamente in base a dove cade il value rispetto agli attributi low, high e optimum. Le soglie dividono l'intervallo in tre fasce — sotto low, tra low e high, e sopra high — e optimum indica al browser quale fascia è quella buona. Da ciò, il browser sceglie uno di tre stati:

Verde — il valore si trova nella fascia (o adiacente alla fascia) che contiene optimum. Questa è la zona "buona".
Giallo — il valore è una fascia distante dalla fascia ottimale (accettabile, ma non ideale).
Rosso — il valore si trova nella fascia sul lato opposto dell'intervallo rispetto a optimum (la zona peggiore).

I colori esatti dipendono dal browser, ma la logica verde/giallo/rosso è coerente. Nota che il significato di alto e basso non è "grande = buono". Se optimum è sotto low, allora i valori piccoli sono verdi e i valori grandi diventano rossi.

Tre meter che corrispondono ai tre stati di colore:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- value above high, optimum is low -> red -->
    <label for="m1">Server load (high is bad):</label>
    <meter id="m1" value="90" min="0" max="100" low="33" high="66" optimum="10">90%</meter>
    <br />

    <!-- value in the middle band -> yellow -->
    <label for="m2">Server load (medium):</label>
    <meter id="m2" value="50" min="0" max="100" low="33" high="66" optimum="10">50%</meter>
    <br />

    <!-- value in the optimum band -> green -->
    <label for="m3">Server load (low is good):</label>
    <meter id="m3" value="15" min="0" max="100" low="33" high="66" optimum="10">15%</meter>
  </body>
</html>

Result

Poiché optimum (10) si trova nella fascia bassa, i valori bassi sono sani (verdi) e i valori alti sono pericolosi (rossi) — esattamente quello che si desidera per qualcosa come il carico CPU. Invertire optimum su un numero alto inverte i colori, il che si adatta a un meter di "livello batteria" o "forza della password" dove più è meglio.

Visualizzare un intervallo numerico

Gli attributi min e max definiscono la scala su cui viene disegnato il gauge. Il value viene interpretato su quella scala: con min="0" e max="70", un value di 15 riempie circa il 21% della barra. Usa l'attributo optimum per contrassegnare il punto ideale nell'intervallo — ad esempio, un voto sufficiente in un test — che (insieme a low e high) controlla il colore del gauge descritto sopra.

Un punteggio di test su 70, dove più alto è meglio:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="score">Test score:</label>
    <meter id="score" value="15" min="0" max="70" low="35" high="55" optimum="65">15 out of 70</meter>
  </body>
</html>

Result

Visualizzare una percentuale

Se ometti min e max, il loro valore predefinito è 0 e 1. Questo rende <meter> comodo per le frazioni: un value di 0.8 viene visualizzato come l'80% della barra. Questo è utile per cose come un punteggio di rilevanza o un indicatore di "completamento del profilo".

Fornisci sempre un'etichetta visibile (o aria-label) e un testo di fallback leggibile, in modo che il significato sia chiaro senza lo stile.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="complete">Profile completeness:</label>
    <meter id="complete" value="0.8">80%</meter>
  </body>
</html>

Result

Stilizzare il tag HTML `<meter>`

Prima di tutto, imposta le dimensioni con le proprietà width e height.

Esempio del tag HTML <meter>:

meter {
  width: 300px;
  height: 20px;
}

I browser moderni non forniscono hook di stile affidabili e cross-browser per il controllo nativo meter. Gli pseudo-elementi vendor-specific mostrati di seguito sono deprecati o non supportati nei browser attuali, quindi non dovrebbero essere utilizzati per lo stile in produzione. Se hai bisogno di un indicatore completamente stilizzato e accessibile, considera l'utilizzo di un componente personalizzato conforme ad ARIA o il tag <progress> quando il valore rappresenta un progresso.

Gli esempi seguenti sono mantenuti a titolo di riferimento, ma trattali come fragili: ogni browser espone i propri pseudo-elementi non standard, non sono interoperabili e alcuni sono stati rimossi del tutto. Se hai bisogno di un indicatore completamente stilizzato e accessibile, costruisci un componente personalizzato con elementi semplici usando role="meter", aria-valuenow, aria-valuemin e aria-valuemax, e anima quello. I motori Webkit/Blink espongono i seguenti pseudo-elementi:

Pseudo-class	Descrizione
-webkit-meter-inner-element	Markup aggiuntivo utilizzato per il rendering dell'elemento meter in sola lettura.
-webkit-meter-bar	Contiene il gauge del meter con il valore.
-webkit-meter-optimum-value	Il valore attuale dell'elemento meter, che per impostazione predefinita è verde quando l'attributo value rientra nell'intervallo low-high.
-webkit-meter-suboptimum-value	Il tag meter diventa giallo quando il valore è fuori dall'intervallo low-high.
-webkit-meter-even-less-good-value	Il tag meter diventa rosso quando il valore e gli attributi optimum sono fuori dall'intervallo low-high ma in zone opposte. Ad esempio, value alto > low > optimum.

Quindi, sarà necessario impostare l'appearance predefinita del gauge del meter su "none".

Tag meter stilizzato con la proprietà appearance

meter {
  -webkit-appearance: none;
}

Nel nostro esempio, utilizzeremo le pseudo-classi -webkit-meter-bar e -webkit-meter-optimum-value.

Stilizzare il tag HTML <meter>

meter::-webkit-meter-bar {
  background: none;
  background-color: lightgrey;
  box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 3px 3px -3px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

Ogni colore nel gradiente lineare di sfondo rappresenta lo spazio occupato dalle sotto-categorie.

Stilizzare il tag HTML <meter>

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
  transition: width .5s;
  width: 100%;
}

Esempio di stilizzazione del tag HTML `<meter>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        box-shadow: 0 3px 3px -3px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Provalo tu stesso »

Le proprietà transition e animation sull'elemento <meter> sono supportate dai browser Webkit. Modifica la larghezza del valore (su :hover) usando le transizioni e anima il background-position del contenitore con i keyframes.

Esempio di stilizzazione del tag HTML `<meter>` con la proprietà CSS transition:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
        transition: width .5s;
        width: 100% !important;
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Provalo tu stesso »

Gli pseudo-elementi sul gauge del meter sono supportati solo dai browser Webkit. Gli pseudo-elementi possono essere utilizzati per visualizzare le meta-informazioni sopra il gauge del meter.

Stilizzare il tag HTML <meter>

meter {
  margin: 2em;
  position: relative;
}

meter::before {
  content: 'Used storage';
  position: absolute;
  top: -100%;
}

meter::after {
  content: 'Free storage';
  position: absolute;
  top: -100%;
  right: 0;
}

Esempio del tag HTML `<meter>` usato con pseudo-elementi:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        margin: 2em;
        width: 400px;
        height: 30px;
        position: relative;
      }
      meter::before {
        content: 'Used storage';
        position: absolute;
        top: -100%;
      }
      meter::after {
        content: 'Free storage';
        position: absolute;
        top: -100%;
        right: 0;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
        transition: width .5s;
        width: 100% !important;
        /* !important required. to override the inline styles in WebKit. */
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Provalo tu stesso »

Ora usiamo il fallback per Firefox. Disegna il gauge del meter usando -moz-appearance: meterbar. Se non hai bisogno del bevel e dell'emboss predefiniti, imposta -moz-appearance su "none".

Stilizzare il tag HTML <meter>

meter {
  -moz-appearance: none;
  width: 400px;
  height: 30px;
}

Firefox non supporta più lo stile del gauge del meter tramite pseudo-elementi CSS.

Qui, stilizzeremo lo sfondo del valore del gauge del meter usando la pseudo-classe ::-moz-meter-bar.

Stilizzare il tag HTML <meter>

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

In Firefox, puoi usare il selettore meter stesso per stilizzare lo sfondo del contenitore.

Stilizzare il tag HTML <meter>

meter {
  background: none;
  background-color: lightgray;
  box-shadow: 0 5px 5px -5px #333 inset;
}

Esempio del tag HTML `<meter>` per Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 400px;
        height: 30px;
        background: none;
        /* Required to get rid of the default background property */
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-moz-meter-bar {
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Provalo tu stesso »

Gli pseudo-elementi ::before e ::after sul gauge del meter non sono supportati da Firefox. Anche il supporto per le transizioni e le animazioni CSS3 è limitato.

Attributi

Attributo	Valore	Descrizione
form	form_id	Indica il form (o i form) a cui appartiene il tag `<meter>`.
high	number	Indica i valori alti (ma non quelli massimi). Se il valore high è inferiore a low, allora high = low. Se high è impostato maggiore di max, allora high = max.
low	number	Definisce i valori bassi (ma non quelli minimi). Questo valore deve essere inferiore a high. Se il valore low è inferiore a min, allora low = min.
max	number	Definisce il valore massimo possibile. Il valore predefinito è 1.
min	number	Definisce il valore minimo possibile. Il valore predefinito è 0.
optimum	number	Definisce il numero ottimale, che deve rientrare nell'intervallo definito dagli attributi min e max. Può essere maggiore del valore high.
value	number	Imposta il valore corrente. Se omesso, il valore predefinito è 0,5.

Il tag <meter> supporta gli Attributi Globali e gli Attributi Evento.

Esercitazione

Pratica

Cosa rappresenta l'elemento HTML meter?

Una misurazione scalare all'interno di un intervallo noto, come l'utilizzo del disco o un punteggio di test.Il progresso di completamento di un'attività che avanza verso il 100%.Un controllo a discesa per selezionare un'opzione.Un collegamento ipertestuale a un altro documento.

Sintassi

Esempio del tag HTML <meter>:

Risultato

Accessibilità: etichettare sempre un meter

Zone di colore: low, high e optimum

Visualizzare un intervallo numerico

Visualizzare una percentuale

Stilizzare il tag HTML <meter>

Esempio di stilizzazione del tag HTML <meter>:

Esempio di stilizzazione del tag HTML <meter> con la proprietà CSS transition:

Esempio del tag HTML <meter> usato con pseudo-elementi:

Esempio del tag HTML <meter> per Firefox:

Attributi

Esercitazione

Esempio del tag HTML `<meter>`:

Zone di colore: `low`, `high` e `optimum`

Stilizzare il tag HTML `<meter>`

Esempio di stilizzazione del tag HTML `<meter>`:

Esempio di stilizzazione del tag HTML `<meter>` con la proprietà CSS transition:

Esempio del tag HTML `<meter>` usato con pseudo-elementi:

Esempio del tag HTML `<meter>` per Firefox: