diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md')
-rw-r--r-- | files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md | 59 |
1 files changed, 28 insertions, 31 deletions
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md index 9fc489d9c2..73bcfe23d6 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.md @@ -8,57 +8,54 @@ tags: - Reference translation_of: Web/CSS/::-webkit-progress-bar --- -<div>{{CSSRef}}{{Non-standard_header}}</div> +{{CSSRef}}{{Non-standard_header}} -<p>Le pseudo-élément <strong><code>::-webkit-progress-bar</code></strong> représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.</p> +Le pseudo-élément **`::-webkit-progress-bar`** représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}. -<div class="note"> -<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("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("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-bar { background-color: orange; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><progress value="10" max="50"> -</pre> +```html +<progress value="10" max="50"> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p> +{{EmbedLiveSample("Exemples", 200, 50)}} -<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p> +Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon : -<p><img alt="" src="progress-bar.png"></p> + -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</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="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.selectors.-webkit-progress-bar")}}</p> +{{Compat("css.selectors.-webkit-progress-bar")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<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-value")}}</li> - <li>{{cssxref("::-webkit-progress-inner-element")}}</li> - </ul> - </li> - <li>{{cssxref("::-moz-progress-bar")}}</li> - <li>{{cssxref("::-ms-fill")}}</li> -</ul> +- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} : + + - {{cssxref("::-webkit-progress-value")}} + - {{cssxref("::-webkit-progress-inner-element")}} + +- {{cssxref("::-moz-progress-bar")}} +- {{cssxref("::-ms-fill")}} |