<details>

L'élément HTML <details> est utilisé comme un outil de communication à partir duquel l'utilisateur peut récupérer des informations supplémentaires.

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.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu de flux.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLDetailsElement

Attributs

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

open
Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est false (les détails sont alors cachés).

Exemples

Exemple simple

HTML

<details open>
  <summary>Des détails</summary>
  <p>Plus d'infos à propos des détails.</p>
</details>

Résultat

Note : Si l'exemple ne fonctionne pas dans votre navigateur, consultez le tableau de compatibilité ci-après afin de déterminer si votre navigateur prend en charge cette fonctionnalité.

Exemple avec mise en forme

Firefox permet de mettre en forme l'élément summary avec display: list-item et le marqueur de la même façon que les listes. Chrome et Safari suivent une ancienne version de la spécification et utilisent un pseudo-élément ::-webkit-details-marker qui peut être mis en forme.

Pour obtenir une mise en forme compatible sur les différents navigateurs, on peut appliquer summary { display: block } sur Firefox et ::-webkit-details-marker {display: none;} pour Chrome et Safari. L'exemple ci-après illustre le CSS utilisé pour rajouter le marqueur.

HTML

<details>
 <summary>Quelques détails</summary> 
 <p>Des informations à propos des détails.</p> 
</details>

CSS

summary {
 display: block;
}

summary::-webkit-details-marker {
 display: none;
}

summary::before {
 content: '\25B6';
 padding-right: 1em;
}

details[open] > summary::before {
 content: '\25BC';
}

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<details>' dans cette spécification.		 Standard évolutif  
HTML 5.1
La définition de '<details>' dans cette spécification.		 Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple12 Non1492 Non156
open12 Non149 Non156
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple (Oui) (Oui) Non1493 Non ?6.1
open4 (Oui) Non149 Non ?6.1

1. In development.

2. Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

3. There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

Notes relatives à Quantum (Firefox)

  • Un bug de Gecko empêche d'ouvrir les éléments <details> par défaut si une animation est active sur ceux-ci (cf. bug 1382124). Le nouveau moteur de rendu CSS de Firefox (Stylo), prévu pour Firefox 57, corrige ce problème.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, Elanis, louuis, msherefel, tregagnon, ThePrisoner
 Dernière mise à jour par : SphinxKnight,