::-webkit-meter-optimum-value
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
Le pseudo-élément CSS ::-webkit-meter-optimum-value est une extension de WebKit qui permet de mettre en forme l'élément <meter> lorsque sa valeur se situe dans la plage basse-haute ou lorsque la valeur est équivalente à la valeur optimale.
Vert est la couleur par défaut.
Syntaxe
::-webkit-meter-optimum-value {
/* ... */
}
Exemples
HTML
Normal :
<meter min="0" max="10" low="3" high="7" optimum="6" value="6">
Score 6/10
</meter>
<br />
Mis en forme :
<meter id="styled" min="0" max="10" low="3" high="7" optimum="6" value="6">
Score 6/10
</meter>
CSS
body {
font-family: monospace;
}
.safari meter {
/* Réinitialiser l'apparence par défaut pour Safari uniquement */
/* La classe .safari est ajoutée via JavaScript */
-webkit-appearance: none;
}
#styled::-webkit-meter-optimum-value {
background: linear-gradient(
to bottom,
#77ff77,
#009900 45%,
#009900 55%,
#77ff77
);
height: 100%;
box-sizing: border-box;
}
JavaScript
// Safari veut que les éléments <meter> aient une `appearance` de `none` pour un
// style personnalisé utilisant les sélecteurs `::-webkit-meter-*`, mais
// `appearance: none` casse le rendu sur Chrome.
// Par conséquent, nous devons vérifier si le navigateur est basé sur Safari.
const is_safari =
navigator.userAgent.includes("AppleWebKit/") &&
!navigator.userAgent.includes("Chrome/");
if (is_safari) {
document.body.classList.add("safari");
}
Résultat
Spécifications
Ce pseudo-élément ne fait partie d'aucun standard.
Compatibilité des navigateurs
Loading…
Voir aussi
Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément <meter> :