Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément ::-ms-fill est un pseudo-élément spécifique à Microsoft qui représente la partie « remplie » d'un élément <progress>. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.

Toutes les propriétés autorisées (à l'exception de animation-name) s'appliquent sur une barre de progression dans un état déterminé. Seule animation-name s'applique sur une barre dans un état indéterminée. Les éléments <progress> dans un état indéterminés sont ceux qui n'ont pas d'attribut value, ils peuvent être sélectionnés grâce à la pseudo-classe :indeterminate.

Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant animation-name sur ::-ms-fill, on peut modifier l'animation :

Valeur Description
none L'animation est désactivée, aucun point n'est affiché.
-ms-bar Les points animés sont affichés sous la forme d'une barre.
-ms-ring Les points animés sont affichés sous la forme d'un anneau.

Propriétés autorisées

Seules les propriétés suivantes peuvent être utilisées avec ::-ms-fill (les autres propriétés seront ignorées) :

Syntaxe

::-ms-fill

Exemples

CSS

progress::-ms-fill {
  background-color: orange;
}

HTML

<progress value="10" max="50"></progress>

Résultat

Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :

Progress Bar with Orange Fill

Spécifications

Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Non-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Aucun support NonIE Support complet 10Opera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,