diff options
Diffstat (limited to 'files/fr/web/html/element/progress')
| -rw-r--r-- | files/fr/web/html/element/progress/index.md | 174 |
1 files changed, 90 insertions, 84 deletions
diff --git a/files/fr/web/html/element/progress/index.md b/files/fr/web/html/element/progress/index.md index ea62218a67..d5335cb80b 100644 --- a/files/fr/web/html/element/progress/index.md +++ b/files/fr/web/html/element/progress/index.md @@ -8,107 +8,113 @@ tags: - Web translation_of: Web/HTML/Element/progress --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément HTML <strong><code><progress></code></strong> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.</p> +L'élément HTML **`<progress>`** indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression. -<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<dl> - <dt>{{htmlattrdef("max")}}</dt> - <dd>Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut <code>max</code> est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.</dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et <code>max</code> (ou entre 0 et 1 si l'attribut <code>max</code> est absent). Si l'attribut <code>value</code> est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).</dd> -</dl> +- {{htmlattrdef("max")}} + - : Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut `max` est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1. +- {{htmlattrdef("value")}} + - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra). -<div class="note"> -<p><strong>Note :</strong> La valeur minimale est toujours 0 et il n'existe pas d'attribut <code>min</code> pour l'élément <code>progress</code>. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.<br> - La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser <code>element.removeAttribute("value")</code>.</p> -</div> +> **Note :** La valeur minimale est toujours 0 et il n'existe pas d'attribut `min` pour l'élément `progress`. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement. +> La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser `element.removeAttribute("value")`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><progress value="70" max="100">70 %</progress> -</pre> +```html +<progress value="70" max="100">70 %</progress> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p> +{{EmbedLiveSample("Exemples", 200, 50)}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (étiquetable)</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans élément <code><progress></code> parmi ses descendants.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLProgressElement")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" + >Contenu de flux</a + >, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >contenu phrasé</a + >, + <a + href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires" + >contenu de formulaire (étiquetable)</a + >, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible" + >contenu tangible</a + >. + </td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >Contenu phrasé</a + > + sans élément <code><progress></code> parmi ses descendants. + </td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Tout élément qui accepte du + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLProgressElement")}}.</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.progress")}}</p> +{{Compat("html.elements.progress")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("meter")}}</li> - <li>{{cssxref(":indeterminate")}}</li> - <li>{{cssxref("-moz-orient")}}</li> - <li>{{cssxref("::-moz-progress-bar")}}</li> - <li>{{cssxref("::-ms-fill")}}</li> - <li>{{cssxref("::-webkit-progress-bar")}}</li> - <li>{{cssxref("::-webkit-progress-value")}}</li> - <li>{{cssxref("::-webkit-progress-inner-element")}}</li> -</ul> +- {{HTMLElement("meter")}} +- {{cssxref(":indeterminate")}} +- {{cssxref("-moz-orient")}} +- {{cssxref("::-moz-progress-bar")}} +- {{cssxref("::-ms-fill")}} +- {{cssxref("::-webkit-progress-bar")}} +- {{cssxref("::-webkit-progress-value")}} +- {{cssxref("::-webkit-progress-inner-element")}} |