::-webkit-meter-bar
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.
Obsolète: Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
Le pseudo-élément CSS ::-webkit-meter-bar est une extension de WebKit qui permet de mettre en forme l'arrière-plan d'un élément <meter>. Elle est utilisée pour sélectionner et appliquer des styles au conteneur d'un indicateur de mesure.
Syntaxe
::-webkit-meter-bar {
/* ... */
}
Exemples
HTML
Normal : <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Mis en forme :
<meter id="styled" min="0" max="10" value="6">Score 6/10</meter>
CSS
.safari meter {
/* On réinitialise l'apparence par défaut */
-webkit-appearance: none;
}
#styled::-webkit-meter-bar {
background: lime;
box-shadow: 0 10px 20px grey inset;
border-radius: 10px;
}
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>: