1. Web
  2. CSS
  3. Référence
  4. Sélecteurs
  5. ::-webkit-meter-bar

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Pseudo-élément CSS ::-webkit-meter-bar

Obsolète

Évitez d'utiliser cette fonctionnalité dans de nouveaux projets. Cette fonctionnalité peut être candidate à la suppression des standards web ou des navigateurs.

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 <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&nbsp;: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Mis en forme&nbsp;:
<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

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu