From dea9d1f019d9e14357c58cf18653df1ac779d9d8 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:13:08 +0200 Subject: convert content to md --- files/fr/web/html/element/summary/index.md | 199 ++++++++++++++--------------- 1 file changed, 98 insertions(+), 101 deletions(-) (limited to 'files/fr/web/html/element/summary') diff --git a/files/fr/web/html/element/summary/index.md b/files/fr/web/html/element/summary/index.md index 3097055b73..a28f35ae1b 100644 --- a/files/fr/web/html/element/summary/index.md +++ b/files/fr/web/html/element/summary/index.md @@ -8,143 +8,140 @@ tags: - Web translation_of: Web/HTML/Element/summary --- -
{{HTMLRef}}
+{{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.

+L'élément HTML **``** 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 ``, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément `
` parent. -
{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}} -

Attributs

+## Attributs -

Cet élément inclut uniquement les attributs universels.

+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). -

Notes d'utilisation

+## 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 `` 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).

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

Libellé par défaut

+### 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é.

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

Mise en forme par défaut

+### 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.

+La mise en forme par défaut pour `` est `display: list-item`, tel qu'indiqué dans [le standard HTML](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements). 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.

+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.

+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

+## Exemples -

Exemple simple

+### Exemple simple -

HTML

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

Ce produit a été fabriqué par + ACME et respecte les pandas.

+
+``` -

Résultat

+#### Résultat -

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

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

Utilisation de titres

+### Utilisation de titres -

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

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

HTML

+#### 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>
+```html +
+

Détails produit

 +
    +
  1. Date de fabrication : 01 janvier 2018
    2. +
  2. Numéro de lot : LMA2542501
    3. +
  3. Date limite de consommation : 31 août 2018
    4. +
+
+``` -

Résultat

+#### Résultat -

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

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

Utiliser avec divers éléments HTML

+### Utiliser avec divers éléments HTML -

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>
+```html +
+ Détails +
    +
  1. Date de fabrication : 01 janvier 2018
    2. +
  2. Numéro de lot : LMA2542501
    3. +
  3. Date limite de consommation : 31 août 2018
    4. +
+
+``` -

Résultat

+#### Résultat -

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

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

Résumé technique

+## 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")}}
Contenu autorisé + Contenu phrasé + ou un élément décrivant du + contenu de titre. +
Omission de balises + Aucune, 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.
+## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{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

+## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi -
    -
  • {{HTMLElement("details")}}
    • -
+- {{HTMLElement("details")}} -- cgit v1.2.3-54-g00ecf