Détails et résumé

Découvrez le fonctionnement des détails très utiles et des éléments de résumé, et où les les utiliser.

Un widget d'affichage est une commande d'interface utilisateur qui masque et affiche du contenu. Si vous lisez ceci sur web.dev, la largeur de la fenêtre d'affichage est inférieure à 106 ems, cliquez sur le bouton "Sur cette page" au-dessus de ce paragraphe révèle la table des matières de cette section. Si vous ne la voyez pas, réduisez la taille du navigateur pour afficher la navigation dans le sommaire de cette page widget de communiqué.

L'interface utilisateur graphique accordion est une série d'images empilées verticalement widgets d'information. La page des questions fréquentes (FAQ) sur de nombreux sites est un cas d'utilisation courant de l'interface utilisateur accordéon. Les questions fréquentes concernant l'accordéon contiennent une liste de questions visibles. cliquer sur une question développe, ou « divulgue », la réponse à cette question.

jQuery inclut un modèle d'interface utilisateur en accordéon depuis au moins 2009. L'original sans JavaScript La solution en accordéon consistait à transformer chaque question "FAQ" en <label>, suivie de la coche libellée, puis à afficher <div> réponse lorsque la coche a été cochée. Le code CSS ressemblait à ceci:

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

Pourquoi cette histoire ? Les widgets de divulgation, tels que les accordéons, sans JavaScript ni piratage de contrôle de formulaire, sont une version relativement récente addition; <details> et <summary> ne sont entièrement compatibles qu'avec tous les navigateurs récents depuis janvier 2020. Vous pouvez maintenant créer des tâches fonctionnelles, que les widgets attrayants, la divulgation, qui n'utilisent que du code HTML sémantique. Les éléments <details> et <summary> sont tout ce dont vous avez besoin: ils constituent un moyen intégré de gérer développer et réduire le contenu. Lorsqu'un utilisateur clique ou appuie sur un <summary>, ou libère la touche Entrée lorsqu'il <summary> est sélectionné, le contenu du <details> parent bascule sur "visible" !

Comme pour tout contenu sémantique, vous pouvez améliorer progressivement les fonctionnalités et l'apparence par défaut. Dans ce cas, une petite partie Le CSS a été ajouté, mais rien d'autre:

Notez que ces Codepens ne contiennent pas de code JavaScript.

Activer ou désactiver la visibilité: attribut open

L'élément <details> est le conteneur du widget d'annonce. <summary> est le résumé ou la légende de son parent <details>. La le résumé est toujours affiché, faisant office de bouton qui active/désactive l'affichage du reste du contenu du parent. Interactions avec le <summary> permet d'afficher ou de masquer les frères et sœurs résumés auto-étiquetés en activant/désactivant le bouton <details> l'attribut open de l'élément.

L'attribut open est un attribut booléen. S'il est présent, quelle que soit sa valeur ou son absence, il indique que tous les <details> contenus sont présentés à l'utilisateur. Si l'attribut open n'est pas présent, seul le contenu de <summary> est affiché.

Étant donné que l'attribut open est ajouté et supprimé automatiquement lorsque l'utilisateur interagit avec la commande, il peut être utilisé en CSS pour appliquer un style différent à l'élément en fonction de son état ;

Vous pouvez créer un accordéon avec une liste de plusieurs éléments <details>, chacun ayant un enfant <summary>. Attribut open manquant dans votre code HTML signifie que les <details> sont toutes réduites ou fermées, et seuls les en-têtes récapitulatifs sont visibles lors du chargement de la page. chaque en-tête est l'ouverture du reste du contenu de l'élément <details> parent. Si vous incluez l'attribut open dans votre code HTML, l'attribut <details> s'affiche en grand avec le contenu visible lors du chargement de la page.

Le contenu masqué à l'état réduit peut faire l'objet de recherches dans certains navigateurs, mais pas dans d'autres, même si le contenu réduit ne fait pas partie du DOM. Si vous effectuez une recherche dans Edge ou Chrome, les détails contenant un terme de recherche seront développés pour afficher l'occurrence. Ce comportement n'est pas reproduit dans Firefox ou Safari.

<summary> doit être le premier enfant d'un élément <details> et doit représenter un résumé, une légende ou une légende pour le reste du contenu de l'élément parent <details> dans lequel il est imbriqué. Le contenu de l'élément <summary> peut correspondre à n'importe quel titre du texte brut ou du code HTML pouvant être utilisés dans un paragraphe.

Activer ou désactiver le repère de résumé

Dans les deux Codepens précédents, vous remarquerez la flèche inline-start, du résumé. Un widget d'affichage est généralement présenté à l'écran sous la forme d'un petit triangle qui pivote (ou se torsion) pour indiquer l'état ouvert/fermé, avec un libellé à côté du triangle. Le contenu de l'élément <summary> indique le libellé du widget d'annonce. La flèche rotative située en haut de chaque section est une ::marker placée sur le <summary>. Comme les éléments de liste, l'élément <summary> accepte la list-style propriété de raccourci et de ses propriétés longues, y compris list-style-type. Vous pouvez appliquer un style au triangle d'expansion avec CSS, y compris modifier le repère utilisé en tant que triangle pour le remplacer par n'importe quel autre type de puce, y compris une image avec list-style-image.

Pour appliquer d'autres styles, utilisez un sélecteur semblable à details summary::marker. La Le pseudo-élément ::marker n'accepte qu'un nombre limité de styles. Supprimer le ::marker et le remplacer par l'::before, plus facile à appliquer, est pratique courante : les styles CSS modifient légèrement le style du contenu généré en fonction de la présence (ou de l'absence) de l'attribut "open". Vous pouvez supprimer l'icône du widget d'annonce en définissant list-style: none ou en définissant le contenu du repère sur none, mais incluez toujours des indicateurs visuels pour informer les personnes voyantes que le contenu du résumé est un bouton d'activation qui permet d'afficher et de masquer le contenu lors de l'activation.

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

Cet exemple supprime le repère par défaut et ajoute du contenu généré pour créer un + lorsque les détails sont fermés et un -. lorsque les détails sont ouverts.

Si vous souhaitez que le bloc de détails soit ouvert par défaut, incluez l'attribut open dans la balise d'ouverture <details>. Vous pouvez aussi ajouter de l'espace entre chaque boîte de dialogue et effectuez une transition pour la rotation du repère créé avec du contenu généré afin d'améliorer l'apparence:

Comment les erreurs sont-elles traitées ?

Si vous n'incluez pas de <summary>, le navigateur en crée un pour vous, avec un repère et le mot "détails". Ce résumé fait partie d'une racine fantôme. Par conséquent, les styles de résumé CSS de l'auteur ne seront pas appliqués. Malheureusement, Safari n'inclut pas les détails dans l'ordre de sélection du clavier.

Si vous incluez un <summary>, mais qu'il ne s'agit pas du premier élément du <details>, le navigateur affiche quand même le résumé. comme il se doit. Il n'échouera pas non plus si vous incluez un lien, un libellé ou tout autre élément interactif dans le résumé, mais les navigateurs gèrent différemment le contenu interactif au sein du contenu interactif. Par exemple, si vous incluez un lien dans un récapitulatif, certains navigateurs permet d'ajouter à la fois le résumé et le lien dans l'ordre de tabulation par défaut, mais les autres navigateurs ne sélectionneront pas le lien par défaut. Si vous cliquez sur un élément <label> imbriqué dans un élément <summary>, certains navigateurs sélectionnent la commande de formulaire associée. autres navigateurs permet de sélectionner la commande de formulaire et d'ouvrir ou de fermer <details>.

Interface HTMLDetailsElement

Comme tous les éléments HTML, HTMLDetailsElement hérite de toutes propriétés, méthodes et événements de HTMLElement, puis ajoute Propriété d'instance open et une propriété toggle . La propriété HTMLDetailsElement.open est une valeur booléenne reflétant l'attribut HTML open, indiquant si le contenu de l'élément (sans compter les <summary>) doit être présenté à l'utilisateur. L'événement d'activation/de désactivation se déclenche Lorsque l'élément <details> est ouvert ou fermé. Vous pouvez écouter cet événement avec addEventListener().

Si vous souhaitez écrire un script pour fermer les détails ouverts lorsque l'utilisateur ouvre d'autres détails, supprimez l'attribut ouvert à l'aide de removeAttribute("open"):

Il s'agit du seul exemple dans lequel JavaScript est utilisé. Vous n'aurez probablement pas besoin de JavaScript, sauf pour cette fonctionnalité de fermeture d'autres les widgets d'information ouverts.

N'oubliez pas que <details> et <summary> peuvent être fortement stylisés et peuvent même être utilisés pour créer des info-bulles. Toutefois, si vous prévoyez d'utiliser ces éléments sémantiques pour des cas d'utilisation où la sémantique native ne correspond pas, assurez-vous toujours de préserver l'accessibilité. HTML est accessible par défaut dans la plupart des cas. En tant que développeurs, notre travail consiste à veiller à ce que nos contenus restent accessibles.

Testez vos connaissances

Testez vos connaissances sur les détails et le résumé.