04 · Accordion
Accordion
details / summary con transición suave
¿Por qué details en vez de div + JS? ⌄
Ya es accesible y funciona sin JS. Ahora además se puede animar de forma fluida.
¿Qué hace interpolate_size? ⌄
interpolate-size: allow-keywords habilita interpolar auto en transiciones de tamaño (antes era discreto).¿Y allow-discrete? ⌄
Mantiene
content-visibility visible durante el cierre para que la animación de altura se vea completa.¿Soporte? ⌄
Chrome 120+ para details-content + interpolate-size. En otros navegadores el accordion funciona, solo sin animación.
details {
interpolate-size: allow-keywords;
}
/* el contenido se anima de height 0 a auto */
details::details-content {
overflow: hidden;
height: 0;
transition: height .3s ease,
content-visibility .3s allow-discrete;
}
details[open]::details-content {
height: auto;
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.