Rencontrez

Je veux parler du merveilleux élément <details> et montrer quelques exemples de son utilisation, du simple au fou.

Vous connaissez le modèle de disposition d'un composant qui peut changer son état de visible à masqué:

 .component { display:none; } .component.open { display:block; } 

 toggleButton.onclick = () => component.classList.toggle('open') 

Maintenant, oublie ça. Il existe un élément qui peut le faire hors de la boîte. Rencontrez - <details>

L'élément HTML <details> est utilisé pour révéler des informations cachées (supplémentaires).

Application de base

Voyons d'abord comment fonctionne cet élément:

Veuillez noter que l'exemple fonctionne sans styles supplémentaires ou JavaScript. Toutes les fonctionnalités sont intégrées au navigateur lui-même.

Par défaut, le texte visible dépend des paramètres de langue de votre système, mais vous pouvez le modifier en ajoutant l'élément <summary> aux <details> <summary> :

Pour changer l'état d'un élément en html, il vous suffit d'ajouter l'attribut open

 <!--  -  --> <details open> ... </details> <!--  -  --> <details> ... </details> 

Et afin de gérer l'état à l'aide de JavaScript, une API spéciale est fournie:

 const details = document.querySelector('details') details.open = true //   details.open = false //   

Quelques mots sur l'accessibilité

L'élément <summary> est <summary> . Autrement dit, en vous déplaçant sur la page à partir du clavier, vous arriverez à cet élément. Mais le contenu ne peut entrer dans le focus que si <details> ouvert, c'est-à-dire que le focus ne tombera jamais sur des éléments invisibles à l'intérieur de <details> .

En règle générale, les lecteurs d'écran peuvent bien fonctionner avec l'utilisation standard de <details> et <summary> . Il existe certaines variantes dans l'annonce en fonction du programme et du navigateur. Plus de détails .

Exemples d'utilisation

Ensuite, je vais répéter à peu près certains des composants de la documentation d'amorçage, mais avec peu ou pas de JavaScript.

Changer le marqueur

La première chose dont vous pourriez avoir besoin est de changer l'apparence du marqueur. Cela se fait très simplement:

 summary::-webkit-details-marker { /*   */ } 

Ou vous pouvez masquer le marqueur standard et implémenter le vôtre

 /*    Chrome */ details summary::-webkit-details-marker { display: none } /*    Firefox */ details > summary { list-style: none; } /*       */ details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } /*       */ details[open] summary:before { content: '\f146'; } 

Composant de réduction

Ici, tout est simple. La fonctionnalité de base est la même. Il suffit de modifier légèrement l'apparence:

Composant accordéon

Répétons l'exemple précédent, modifions légèrement l'apparence de <summary> et obtenons l'accordéon:

Mais, comme vous pouvez le voir, un élément ne se ferme pas lorsqu'un autre s'ouvre. Pour ce faire, nous avons besoin de quelques lignes de JavaScript. Vous devez suivre l'apparence de l'attribut open sur l'un des éléments <details> et le supprimer du reste:

Composant Popover

Cette implémentation est très similaire au composant Collapse, à la différence <details> que le contenu <details> a un positionnement absolu et chevauche le contenu.

Composant déroulant

Fondamentalement, il s'agit du même composant Popover. Seule l'apparence diffère.

Le même exemple, uniquement avec un bouton séparé

Mais le composant Dropdown a une autre différence importante: en cliquant dessus, il doit être caché. Pour l'implémenter à nouveau, vous devrez écrire quelques lignes de JavaScript.

 //      document.body.onclick = () => { //    <details> document.body.querySelectorAll('details.dropdown[open]') //      .forEach(e => e.open = false) } 

Composant modal

Et enfin, un exemple de fenêtre modale.

En général, <details> pas le meilleur choix pour implémenter ce composant. Il existe un élément beaucoup plus approprié - <dialog> , mais il a un support de navigateur très médiocre.

Les références

Puis-je utiliser des éléments de détails et de résumé
Élément de détails MDN
Élément de détails du W3C

UPD
J'ai décidé d'ajouter un autre exemple d'utilisation de <details> - navigation à plusieurs niveaux. Encore une fois, je veux attirer votre attention sur le fait que l'exemple fonctionne sans JavaScript. Et il est beaucoup plus inclusif que la disposition traditionnelle sur le <div> .