Pseudo-élément CSS ::-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.
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 HTML <meter>. Elle est utilisée pour sélectionner et appliquer des styles au conteneur d'un indicateur de mesure.
Syntaxe
css
::-webkit-meter-bar {
/* … */
}
Exemples
HTML
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
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
js
// 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
Voir aussi
- Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément HTML
<meter>: - Les extensions CSS WebKit