HTML natif : l'accordéon revisité

Il y a six ans, j'ai exploré le et éléments pour créer des accordéons accessibles. Depuis lors, la plateforme Web a évolué, introduisant de nouvelles fonctionnalités intéressantes telles que le comportement ouvert exclusif et les animations fluides pour ces éléments.

HTML natif : Accordéon

Andrew Bone ・ 4 janvier 2019

#html #css #a11y #conception

Dans cet article, nous reviendrons sur et tirez le meilleur parti des propriétés CSS modernes pour peaufiner vos accordéons. Je partagerai également une implémentation de démonstration présentant ces fonctionnalités.

Les bases : et

Les fournit un moyen natif de créer des sections modifiables en HTML, avec l'option

élément faisant office d’étiquette cliquable. Cela facilite la création de widgets de divulgation avec un minimum d'effort.

Voici un exemple simple :

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

Cliquer sur le résumé bascule la visibilité du contenu associé. Aucun JavaScript requis !

Améliorations : comportement ouvert exclusif

Pour imiter le comportement traditionnel de l'accordéon, où une seule section est ouverte à la fois, vous pouvez utiliser l'attribut name sur votre page éléments. Lorsque les éléments partagent le même nom, l'ouverture de l'un ferme automatiquement les autres du groupe.

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

Ce comportement est natif et fonctionne de manière transparente dans les navigateurs modernes !

Ajout d'animations fluides avec CSS

Pour rendre les transitions d'ouverture et de fermeture plus fluides, nous pouvons utiliser des propriétés CSS modernes telles que interpolate-size et transition-behavior.

Propriétés clés

• interpolate-size : Permet d'animer entre les tailles intrinsèques (comme auto) et les tailles fixes. Cette propriété n'est actuellement prise en charge que dans Chrome.
• transition-behavior : lorsqu'elles sont définies sur autoriser-discret, les propriétés qui ne peuvent normalement pas être animées, comme la visibilité et l'affichage, attendent plutôt que d'être mises à jour instantanément.

Exemple de style

Voici un exemple complet du CSS utilisé dans la démo :

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

Comment ça marche

1. Height Animation : La propriété interpolate-size permet des transitions douces entre height : 0 (fermé) et height : auto (ouvert). Cependant, cette fonctionnalité n'est actuellement prise en charge que dans Chrome.
2. Transition de visibilité : la propriété transition-behaviour garantit que le changement de visibilité apparaît transparent.

La démo : rassembler tout cela

Voici la mise en œuvre complète :

Prise en charge du navigateur

• interpolate-size : Actuellement pris en charge uniquement dans Chrome.
• comportement de transition : pris en charge dans la plupart des navigateurs modernes.

Pour les navigateurs sans support, les animations retombent gracieusement et l'accordéon reste fonctionnel sans les transitions fluides.

Conclusion

Les et Les éléments, combinés à du CSS moderne, fournissent une solution légère et accessible pour créer des accordéons interactifs. Ces nouvelles améliorations les rendent encore plus attrayants pour les projets Web modernes. Essayez la démo et donnez à vos accordéons un look frais et soigné !

Merci beaucoup d'avoir lu. Si vous souhaitez vous connecter avec moi en dehors de Dev, voici mes twitter, bsky et linkedin venez me dire bonjour ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!