MDN will be in maintenance mode on Wednesday September 20th, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

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é Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari Edge
Support simple 12 49.0 (49.0) ?[1] Pas de support 15 6 Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile Chrome Android
Support simple 4.0 49.0 (49.0) ?[1] Pas de support 30 6.1 45

[1] Cette fonctionnalité est en cours de développement pour ce navigateur.

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,