HTML : meter

Introduction à l'utilisation du nouvel élément HTML 5 meter et à la manière de lui assurer un rendu sur les navigateurs qui ne le supportent pas.

Présentation

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

ref-html5-meter

L'élément meter devrait donc être utilisé quand nous avons une mesure, quelle qu'elle soit, qui peut prendre une valeur dans un intervalle défini. Autrement dit : « une jauge ». Pour évaluer la « nature » de cette mesure, nous disposons de 2 séries de propriétés.

Propriétés pour gérer l'intervalle de valeurs
Propriétés Fonctions
min Valeur minimale qui peut prendre la mesure (0 par défaut).
max Valeur maximale qui peut prendre la mesure (1 par défaut).
value Valeur courante.
Propriétés pour définir les zones basse, médiane et haute de l'intervalle de valeurs
Propriétés Fonctions
low Valeur supérieure de la zone basse de la jauge (min par défaut).
high Valeur inférieure de la zone haute de la jauge (max par défaut).
optimum Valeur optimum de la jauge (médiane entre min et max par défaut).

Toutes ces propriétés sont des nombres flottants qui doivent obéir aux règles suivantes :

  • minvaluemax
  • minlowmax
  • minhighmax
  • minoptimummax
  • lowhigh
Règles arithmétiques liant les propriétés de meter.

Images

Représentation graphique des propriétés de l'élément meter.

En fonction de la position de la valeur optimum, les zones délimitées par les valeurs de low et high seront définies comme « optimale », « sub-optimale » ou « encore moins bonne ».

Images

Rprésentation graphiques des zones d'un l'élément meter.

Notons au passage qu'il aurait été peut-être plus judicieux de définir la valeur par défaut de optimum comme la valeur médiane de la zone délimitée par low et high et non pas celle délimitée par min et max.

Rendu par défaut de l'élément

Prenons pour exemple un élément meter définissant une échelle de valeurs allant de 0 à 100.

<meter min="0" max="100" low="25" high="80" value="40">40%</meter>
Code HTML d'un élément meter.

Pour illustrer les différents états de la jauge, créons une série d'éléments pour lesquels nous ferons varier la valeur et/ou l'optimum :

Value: 40 (low: 25 ; high: 80; optimum: 50)
40%
Value: 20 (low: 25 ; high: 80; optimum: 50)
20%
Value: 90 (low: 25 ; high: 80; optimum: 50)
90%
Value: 90 (low: 25 ; high: 80; optimum: 20)
90%
Rendu d'élément meter.

Si vous affichez cette page avec Chromium ≥ 17, Opera ≥ 11 ou Firefox ≥ 16, vous verrez une jauge graphique en lieu et place du texte des éléments meter ; une jauge verte pour les valeurs dans la zone optimale, jaune pour celles se trouvant dans une zone sub-optimale et rouge si elles sont dans une zone encore moins bonne. Seul le texte est visible avec les autres navigateurs.

Capture d'écran

Affichage des éléments meter ci-dessus avec le navigateur web Opera.

Implémenter un rendu

La première implémentation de rendu en 2012 avait consisté à suppléer les lacunes de certains navigateurs web en injectant du code quand le rendu graphique le nécessitait et en développant un modèle de données permettant de gérer un intervalle de valeurs. L'implémentation actuelle aborder les choses différemment en décorant l'élément meter par un élément span qui hérite de ces propriétés afin (1) d'harmoniser le rendu graphique et (2) de gérer une propriété qui n'existe pas encore : l'orientation.

Le code

<meter value="3" min="0" max="5">3/5</meter>
Exemple de code HTML initial.
<span class="meter">
    <span class="value">3/5</span>
    <meter value="3" min="0" max="5" aria-hidden="true">3/5</meter>
</span>
Exemple de code HTML final.
Contenu indisponible.
Code javascript.
/**
 *  range et meter
 *  ============================
 *  
 *  Pour une représentation d'un intervalle de valeur ou la représentation d'une valeur.
 *  
 *  ----
 *  °°stx-html°°
 *      <span class="range" aria-valuemin="0" aria-valuemax="10">
 *          <span class="value">
 *              <span class="from" aria-valuemin="0" aria-valuemax="7" aria-valuenow="3">3</span>
 *              <span class="to" aria-valuemin="3" aria-valuemax="10" aria-valuenow="7">7</span>
 *          </span>
 *      </span>
 *  ----
 *  Code HTML pour un .range
 *  
 *  ----
 *  °°stx-html°°
 *      <span class="meter">
 *          <span class="value">3/5</span>
 *          <meter value="3" min="0" max="5" aria-hidden="true">3/5</meter>
 *      </span>
 *  ----
 *  Code HTML pour .meter
 */

.meter,
.range {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
/*    vertical-align: -0.2em;*/
/*    vertical-align: middle;*/
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 0;
    height: 1rem;
    width: 5rem;
    max-width: 100%;
    /* typo */
    line-height: 1;
    /* colors */
    transition: all 0.1s;
    border-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.03);
/*    background-image: linear-gradient(#e6e6e6, #e6e6e6, #eee 20%, #ccc 45%, #ccc 55%);*/
    /*box-shadow: inset 2px 1px 5px rgba(0,0,0,0.3);*/
}

.meter > .value,
.range > .value {
    position: absolute;
    /* box */
    display: block;
    height: 100%;
    width: 0;
    overflow: hidden;
    /* typo */
    font-size: 0;
    line-height: 0;
    /* colors */
    transition: all 0.2s;
    background-color: var(--green-mid);
/*    background-image: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
}

.meter > .optimum-value {
/*    background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
    background-color: var(--green-mid);
}
.meter > .sub-optimum-value {
/*  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);*/
  background-color: var(--yellow-mid);
}
.meter > .even-less-good-value {
/*  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);*/
  background-color: var(--red-mid);
}

/*

vertical range and vertical meter
---------------------------------
*/

.meter[aria-orientation="vertical"],
.range[aria-orientation="vertical"] {
    height: 5em;
    width: 1em;
    background-color: #7a3;
/*    background-image: linear-gradient(90deg, #e6e6e6, #e6e6e6, #eee 20%, #ccc 45%, #ccc 55%);*/
}

.meter[aria-orientation="vertical"] > .value,
.range[aria-orientation="vertical"] > .value {
    width: 100%;
    height: 0;
    background-color: #7a3;
/*    background-image: linear-gradient(90deg, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);*/
}
.meter[aria-orientation="vertical"] > .value {
    bottom: 0;
}
/*
.meter[aria-orientation="vertical"] > .optimum-value {
  background: linear-gradient(90deg, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
.meter[aria-orientation="vertical"] > .sub-optimum-value {
  background: linear-gradient(90deg, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
.meter[aria-orientation="vertical"] > .even-less-good-value {
  background: linear-gradient(90deg, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
*/
/*

.meter specific : hide meter element
------------------------------------
*/

.meter > meter {
    display: none;
}

/*

.range specific : define from and to position
----------------------------------------------

TODO: styles for mouse interaction with from|to elements.

*/

.range > .value > span {
    position: absolute;
    top: 0;
    bottom: 0;
}
.range[aria-orientation="vertical"] > .value > span {
    left: 0;
    right: 0;
}
.range[aria-orientation="vertical"] > .value > .from {
    top: auto;
}
.range[aria-orientation="vertical"] > .value > .to {
    bottom: auto;
}
Code css.
Value: 40 (low: 25 ; high: 80; optimum: 50)
40%
Value: 20 (low: 25 ; high: 80; optimum: 50)
20%
Value: 90 (low: 25 ; high: 80; optimum: 50)
90%
Value: 90 (low: 25 ; high: 80; optimum: 20)
90%
Implémentation du rendu de l'élément meter grâce au css et au javascript.
  • 40%
  • 20%
  • 90%
  • 90%

40% 20% 90% 90%

Rendu d'éléments meter verticaux.

Remarques

  • Toute l'API liée à la notion de jauge est déportée vers l'élément englobant (décorateur).
  • La notion d'orientation est portée par l'attribut aria « aria-orinetation ». La propriété « orient » n'est pour l'instant pas standardisée et uniquement reconnue par Firefox.

Autre chose qu'une jauge : notation

L'élément meter est rendu par défaut sous forme de jauge mais il peut très bien convenir à un système de notation sous forme d'étoiles par exemple grâce à des images de fond.

<meter class="rating" min="0" max="5" value="3">3/5</meter>
Code HTML d'un élément meter utilisé pour une notation (3/5).

3/5

Rendu de l'élement meter utilisé pour une notation.

Capture d'écran

Affichage d'un élément meter utilisé pour la notation sous Firefox.
/*

Rating
=====================

La classe rating permet de remplacer le contenu de l'élément portant cette classe
par une série d'étoiles. Le rendu particulier pour chaque notation doit être
géré dynamiquement en javascript.

----
°°stx-html°°
    <meter class="rating" value="3" min="0" max="5">3/5</meter>
-----
Code HTML pur.

----
°°stx-html°°
    <span class="meter rating">
        <span class="value">3/5</span>
        <meter value="3" min="0" max="5" aria-hidden="true">3/5</meter>
    </span>
-----
Code HTML géré par javascript.

*/

.rating {
    line-height: 1rem;
    background: url(../img/star-16.png) repeat-x 0 0;
    height: 1rem;
    width: 5rem;
    border-width: 0;
}

.rating > meter[max='5'] {
    width: 5rem;
}
.rating > meter[max='10'] {
    width: 10rem;
}

.rating::-webkit-meter-bar {
    background: transparent;
}

/* Metre les 2 sélecteurs (webkit et moz) dans un seul set fait planter moz */
.rating::-webkit-meter-even-less-good-value,
.rating::-webkit-meter-optimum-value,
.rating::-webkit-meter-suboptimum-value {
    background: url(../img/star-16.png) repeat-x 0 -16px !important; 
}
.rating > .value,
.rating::-moz-meter-bar { 
    background: url(../img/star-16.png) repeat-x 0 -16px !important; 
}
Code css pour un système de notation.

Ressources et références

Titre
HTML 5
Auteurs
Ian HICKSON
Auteurs
Robin BERJON
Auteurs
Steve FAULKNER
Auteurs
Travis LEITHEAD
Auteurs
Erika DOYLE NAVARA
Auteurs
Edward O'CONNOR
Auteurs
Silvia PFEIFFER
Editeur
W3C
Date
Chapitre
4.10.15 The meter element
Titre
meter
Editeur
Mozilla Developer Network
Date
Titre
Styling Form Controls Using Pseudo Classes
Editeur
trac.webkit.org
Date
Titre
HTML : progress
Auteur
Rui NIBAU
Editeur
Omacronides
Date

Historique

2015-07-07
  • upd Refonte complète avec abandon des vieux hacks.
  • add gestion de la propriété orientation.
2012-10-12
  • upd Hack générique pour Opera et Firefox 16.
2012-03-25
  • add Création de l'article.