MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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
WHATWG 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 à l'étude pour ce navigateur.

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,