La balise HTML <meter>

La balise <meter> est l'un des éléments HTML5. Elle définit une mesure scalaire dans une plage connue — une valeur unique qui se situe quelque part entre un minimum et un maximum. Les cas d'usage typiques incluent le niveau de charge de la batterie, l'espace disque utilisé, le score d'un test, une note de pertinence ou le remplissage d'un conteneur. Comme la jauge doit s'appuyer sur une échelle fixe, vous devez toujours connaître (et généralement déclarer) la valeur maximale.

Cette page couvre la syntaxe et les attributs de <meter>, comment les attributs low, high et optimum déterminent la couleur de la jauge, comment étiqueter un meter pour l'accessibilité, et les limites du style CSS.

Info

<meter> vs <progress> : utilisez <meter> pour une mesure statique (ex. « 6,7 Go sur 8 Go utilisés »). Utilisez <progress> pour la progression d'une tâche qui avance vers 100 % (ex. un téléchargement de fichier ou le chargement d'une page). Ils se ressemblent, mais ont des significations différentes.

Syntaxe

La balise <meter> fonctionne par paires. Le contenu est écrit entre les balises d'ouverture (<meter>) et de fermeture (</meter>).

Exemple de la balise HTML `<meter>` :

Exemple de la balise 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>

Essayez vous-même »

Résultat

Danger

La balise <meter> n'est pas utilisée pour indiquer une progression. Pour cela, utilisez la balise <progress>.

Astuce

Utilisez les propriétés CSS background-color, box-shadow, width et height pour mettre en forme l'élément <meter>.

Accessibilité : toujours étiqueter un meter

Un élément <meter> n'a pas de nom accessible implicite. Seul, un lecteur d'écran annonce uniquement la valeur, sans indiquer ce qui est mesuré. Le texte placé entre les balises est un contenu de repli visuel pour les très anciens navigateurs — il n'est pas systématiquement exposé comme nom accessible.

Donnez toujours une étiquette réelle à chaque meter. L'option la plus claire est un élément <label> associé par id ; sinon, utilisez aria-label ou aria-labelledby.

Étiquetage d'un élément <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

Zones de couleur : `low`, `high` et `optimum`

Le navigateur colorie automatiquement la jauge en fonction de l'emplacement de value par rapport aux attributs low, high et optimum. Ces seuils divisent la plage en trois bandes — en dessous de low, entre low et high, et au-dessus de high — et optimum indique au navigateur quelle bande est la bonne. Le navigateur choisit alors l'un des trois états suivants :

Vert — la valeur se trouve dans (ou à côté de) la bande qui contient optimum. C'est la zone « bonne ».
Jaune — la valeur se trouve à une bande de la bande optimale (acceptable, mais pas idéale).
Rouge — la valeur se trouve dans la bande à l'opposé de optimum dans la plage (la pire zone).

Les couleurs exactes dépendent du navigateur, mais la logique vert/jaune/rouge est cohérente. Notez que la signification de high et low n'est pas « grand = bon ». Si optimum est inférieur à low, alors les petites valeurs sont vertes et les grandes valeurs deviennent rouges.

Trois jauges correspondant aux trois états de couleur :

<!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

Comme optimum (10) se situe dans la bande basse ici, les valeurs faibles sont saines (vert) et les valeurs élevées sont dangereuses (rouge) — exactement ce que vous souhaitez pour quelque chose comme la charge CPU. Inversez optimum vers une valeur élevée et les couleurs s'inversent, ce qui convient à une jauge de « niveau de batterie » ou de « force du mot de passe » où plus la valeur est élevée, mieux c'est.

Afficher une plage numérique

Les attributs min et max définissent l'échelle sur laquelle la jauge est dessinée. La value est interprétée sur cette échelle : avec min="0" et max="70", une value de 15 remplit environ 21 % de la barre. Utilisez l'attribut optimum pour marquer le point idéal dans la plage — par exemple, la note de passage à un test — qui (combiné à low et high) contrôle la couleur de la jauge décrite ci-dessus.

Un score de test sur 70, où plus c'est élevé, mieux c'est :

<!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

Afficher un pourcentage

Si vous omettez min et max, ils prennent par défaut les valeurs 0 et 1. Cela rend <meter> pratique pour les fractions : une value de 0.8 s'affiche comme 80 % de la barre. C'est utile pour des choses comme un score de pertinence ou un indicateur de « complétude du profil ».

Fournissez toujours une étiquette visible (ou aria-label) et un texte de repli lisible par l'humain, afin que la signification soit claire sans le style.

<!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

Mise en forme de la balise HTML `<meter>`

Avant tout, définissez la taille avec les propriétés width et height.

Exemple de la balise HTML <meter> :

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

Les navigateurs modernes ne fournissent pas de points d'ancrage de style fiables et interopérables pour le contrôle natif meter. Les pseudo-éléments spécifiques aux fournisseurs présentés ci-dessous sont dépréciés ou non pris en charge par les navigateurs actuels ; il ne faut donc pas s'y fier pour un style en production. Si vous avez besoin d'un indicateur entièrement stylisé et accessible, envisagez d'utiliser un composant personnalisé conforme aux normes ARIA ou la balise <progress> quand la valeur représente une progression.

Les exemples ci-dessous sont conservés à titre de référence, mais traitez-les comme fragiles : chaque navigateur expose ses propres pseudo-éléments non standard, ils ne sont pas interopérables et certains ont été entièrement supprimés. Si vous avez besoin d'un indicateur entièrement stylisé et accessible, construisez un composant personnalisé à partir d'éléments ordinaires avec role="meter", aria-valuenow, aria-valuemin et aria-valuemax, et animez-le à la place. Les moteurs Webkit/Blink exposent les pseudo-éléments suivants :

Pseudo-classe	Description
-webkit-meter-inner-element	Balisage supplémentaire utilisé pour le rendu de l'élément meter en lecture seule.
-webkit-meter-bar	Contient la jauge du meter qui affiche la valeur.
-webkit-meter-optimum-value	La valeur actuelle de l'élément meter, qui est verte par défaut lorsque l'attribut value se situe dans la plage low-high.
-webkit-meter-suboptimum-value	La balise meter devient jaune lorsque la valeur est en dehors de la plage low-high.
-webkit-meter-even-less-good-value	La balise meter devient rouge lorsque les attributs value et optimum sont en dehors de la plage low-high mais dans des zones opposées. Par exemple, value high > low > optimum.

Ensuite, il faudra définir l'apparence par défaut de la jauge du meter sur « none ».

Balise meter stylisée avec la propriété appearance

meter {
  -webkit-appearance: none;
}

Dans notre exemple, nous utiliserons les pseudo-classes -webkit-meter-bar et -webkit-meter-optimum-value.

Mise en forme de la balise 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%;
}

Chaque couleur dans le dégradé linéaire de fond représente l'espace consommé par les sous-catégories.

Mise en forme de la balise 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%;
}

Exemple de mise en forme de la balise 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>

Essayez vous-même »

Les propriétés transition et animation sur l'élément <meter> sont prises en charge par les navigateurs Webkit. Modifiez la largeur de la valeur (au survol :hover) à l'aide des transitions et animez la background-position du conteneur avec les keyframes.

Exemple de mise en forme de la balise HTML `<meter>` avec la propriété 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>

Essayez vous-même »

Les pseudo-éléments sur la jauge du meter sont pris en charge uniquement par les navigateurs Webkit. Ces pseudo-éléments peuvent être utilisés pour afficher des méta-informations au-dessus de la jauge du meter.

Mise en forme de la balise 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;
}

Exemple de la balise HTML `<meter>` avec des pseudo-éléments :

<!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>

Essayez vous-même »

Utilisons maintenant le repli Firefox. Peignez la jauge du meter en utilisant -moz-appearance: meterbar. Si vous n'avez pas besoin du biseautage et de l'estampage par défaut, définissez -moz-appearance sur « none ».

Mise en forme de la balise HTML <meter>

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

Firefox ne prend plus en charge le style de la jauge du meter via des pseudo-éléments CSS.

Ici, nous allons styliser l'arrière-plan de la valeur de la jauge du meter en utilisant le pseudo-classe ::-moz-meter-bar.

Mise en forme de la balise 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%;
}

Dans Firefox, vous pouvez utiliser le sélecteur meter lui-même pour styliser l'arrière-plan du conteneur.

Mise en forme de la balise HTML <meter>

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

Exemple de la balise HTML `<meter>` pour 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>

Essayez vous-même »

Les pseudo-éléments ::before et ::after sur la jauge du meter ne sont pas pris en charge par Firefox. La prise en charge des transitions et animations CSS3 y est également limitée.

Attributs

Attribut	Valeur	Description
form	form_id	Indique le ou les formulaire(s) auquel appartient la balise `<meter>`.
high	nombre	Indique les valeurs élevées (mais pas les valeurs maximales). Si la valeur high est inférieure à low, alors high = low. Si high est défini à une valeur supérieure à max, alors high = max.
low	nombre	Définit les valeurs basses (mais pas les valeurs minimales). Cette valeur doit être inférieure à high. Si la valeur low est inférieure à min, alors low = min.
max	nombre	Définit la valeur maximale possible. La valeur par défaut est 1.
min	nombre	Définit la valeur minimale possible. La valeur par défaut est 0.
optimum	nombre	Définit la valeur optimale, qui doit se situer dans la plage définie par les attributs min et max. Elle peut être supérieure à la valeur high.
value	nombre	Définit la valeur actuelle. Si omis, la valeur par défaut est 0,5.

La balise <meter> prend en charge les attributs globaux et les attributs d'événement.

Pratique

Que représente l'élément HTML meter ?

Une mesure scalaire dans une plage connue, comme l'espace disque utilisé ou un score de test.La progression de l'achèvement d'une tâche qui avance vers 100 %.Un contrôle de liste déroulante pour sélectionner une option.Un hyperlien vers un autre document.

Syntaxe

Exemple de la balise HTML <meter> :

Résultat

Accessibilité : toujours étiqueter un meter

Zones de couleur : low, high et optimum

Afficher une plage numérique

Afficher un pourcentage

Mise en forme de la balise HTML <meter>

Exemple de mise en forme de la balise HTML <meter> :

Exemple de mise en forme de la balise HTML <meter> avec la propriété CSS transition :

Exemple de la balise HTML <meter> avec des pseudo-éléments :

Exemple de la balise HTML <meter> pour Firefox :

Attributs

Pratique

Exemple de la balise HTML `<meter>` :

Zones de couleur : `low`, `high` et `optimum`

Mise en forme de la balise HTML `<meter>`

Exemple de mise en forme de la balise HTML `<meter>` :

Exemple de mise en forme de la balise HTML `<meter>` avec la propriété CSS transition :

Exemple de la balise HTML `<meter>` avec des pseudo-éléments :

Exemple de la balise HTML `<meter>` pour Firefox :