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/details/index.md | 236 +++++++++++++++++------------ 1 file changed, 137 insertions(+), 99 deletions(-) (limited to 'files/fr/web/html/element/details') diff --git a/files/fr/web/html/element/details/index.md b/files/fr/web/html/element/details/index.md index c597a7e084..e034b44d5d 100644 --- a/files/fr/web/html/element/details/index.md +++ b/files/fr/web/html/element/details/index.md @@ -13,49 +13,76 @@ tags: translation_of: Web/HTML/Element/details browser-compat: html.elements.details --- -
{{HTMLRef}}
+{{HTMLRef}} -

L'élément HTML <details> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <summary>.

+L'élément HTML **`
`** est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément [``](/fr/docs/Web/HTML/Element/summary). -

La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <details> est un élément <summary>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).

+La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément `
` est un élément ``, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible). -
{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}} -
-

Note :L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.

-
+> **Note :**L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais. -

Un widget <details> peut être dans l'un des deux états suivants. L'état par défaut fermé affiche uniquement le triangle et l'étiquette à l'intérieur du <summary> (ou une chaîne par défaut définie par l'agent utilisateur si aucun <summary>).

+Un widget `
` peut être dans l'un des deux états suivants. L'état par défaut _fermé_ affiche uniquement le triangle et l'étiquette à l'intérieur du `` (ou une chaîne par défaut définie par [l'agent utilisateur](/fr/docs/Glossary/User_agent) si aucun ``). -

Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :

+Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu : -

À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut open.

+À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut [`open`](/fr/docs/Web/HTML/Element/details#attr-open). -

Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.

+Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient. -
-

Note :Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.

-
+> **Note :**Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture. -

Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS display: list-item à l'élément <summary>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir personnaliser le marqueur de révélation pour plus de détails.

+Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS `display: list-item` à l'élément [``](/fr/docs/Web/HTML/Element/summary). Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir [personnaliser le marqueur de révélation](#customizing_the_disclosure_widget) pour plus de détails. - - + + - + - + - + @@ -67,85 +94,91 @@ browser-compat: html.elements.details - +
Catégories de contenuContenu de flux, racine de section, contenu interactif, contenu tangible. + Catégories de contenu + + Contenu de flux, racine de section, + contenu interactif, + contenu tangible. +
Contenu autoriséUn élément <summary> suivi par du contenu de flux. + Un élément + <summary> + suivi par du + contenu de flux. +
Omission de balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires. + Aucune, la balise d'ouverture et la balise de fermeture sont + obligatoires. +
Parents autorisésTout élément acceptant du contenu de flux. + Tout élément acceptant du + contenu de flux. +
Rôle ARIA implicite
Interface DOMHTMLDetailsElement + HTMLDetailsElement +
-

Attributs

+## Attributs -

Comme tous les éléments HTML, cet élément accepte les attributs universels.

+Comme tous les éléments HTML, cet élément accepte les [attributs universels](/fr/docs/Web/HTML/Global_attributes). -
-
open
-
-

Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <details> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.

+- `open` -
-

Note :Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, open="false" rend les détails visibles, car cet attribut est booléen.

-
-
-
+ - : Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément `
` — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles. -

Évènements

+ > **Note :**Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, `open="false"` rend les détails visibles, car cet attribut est booléen. -

En plus des évènements classiques pris en charge par les éléments HTML, l'élément <details> prend en charge l'évènement toggle qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.

+## Évènements -

On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :

+En plus des évènements classiques pris en charge par les éléments HTML, l'élément `
` prend en charge l'évènement [toggle](/fr/docs/Web/API/HTMLDetailsElement/toggle_event) qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul. -
details.addEventListener("toggle", function(evt){
+On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :
+
+```js
+details.addEventListener("toggle", function(evt){
   if(details.open) {
     /* l'état est passé en "ouvert" */
   } else {
     /* l'état est passé en "fermé" */
   }
-}, false);
+}, false); +``` -

Exemples

+## Exemples -

Un exemple simple

+### Un exemple simple -

Dans cet exemple, on utilise un élément <details> sans résumé/intitulé.

+Dans cet exemple, on utilise un élément `
` sans résumé/intitulé. -
<details>
-  <p>Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+

+  
Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.</p>
-</details>
+ sortie sont recommandés.

+
+``` -

Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").

+Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails"). -

{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}}

+{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}} -

Créer un contrôle déjà ouvert

+### Créer un contrôle déjà ouvert -

Pour obtenir une boîte <details> dans un état ouvert, il suffit d'ajouter l'attribut booléen open :

+Pour obtenir une boîte `
` dans un état ouvert, il suffit d'ajouter l'attribut booléen `open` : -
<details open>
-  <summary>Configuration requise</summary>
-  <p>Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+

+  Configuration requise
+  
Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.</p>
-</details>
+ sortie sont recommandés.

+
+``` -

Cela se traduit par :

+Cela se traduit par : -

{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}}

+{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}} -

Personnaliser l'apparence

+### Personnaliser l'apparence -

Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <details>.

+Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par `
`. -

CSS

+#### CSS -
details {
+```css
+details {
   font: 16px "Open Sans", Calibri, sans-serif;
   width: 620px;
 }
 
-details > summary {
+details > summary {
   padding: 2px 6px;
   width: 15em;
   background-color: #ddd;
@@ -154,7 +187,7 @@ details > summary {
   cursor: pointer;
 }
 
-details > p {
+details > p {
   border-radius: 0 0 10px 10px;
   background-color: #ddd;
   padding: 2px 6px;
@@ -164,42 +197,46 @@ details > p {
 
 details[open] > summary {
   background-color: #ccf;
-}
+} +``` -

Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.

+Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu. -

Le sélecteur details[open] peut être utilisé pour donner un style à l'élément qui est ouvert.

+Le sélecteur `details[open]` peut être utilisé pour donner un style à l'élément qui est ouvert. -

HTML

+#### HTML -
<details open>
-  <summary>Configuration requise</summary>
-  <p>Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+

+  Configuration requise
+  
Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.</p>
-</details>
+ sortie sont recommandés.

+
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("customizing_the_appearance", "", 120)}}

+{{EmbedLiveSample("customizing_the_appearance", "", 120)}} -

Personnaliser le marqueur de révélation

+### Personnaliser le marqueur de révélation -

Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.

+Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre. -

L'élément <summary> prend en charge la propriété raccourcie list-style et ses propriétés longues, comme list-style-type, pour changer le triangle de divulgation en ce que vous choisissez (généralement avec list-style-image). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant list-style : none.

+L'élément [``](/fr/docs/Web/HTML/Element/summary) prend en charge la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style) et ses propriétés longues, comme [`list-style-type`](/fr/docs/Web/CSS/list-style-type), pour changer le triangle de divulgation en ce que vous choisissez (généralement avec [`list-style-image`](/fr/docs/Web/CSS/list-style-image)). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant `list-style : none`. -

Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser le pseudo-élément spécifique ::-webkit-details-marker afin de personnaliser l'apparence.

+Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser [le pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) spécifique `::-webkit-details-marker` afin de personnaliser l'apparence. -

CSS

+#### CSS -
details {
+```css
+details {
   font: 16px "Open Sans", "Arial", sans-serif;
   width: 620px;
 }
 
-details > summary {
+details > summary {
   padding: 2px 6px;
   width: 15em;
   background-color: #ddd;
@@ -208,44 +245,45 @@ details > summary {
   list-style: none;
 }
 
-details > summary::-webkit-details-marker {
+details > summary::-webkit-details-marker {
   display: none;
 }
 
-details > p {
+details > p {
   border-radius: 0 0 10px 10px;
   background-color: #ddd;
   padding: 2px 6px;
   margin: 0;
   box-shadow: 3px 3px 4px black;
-}
+} +``` -

Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu.

+Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu. -

HTML

+#### HTML -
<details open>
-  <summary>Configuration requise</summary>
-  <p>Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+

+  Configuration requise
+  
Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.</p>
-</details>
+ sortie sont recommandés.

+
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}}

+{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}} -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Voir aussi

+## Voir aussi - +- L'élément [``](/fr/docs/Web/HTML/Element/summary) -- cgit v1.2.3-54-g00ecf