FAQ en details qui s'ouvre d'un coup : le fix CSS pur

Pourquoi le details natif s’ouvre d’un coup, et comment le corriger

Un <details> s’ouvre instantanément par défaut, car le navigateur bascule sa hauteur intrinsèque sans transition. La correction se fait entièrement en CSS, sans JavaScript : le pseudo-élément ::details-content isole la zone de contenu, et interpolate-size: allow-keywords permet d’animer sa hauteur de 0 à auto, posé une seule fois dans la feuille de style globale.

Ce défaut n’est pas cosmétique par accident. <details> et <summary> gèrent l’ouverture/fermeture au niveau du navigateur, pas de la feuille de style, et jusqu’à récemment, il n’existait aucun moyen fiable de cibler uniquement la zone de contenu sans que les styles ne débordent sur le <summary>. Résultat : une FAQ premium qui s’ouvre comme un menu déroulant Windows 95. Cet article s’adresse à qui gère une FAQ, un menu dépliant ou tout bloc collapsible sur son site, et veut le corriger proprement, une fois, plutôt que rustine par rustine.

Prérequis :

• Accès à la feuille de style globale du site (CSS custom, pas seulement l’éditeur visuel du CMS)
• Des éléments <details>/<summary> déjà en place dans le HTML (FAQ, menus, blocs pliables)
• Un navigateur récent pour tester le rendu animé (les anciens affichent simplement l’ouverture instantanée, sans erreur)
• Une attention à prefers-reduced-motion pour ne pas imposer un mouvement à qui ne le souhaite pas

1. Isoler le contenu avec ::details-content

Le pseudo-élément ::details-content désigne la zone de contenu repliable d’un élément <details>, isolée du <summary> pour pouvoir la styliser et l’animer indépendamment source : MDN, 2026. Avant ce pseudo-élément, cibler <details> en CSS revenait à styliser un bloc unique contenant le résumé et le contenu, sans distinction propre. ::details-content change ça : on peut donner une hauteur, un overflow et une transition uniquement à la partie qui se déplie, sans toucher au résumé cliquable.

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .38s ease;
}

details[open]::details-content {
  block-size: auto;
}

Cette base seule ne suffit pas encore : passer de 0 à auto sur une propriété de taille n’est traditionnellement pas transitionnable en CSS, le navigateur ne sait pas interpoler entre une longueur fixe et une valeur intrinsèque.

2. Activer l’interpolation avec interpolate-size

La propriété interpolate-size désigne le réglage CSS qui autorise l’interpolation entre une valeur numérique et une taille intrinsèque comme auto, ce qui rend possible l’animation de hauteur dans les deux sens, ouverture et fermeture source : MDN, 2025. C’est la pièce qui manquait depuis longtemps : sans elle, une transition vers auto est simplement ignorée par le navigateur, l’élément saute directement à sa taille finale.

:root {
  interpolate-size: allow-keywords;
}

Poser cette ligne sur :root suffit : la propriété est héritée, elle couvre donc tout le document en une seule déclaration, y compris les <details> ajoutés plus tard sans aucune retouche CSS supplémentaire.

3. Écrire la règle complète, une seule fois

En combinant les deux briques, l’ouverture et la fermeture s’animent dans les deux sens :

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .38s ease;
}

details[open]::details-content {
  block-size: auto;
}

Chrome for Developers documente ce pattern précis dès 2024, avec la même logique en trois blocs : style de base, activation de l’interpolation, puis état ouvert source : Chrome for Developers. Aucun max-height fixe, aucune mesure JavaScript de la hauteur réelle du contenu : le navigateur calcule lui-même auto et l’anime.

4. Prévoir la dégradation pour les navigateurs sans support

Un navigateur qui ne comprend pas ::details-content ou interpolate-size ignore simplement ces règles, sans erreur ni contenu caché. Le <details> continue de fonctionner selon son comportement natif : ouverture et fermeture instantanées, exactement comme avant la correction source : Chrome for Developers.

Aucun bloc @supports n’est même obligatoire pour rester fonctionnel : la dégradation est déjà propre par nature. On peut en ajouter un uniquement si on veut un style de repli spécifique (une hauteur fixe avec défilement, par exemple), mais le composant fonctionne déjà sans cet ajout.

5. Respecter prefers-reduced-motion

Une transition de hauteur reste un mouvement, et certains visiteurs le désactivent explicitement dans leur système. Le pattern documenté par la communauté Chrome recommande d’activer l’interpolation à l’intérieur d’une media query de préférence de mouvement source : nerdy.dev, 2024 :

@media (prefers-reduced-motion: no-preference) {
  :root {
    interpolate-size: allow-keywords;
  }
}

Sans cette précaution, l’animation s’applique à tout le monde, y compris à qui a explicitement demandé de la limiter. C’est le même principe qui guide les recommandations d’accessibilité pour rendre un site WordPress accessible : la sémantique native de <details> reste intacte, seule la présentation change.

6. Corriger à la source plutôt que page par page

Chez Peechy, les FAQ des articles et des pages services sont des <details> natifs. Leur ouverture instantanée a été rejetée deux fois en interne, jugée trop brute pour un site premium. La correction ne s’est pas faite article par article : elle a été posée une fois pour toutes dans le CSS global du site, avec exactement la règle décrite plus haut, details::details-content en block-size: 0, overflow: hidden, transition de .38s, plus interpolate-size: allow-keywords, sans toucher au markdown des 200 articles du blog. Les navigateurs sans support de ::details-content retombent simplement sur l’ouverture instantanée, sans rien casser côté contenu.

C’est la logique qu’on retrouve dans toute maintenance de site en 2026 : un correctif posé au niveau du système plutôt que du gabarit évite de le refaire à chaque nouvelle page.

Pièges courants

• Animer height plutôt que block-size : block-size reste correct dans les modes d’écriture verticaux et RTL, height non.
• Oublier overflow: hidden : sans cet overflow, le contenu reste visible avant même que la hauteur ne s’anime.
• Poser interpolate-size sur l’élément <details> plutôt que sur :root : la propriété n’est plus héritée globalement, les futurs <details> ajoutés au site ne bénéficient pas de la correction.
• Ne jamais tester sur un navigateur sans support : vérifier que la dégradation reste silencieuse, sans contenu tronqué ni bouton mort.
• Corriger FAQ par FAQ dans le markdown au lieu de la feuille de style globale, ce qui revient à multiplier le travail par le nombre de pages.

Questions fréquentes

Une fois cette règle posée dans la feuille de style globale, chaque nouveau <details> ajouté au site hérite automatiquement de l’animation, sans ligne de CSS supplémentaire à écrire.