::-webkit-meter-even-less-good-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-even-less-good-value est une extension de WebKit qui met en forme l'élément <meter> lorsque les attributs value et optimum se situent en dehors de la plage basse-haute, mais dans des zones opposées. À titre d'illustration, cela s'applique lorsque value < low < high < optimum ou value > high > low > optimum.
Rouge est la couleur par défaut.
Syntaxe
::-webkit-meter-even-less-good-value {
/* ... */
}
Exemples
HTML
Normal :
<meter min="0" max="10" low="3" high="7" optimum="8" value="2">
Score 2/10
</meter>
<br />
Mis en forme :
<meter id="styled" min="0" max="10" low="3" high="7" optimum="8" value="2">
Score 2/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-even-less-good-value {
background: linear-gradient(
to bottom,
#ff7777,
#990000 45%,
#990000 55%,
#ff7777
);
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
Chargement…
Voir aussi
Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément <meter> :