From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/summary/index.html | 154 +++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/fr/web/html/element/summary/index.html (limited to 'files/fr/web/html/element/summary') diff --git a/files/fr/web/html/element/summary/index.html b/files/fr/web/html/element/summary/index.html new file mode 100644 index 0000000000..a120b67403 --- /dev/null +++ b/files/fr/web/html/element/summary/index.html @@ -0,0 +1,154 @@ +--- +title: ' : l''élément de révélation d''un résumé' +slug: Web/HTML/Element/summary +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/summary +--- +
{{HTMLRef}}
+ +

L'élément HTML <summary> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément {{HTMLElement("details")}}. En cliquant sur l'élément <summary>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <details> parent.

+ +
{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
+ + + +

Attributs

+ +

Cet élément inclut uniquement les attributs universels.

+ +

Notes d'utilisation

+ +

Un élément <summary> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.

+ +

Un élément <summary> peut uniquement être utilisé comme le premier élément fils d'un élément <details>. Lorsque l'utilisateur clique sur le résumé, l'élément <details> parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément <details> (ce qui permet de détecter un changement d'état via un script).

+ +

Libellé par défaut

+ +

Si l'élément <summary> est absent au sein d'un élément <details>, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.

+ +

Mise en forme par défaut

+ +

La mise en forme par défaut pour <summary> est display: list-item, tel qu'indiqué dans le standard HTML. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.

+ +

Si la mise en forme est surchargée avec display: block, l'icône triangulaire qui révèle le contenu sera masquée.

+ +

Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.

+ +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
<details open>
+  <summary>Détails produit</summary>
+  <p>Ce produit a été fabriqué par
+  ACME et respecte les pandas.</p>
+</details>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_simple","100%","160")}}

+ +

Utilisation de titres

+ +

Il est possible d'utiliser des titres au sein d'un résumé.

+ +

HTML

+ +
<details open>
+  <summary><h4>Détails produit</h4></summary>
+  <ol>
+    <li>Date de fabrication : 01 janvier 2018</li>
+    <li>Numéro de lot : LMA2542501</li>
+    <li>Date limite de consommation : 31 août 2018</li>
+  </ol>
+</details>
+ +

Résultat

+ +

{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}

+ +

Utiliser avec divers éléments HTML

+ +

HTML

+ +
<details open>
+  <summary><strong>Détails</strong></summary>
+  <ol>
+    <li>Date de fabrication : 01 janvier 2018</li>
+    <li>Numéro de lot : LMA2542501</li>
+    <li>Date limite de consommation : 31 août 2018</li>
+  </ol>
+</details>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + +
Contenu autoriséContenu phrasé ou un élément décrivant du contenu de titre.
Omission de balisesAucune, la balise ouvrante et la balise fermante sont obligatoires.
Parents autorisésUn élément {{HTMLElement("details")}}.
Rôles ARIA autorisés{{ARIARole("button")}}
Interface DOM{{domxref("HTMLElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.summary")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf