Balise HTML <meter>
La balise <meter> est l’un des éléments HTML5. Cette balise définit une mesure scalaire dans une plage connue ou une représentation graphique d’un nombre fractionnaire. Elle peut être utilisée lorsqu’il est nécessaire d’afficher, par exemple, le niveau de charge de la batterie, l’utilisation du disque, etc. Pour utiliser la balise <meter>, vous devez connaître la valeur maximale.
Syntaxe
La balise <meter> se présente par paires. Le contenu est écrit entre les balises ouvrante (<meter>) et fermante (</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>Résultat
DANGER
La balise <meter> n’est pas utilisée pour indiquer la progression. Pour cela, utilisez la balise <progress>.
TIP
Utilisez les propriétés CSS background-color, box-shadow, width et height pour styliser l’élément <meter>.
Exemple de la balise HTML <progress> utilisée avec les propriétés CSS background-color, box-shadow, width et height :
Téléchargement et barres de progression à l’aide de la balise HTML <progress>|Exemple|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 220px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 0 3px #666 inset;
}
progress[value]::-webkit-progress-value {
background: -webkit-linear-gradient(-45deg, transparent 30%, #8ebf42 70%, #8ebf42 40%, transparent 30%),
-webkit-linear-gradient(top, #96f204, #8ebf42),
-webkit-linear-gradient(right, #96f204, #8ebf42);
background-size: 40px 20px, 100% 100%, 100% 100%;
}
</style>
</head>
<body>
<p>Téléchargement :
<progress value="35" max="100"></progress>
<span>35%</span>
</p>
<p>Barre de progression :
<progress value="80" max="100"></progress>
<span>80%</span>
</p>
</body>
</html>Affichage d’une plage de nombres
Les attributs min et max définissent la plage de la jauge. Utilisez l’attribut optimum pour définir la valeur souhaitée, par exemple une note de passage à un test. Notez que le style visuel basé sur l’attribut optimum peut varier selon les navigateurs.
Balise HTML <meter>
<meter value="15" min="0" max="70" optimum="60"></meter>Affichage d’un pourcentage
Affichage d’un pourcentage
<meter value="0.8">80%</meter>Styliser la balise HTML <meter>
Tout d’abord, 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 compatibles entre navigateurs pour le contrôle natif meter. Les pseudo-éléments spécifiques aux fournisseurs présentés ci-dessous sont obsolètes ou non pris en charge dans les navigateurs actuels ; il ne faut donc pas s’y fier pour le style en production. Si vous avez besoin d’un indicateur entièrement stylisé et accessible, envisagez d’utiliser un composant personnalisé conforme à ARIA ou la balise <progress> lorsque la valeur représente une progression.
Ici, vous devez utiliser des solutions de repli, car des pseudo-classes distinctes sont fournies par les navigateurs de grade A pour styliser l’élément <meter>. Nous utiliserons la solution de repli Webkit/Blink. Elle fournit les pseudo-classes suivantes :
| Pseudo-classe | Description |
|---|---|
| -webkit-meter-inner-element | Balise supplémentaire utilisée pour afficher 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 par défaut verte 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 la valeur et les attributs optimum sont en dehors de la plage low-high mais dans des zones opposées. Par exemple, value high > low > optimum. |
Ensuite, nous devrons définir la valeur par défaut de appearance de la jauge 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.
Styliser 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 du dégradé linéaire d’arrière-plan représente l’espace consommé par les sous-catégories.
Styliser 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 stylisation de la balise HTML <meter> :
Exemple de stylisation 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>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 de transitions et animez la background-position du conteneur avec keyframes.
Exemple de stylisation de la balise HTML <meter> avec la propriété CSS transition :
Exemple de stylisation 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>Les pseudo-éléments sur la jauge meter ne sont pris en charge que par les navigateurs Webkit. Les pseudo-éléments peuvent être utilisés pour afficher les métadonnées au-dessus de la jauge meter.
Styliser 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> utilisée avec des pseudo-éléments :
Exemple de la balise HTML <meter> utilisée 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>Utilisons maintenant la solution de repli pour Firefox. Peignez la jauge meter en utilisant -moz-appearance: meterbar. Si vous n’avez pas besoin du biseautage et du relief par défaut, définissez -moz-appearance sur "none".
Styliser la balise HTML <meter>
meter {
-moz-appearance: none;
width: 400px;
height: 30px;
}Firefox ne prend plus en charge le style de la jauge meter via des pseudo-éléments CSS.
Ici, nous allons styliser l’arrière-plan de la valeur de la jauge meter à l’aide de la pseudo-classe ::-moz-meter-bar.
Styliser 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.
Styliser 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 :
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>Les pseudo-éléments ::before et ::after sur la jauge meter ne sont pas pris en charge par Firefox. La prise en charge des transitions et des animations CSS3 est également faible.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| form | form_id | Indique le formulaire (ou les formulaires) auquel la balise <meter> appartient. |
| high | number | 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éfinie à une valeur supérieure à max, alors high = max. |
| low | number | 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 | number | Définit la valeur maximale possible. La valeur par défaut est 1. |
| min | number | Définit la valeur minimale possible. La valeur par défaut est 0. |
| optimum | number | Définit le nombre optimal, qui doit se situer dans la plage définie par les attributs min et max. Il peut être supérieur à la valeur high. |
| value | number | Définit la valeur actuelle. Si elle est omise, la valeur par défaut est 0.5. |
La balise <meter> prend en charge les attributs globaux et les attributs d’événement.
Practice
What is the function of the HTML <meter> tag?