diff options
Diffstat (limited to 'files/fr/web/css/_doublecolon_-webkit-progress-value')
| -rw-r--r-- | files/fr/web/css/_doublecolon_-webkit-progress-value/index.md | 60 |
1 files changed, 29 insertions, 31 deletions
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md index 91a831dcef..0b9d310140 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md @@ -8,56 +8,54 @@ tags: - Reference translation_of: Web/CSS/::-webkit-progress-value --- -<div>{{CSSRef}}{{Non-standard_header}}</div> +{{CSSRef}}{{Non-standard_header}} -<p>Le pseudo-élément <strong><code>::-webkit-progress-value</code></strong> permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p> +Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}. -<div class="note"> -<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code><progress></code>.</p> -</div> +> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">progress { +```css +progress { -webkit-appearance: none; } ::-webkit-progress-value { background-color: orange; -}</pre> +} +``` + +### HTML + +```html +<progress value="10" max="50"> +``` -<h3 id="HTML">HTML</h3> +### Résultat -<pre class="brush: html"><progress value="10" max="50"> -</pre> +{{EmbedLiveSample("Exemples", 200, 50)}} -<h3 id="Résultat">Résultat</h3> +Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : -<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p> + -<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> +## Spécifications -<p><img alt="" src="progress-value.png"></p> +Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification. -<h2 id="Spécifications">Spécifications</h2> +## Compatibilité des navigateurs -<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p> +{{Compat("css.selectors.-webkit-progress-value")}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Voir aussi -<p>{{Compat("css.selectors.-webkit-progress-value")}}</p> +- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} : -<h2 id="Voir_aussi">Voir aussi</h2> + - {{cssxref("::-webkit-progress-bar")}} + - {{cssxref("::-webkit-progress-inner-element")}} -<ul> - <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} : - <ul> - <li>{{cssxref("::-webkit-progress-bar")}}</li> - <li>{{cssxref("::-webkit-progress-inner-element")}}</li> - </ul> - </li> - <li>{{cssxref("::-moz-progress-bar")}}</li> - <li>{{cssxref("::-ms-fill")}}</li> -</ul> +- {{cssxref("::-moz-progress-bar")}} +- {{cssxref("::-ms-fill")}} |