1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: '::-ms-fill'
slug: 'Web/CSS/::-ms-fill'
tags:
- CSS
- Non-standard
- Pseudo-element
- Reference
translation_of: 'Archive/Web/CSS/::-ms-fill'
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p>Le pseudo-élément <strong><code>::-ms-fill</code></strong> est un pseudo-élément <a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui représente la partie « remplie » d'un élément {{HTMLElement("progress")}}. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.</p>
<p>Toutes les propriétés autorisées (à l'exception de {{cssxref("animation-name")}}) s'appliquent sur une barre de progression dans un état déterminé. Seule <code>animation-name</code> s'applique sur une barre dans un état indéterminée. Les éléments <code><progress></code> dans un état indéterminés sont ceux qui n'ont pas d'attribut {{htmlattrxref("value")}}, ils peuvent être sélectionnés grâce à la pseudo-classe {{cssxref(":indeterminate")}}.</p>
<p>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 <code>animation-name</code> sur <code>::-ms-fill</code>, on peut modifier l'animation :</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Valeur</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>none</code></td>
<td>L'animation est désactivée, aucun point n'est affiché.</td>
</tr>
<tr>
<td><code>-ms-bar</code></td>
<td>Les points animés sont affichés sous la forme d'une barre.</td>
</tr>
<tr>
<td><code>-ms-ring</code></td>
<td>Les points animés sont affichés sous la forme d'un anneau.</td>
</tr>
</tbody>
</table>
<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
<p>Seules les propriétés suivantes peuvent être utilisées avec <code>::-ms-fill</code> (les autres propriétés seront ignorées) :</p>
<ul>
<li>{{cssxref("animation-name")}}</li>
<li>{{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}</li>
<li>{{cssxref("border")}}</li>
<li>{{cssxref("border-radius")}}</li>
<li>{{cssxref("box-shadow")}}</li>
<li>{{cssxref("box-sizing")}}</li>
<li>{{cssxref("color")}}</li>
<li>{{cssxref("cursor")}}</li>
<li>{{cssxref("display")}} (avec les valeurs : <code>block</code>, <code>inline-block</code> et <code>none</code>.)</li>
<li>{{cssxref("font")}}</li>
<li>{{cssxref("height")}}</li>
<li>{{cssxref("margin")}}</li>
<li>{{cssxref("-ms-background-position-x")}}</li>
<li>{{cssxref("-ms-background-position-y")}}</li>
<li>{{cssxref("-ms-high-contrast-adjust")}}</li>
<li>{{cssxref("opacity")}}</li>
<li>{{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
<li>{{cssxref("padding")}}</li>
<li>{{cssxref("transform")}} et {{cssxref("transform-origin")}}</li>
<li>{{cssxref("visibility")}}</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">{{csssyntax}}</pre>
<ul>
</ul>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">progress::-ms-fill {
background-color: orange;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><progress value="10" max="50"></progress>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
<p>Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :</p>
<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p>
<h2 id="Spécifications">Spécifications</h2>
<p>Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.selectors.-ms-fill")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("::-moz-progress-bar")}}</li>
<li>{{cssxref("::-webkit-progress-bar")}}</li>
<li>{{cssxref("::-webkit-progress-value")}}</li>
<li>{{cssxref("::-webkit-progress-inner-element")}}
<ul>
</ul>
</li>
</ul>
|
