Fixation de l'élément de détails

L'élément HTML5 <details></details> offre un moyen concis de créer du contenu pliable, mais il présente un défi d'utilisation significatif: les liens de hachage ciblant le contenu dans une section <details></details> effondrée ne parviennent pas à révéler ce contenu. Cet article détaille une solution JavaScript progressivement améliorée, y compris un polyfill accessible pour les navigateurs sans support natif, pour résoudre ce problème.

Prise des clés:

1. L'élément <details></details>, bien que utile, souffre d'un problème d'utilisation avec des liens de hachage ciblant le contenu caché.
2. Un polyfill émule efficacement la fonctionnalité <details></details> pour les navigateurs non pris en charge.
3. L'efficacité du polyfill est compromise lorsqu'un lien de hachage pointe vers un élément à l'intérieur d'une région effondrée. La page reste en haut, obscurcissant la cible.
4. Une fonction récursive aborde cela en développant automatiquement les éléments <details></details> pertinents.

Présentation <details></details>

L'élément <details></details>, associé à l'élément <summary></summary>, crée du contenu pliable. Le <summary></summary> (le cas échéant) doit être le premier ou le dernier enfant; Tous les autres contenus sont pliants. L'attribut open oblige le contenu initialement visible. Actuellement, seul Chrome prend en charge entièrement <details></details>. L'image suivante illustre le rendu de Chrome:

Création d'un polyfill

Un polyfill de base détecte la prise en charge native via la propriété open. Les implémentations natives ne nécessitent pas des mises à jour de l'attribut manuel open, mais les attributs ARIA ont toujours besoin de gestion. Une structure typique ressemble à ceci:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

Le script gère l'attribut aria-expanded et l'utilise comme sélecteur CSS pour l'effondrement visuel:

<code class="language-css">details > div[aria-expanded="false"] {
  display: none;
}</code>

Un enveloppement <div> simplifie la gestion des propriétés <code>aria-expanded et display, en particulier pour les navigateurs plus âgés comme IE7, qui nécessitaient une manipulation de style supplémentaire. La fonction addClickEvent gère les incohérences du navigateur dans le clavier cliquez sur l'événement tir:

<code class="language-javascript">function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}</code>

mettant en évidence le problème de hachage

Le problème de base se pose lorsqu'un lien de hachage (# premier contenu, par exemple) cible un élément dans une région <details></details> effondrée. La page ne fait pas défiler vers la cible; Il reste en haut, laissant la cible cachée.

Fixation du problème de hachage

La fonction récursive autostate résout ceci:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

Cette fonction étend de manière récursive tous les éléments d'ancêtre <details></details> contenant la cible. Il s'appelle sur le chargement de la page pour location.hash et sur le lien interne clique. Pour assurer un défilement fiable, window.scrollBy est utilisé après l'expansion, positionnant la cible dans la fenêtre. Le comportement d'origine location.hash (pas de défilement automatique sur la page de rafraîchissement) est maintenu.

Conclusion

Cette solution améliorée, appelée «omnifill», s'étend au-delà du polyfilant de base. Il améliore la convivialité et l'accessibilité pour tous les navigateurs, en abordant les limitations inhérentes de l'élément <details></details>.

Questions fréquemment posées (FAQ) sur l'élément HTML Détails

(La section FAQ de l'entrée d'origine reste inchangée.)