Details/summary element HTML5
Gli elementi <details> e <summary> permettono di creare contenuti espandibili nativi senza una riga di JavaScript. È la soluzione HTML5 per FAQ, accordion, sezioni collapsibili e ogni interfaccia che alterna visibilità di blocchi di contenuto. Vediamo come usarli, stilizzarli e sfruttare al meglio le loro potenzialità native.
Sintassi base
<details> è il contenitore espandibile; <summary> al suo interno è l'etichetta cliccabile. Cliccando summary, il contenuto restante di details viene mostrato o nascosto. L'attributo open su details apre il blocco di default. Tutta l'interattività è gestita dal browser, con tastiera, focus e accessibilità funzionanti out-of-the-box senza necessità di codice JavaScript aggiuntivo.
Stilizzazione
Il marker triangolare può essere personalizzato via CSS con summary::-webkit-details-marker (Chrome/Safari) o list-style-type su summary. Per rimuoverlo del tutto usa list-style: none. Puoi anche aggiungere icone custom via pseudo-elementi ::before o ::after. Animazioni di apertura/chiusura richiedono trick CSS con grid o JavaScript leggero per smooth transitions, perché details non supporta nativamente transizioni di altezza.
Pattern accordion mutualmente esclusivo
HTML5 supporta nativamente accordion mutualmente esclusivi tramite l'attributo name su details: tutti i details con lo stesso name si comportano come un gruppo, e aprendone uno gli altri si chiudono automaticamente. Sintassi: <details name="faq">...</details> ripetuto per ogni voce. Feature relativamente recente ma supportata da Chrome 120+, Firefox 122+ e Safari. Sostituisce JavaScript complesso usato in passato per accordion classici. Per browser legacy implementa un fallback graceful che permette espansione multipla, perdendo solo l'esclusività.
Animazioni con interpolate-size
Per animare apertura/chiusura puoi usare nuova CSS feature interpolate-size: allow-keywords sull'elemento html, combinato con transition: all su details. Permette di animare da height: auto, cosa storicamente complicata. Alternative legacy: grid template rows con transizione 0fr -> 1fr, oppure JavaScript con calcolo dinamico dell'altezza. La nuova API CSS semplifica enormemente animazioni che prima richiedevano workaround complessi, migliorando smooth UX delle FAQ e accordion dell'interfaccia utente.
FAQ schema con details
Combinando details/summary con JSON-LD FAQPage ottieni FAQ visivamente collassabili e SEO-ottimizzate. Markup: ogni FAQ è un <details><summary>Domanda</summary>Risposta</details>. JSON-LD parallelo descrive le stesse domande/risposte. Google indicizza il contenuto interno anche quando details è chiuso, e con FAQPage genera rich snippet espandibili nelle SERP. Soluzione doppia: UX semplice on-page + visibilità extra nei risultati di ricerca. Strumenti CMS o framework JavaScript possono generare entrambi automaticamente da una singola sorgente dati, mantenendo coerenza ed efficacia.
Print e details
Quando l'utente stampa una pagina con details, di default solo le sezioni aperte vengono stampate. Per stampare tutto il contenuto usa CSS @media print { details:not([open]) summary ~ * { display: block !important; } } o forza open via JavaScript prima della stampa. Comportamento utile per documentazione: utente naviga visualmente con accordion in pagina, ma stampa la versione completa per riferimento offline. Best practice: testa sempre stampa delle tue pagine con details, comportamento varia tra Chrome, Firefox e Safari. Soluzione preferibile spesso è offrire un "Espandi tutto" prima della stampa.
Esempi pratici
Use case tipici: FAQ pagina con domande in details (utente espande quelle di interesse), changelog software (versioni più vecchie collassate), specifiche tecniche dettagliate (utente vede sommario, espande per dettagli), thread di commenti (replies collassate), filtri prodotto in ecommerce (categorie espandibili), summary di policy legali (sezioni navigabili). Per ognuno: l'utente vede sintesi, espande dove serve approfondire. Riduce cognitive overload mantenendo accesso a informazione completa. Per progettazione: ordine logico, summary breve ma descrittivo, contenuto espanso self-contained. Test con utenti reali per verificare che le summary siano sufficienti a decidere se espandere o meno.
Procedura passo-passo
- Avvolgi il contenuto espandibile con <details>...</details>.
- All'interno aggiungi <summary>Titolo cliccabile</summary> come primo elemento.
- Dopo summary inserisci il contenuto da mostrare/nascondere.
- Per aprire di default aggiungi attributo open: <details open>.
- Per accordion mutualmente esclusivi usa name="gruppo" su tutti i details.
- Personalizza il marker con CSS o nascondilo con list-style: none.
- Aggiungi padding e bordi per migliorare l'aspetto visivo.
Errori comuni e come risolverli
- Summary non come primo figlio: deve essere il primo elemento dentro details, altrimenti il browser ne genera uno di default.
- Più summary in un details: solo il primo viene riconosciuto; altri sono ignorati o renderizzati come contenuto.
- Affidarsi a JavaScript per espandere: details lo fa nativamente; codice extra è inutile.
- Marker non rimosso correttamente: usa sia list-style: none sia ::-webkit-details-marker per supporto cross-browser.
- SEO trascurata: il contenuto interno è indicizzato anche se chiuso, ma è bene non nascondere informazioni cruciali per la pagina.
Domande frequenti
D: Details funziona su tutti i browser?
R: Sì, supportato da tutti i browser moderni inclusi mobile da molti anni.
D: Come animare apertura/chiusura?
R: Tramite CSS grid-template-rows o JavaScript con requestAnimationFrame.
D: Funziona con tastiera?
R: Sì, summary è focusable e si attiva con Enter o Spazio nativamente.
D: Posso annidare details?
R: Sì, perfettamente. È utile per FAQ gerarchiche o documentazione strutturata.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.