Animer le contenu d'une balise HTML details en CSS

Tout d'abord, qu'est-ce qu'une balise details ?

Il s'agit d'un élément de divulgation. Et ça ressemble à ça, par défaut.

Le code de base. La syntaxe est simple avec peu d'options. En plus des attributs universels, la balise utilise un attribut open, pratique pour customiser l'élément avec le sélecteur CSS details[open] {…}.

<details>
  <summary>Libellé personnalisé</summary>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium assumenda atque consectetur doloribus enim est expedita facilis fugit laborum maiores, modi qui rerum vel? Nemo perspiciatis ratione veritatis.
</details>

Cette balise possède également un écouteur Javascript toggle pour qui veut jouer un peu plus.

details.addEventListener("toggle", function (e) {
    if (details.open) {
      /* ouvert */
    } else {
      /* fermé */
    }
  }
);

La documentation complète est sur MDN.

C'est pratique, mais ce n'est pas beau !
Pour la mise en forme, une page avec CSS complète est disponible ici : Accessibilité des accordéons HTML.

Ce qui nous intéresse ici, ce sont les animations du contenu. Actuellement, il n'y a que Chromium qui peut gérer ça en CSS.
Les propriétés CSS ne sont interprétées que par Microsoft Edge et Chrome. La question est donc de peser le pour et le contre d'abandonner momentanément les animations sur Safari, Firefox, et autres ?
Ici, la réponse est oui. Sachant que les navigateurs Chromium représentent plus 75% du marché, abandonner le Javascript au profit d'une balise native HTML5 est pertinent.
Que ce soit pour la performance, l'éco conception et la maintenance de code.

Le principe est d'utiliser la pseudo classe CSS ::details-content visible dans le DOM fantôme.

Exemple

Concrètement, ça donne ça :

Le DOM fantôme de details est le suivant.

#shadow-root
    <slot id="details-summary">
        <summary>Détails</summary>
    </slot>
    <slot id="details-content" pseudo="details-content" style="content-visibility: hidden; display: block;"></slot>
    <style>
    :host summary {
        display: list-item;
        counter-increment: list-item 0;
        list-style: disclosure-closed inside;
    }
    :host([open]) summary {
        list-style-type: disclosure-open;
    }
    </style>

À partir de là, on peut manipuler les éléments avec la CSS.

Code CSS

details::details-content {
  block-size: 0;
  display: block;
  overflow: hidden;
}

/*
Comme on est sympas, on ne va animer les balises seulement si le navigateur l'autorise…
 */
@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    transition-property: block-size, content-visibility;
    transition-behavior: allow-discrete;
    transition-duration: .5s;
  }
}

details[open]::details-content {
  block-size: auto;
  block-size: calc-size(max-content, size);
}

Avec un groupe de balises avec le même attribut name, le toggle se fait tout seul.

That's all Folks.