Scopri come funzionano gli utili dettagli e gli elementi di riepilogo e dove utilizzarli.
Un widget di divulgazione è un controllo dell'interfaccia utente che nasconde e mostra i contenuti. Se stai leggendo questo articolo su web.dev e l'area visibile è larga meno di 106 em, facendo clic su "In questa pagina" sopra questo paragrafo verrà visualizzato il sommario di questa sezione. Se non lo vedi, riduci il browser per visualizzare la navigazione del sommario in questa pagina come widget di divulgazione.
La Graphic User Interface di accordion è costituita da una serie di widget di informativa impilati verticalmente. Un caso d'uso comune per la UI di accordion è la pagina delle domande frequenti (FAQ) di molti siti. Una domanda frequente su accordion contiene un elenco di domande visibili; se fai clic su una domanda, la risposta a quella domanda si espande o viene mostrata.
jQuery include un pattern UI accordion almeno dal 2009. La soluzione originale per l'accordo senza JavaScript prevedeva di assegnare a ogni domanda delle domande frequenti un valore <label> seguito dal segno di spunta da cui era stata etichettata e di mostrare la risposta <div> quando il segno di spunta era selezionato. Il CSS aveva un aspetto simile al seguente:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Perché la storia? I widget di divulgazione, come gli accordion, senza JavaScript o hack di controllo dei moduli, sono un'aggiunta relativamente recente; gli elementi <details> e <summary> sono supportati completamente in tutti i browser moderni solo da gennaio 2020. Ora puoi creare widget informativi funzionanti, seppur non appetibili, usando solo HTML semantico. Gli elementi <details> e <summary> sono tutto ciò di cui hai bisogno: consentono di gestire l'espansione e la compressione dei contenuti. Quando un utente tocca o fa clic su un <summary> oppure rilascia il tasto Invio quando
l'elemento <summary> è attivo, i contenuti dell'elemento <details> principale diventano visibili.
Come per tutti i contenuti semantici, puoi migliorare progressivamente le funzionalità e l'aspetto predefiniti. In questo caso, è stata aggiunta una piccola porzione di CSS, ma nient'altro:
Noterai che questi codepens non contengono codice JavaScript.
Attivazione/disattivazione della visibilità: attributo open
L'elemento <details> è il contenitore del widget informativa. <summary> è il riepilogo o la legenda per l'elemento <details> principale. Il riepilogo viene sempre visualizzato, agendo come un pulsante che attiva/disattiva la visualizzazione del resto dei contenuti principali. L'interazione
con <summary> attiva/disattiva la visualizzazione dei fratelli e sorelle di riepilogo etichettati autonomamente attivando/disattivando l'attributo open dell'elemento <details>.
L'attributo open è un attributo booleano. Se presente, indipendentemente dal suo valore o dalla sua mancanza, indica che tutti i contenuti <details>
vengono mostrati all'utente. Se l'attributo open non è presente, vengono mostrati solo i contenuti di <summary>.
Poiché l'attributo open viene aggiunto e rimosso automaticamente quando l'utente interagisce con il controllo, può essere utilizzato in CSS per
applicare un diverso stile all'elemento in base al suo stato.
Puoi creare un accordion con un elenco di più elementi <details>, ciascuno con un elemento secondario <summary>. Se l'attributo open viene omesso nel codice HTML, tutti i <details> verranno compressi o chiusi, con solo le intestazioni di riepilogo visibili al caricamento della pagina; ogni intestazione sarà l'apertura per il resto dei contenuti nell'elemento <details> principale. Se includi l'attributo open nel codice HTML, <details>
verrà visualizzato in formato espanso, con i contenuti visibili, al caricamento della pagina.
I contenuti nascosti nello stato compresso sono disponibili per la ricerca in alcuni browser ma non in altri, anche se i contenuti compressi non fanno parte del DOM. Se esegui una ricerca in Edge o Chrome, i dettagli contenenti un termine di ricerca si espanderanno per mostrare l'occorrenza. Questo comportamento non viene replicato in Firefox o Safari.
<summary> deve essere il primo elemento secondario di un elemento <details> e rappresenta un riepilogo, una didascalia o una legenda per il resto dei contenuti dell'elemento <details> principale in cui è nidificato. I contenuti dell'elemento <summary> possono essere qualsiasi contenuto di intestazione, testo normale o HTML che può essere utilizzato all'interno di un paragrafo.
Attivazione/disattivazione dell'indicatore di riepilogo
Nei due codepens precedenti, noterai la freccia al lato inline-start del riepilogo. Un widget di divulgazione è in genere presentato sullo schermo tramite un piccolo triangolo che ruota (o ruota)
per indicare lo stato di apertura/chiusa, con un'etichetta accanto al triangolo. I contenuti dell'elemento <summary> etichettano il widget informativa.
La freccia rotante nella parte superiore di ogni sezione è una freccia ::marker impostata sull'elemento
<summary>. Come gli elementi dell'elenco, l'elemento <summary> supporta la proprietà dell'abbreviazione list-style e le sue proprietà longhand, tra cui list-style-type.
Puoi definire lo stile del triangolo con CSS, ad esempio modificando l'indicatore utilizzato da triangolo per qualsiasi altro tipo di punto elenco, inclusa
un'immagine con list-style-image.
Per applicare altri stili, utilizza un selettore simile a details summary::marker. Lo pseudo-elemento ::marker accetta solo un numero limitato di stili. Rimuovere l'::marker e sostituirlo con un ::before più semplice è una pratica comune: gli stili CSS modificano leggermente lo stile dei contenuti generati in base alla presenza (o all'assenza) dell'attributo aperto. Puoi rimuovere l'icona del widget informativa impostando list-style: none o impostare i contenuti dell'indicatore su none, ma includi sempre indicatori visivi per informare gli utenti vedenti che il contenuto di riepilogo è un pulsante di attivazione/disattivazione che mostra e nasconde i contenuti al momento dell'attivazione.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
Questo esempio rimuove l'indicatore predefinito e aggiunge i contenuti generati per creare un + quando i dettagli sono chiusi e un - quando i dettagli sono aperti.
Se vuoi che il blocco dei dettagli si apra per impostazione predefinita, includi l'attributo open nel tag <details> di apertura. Puoi anche aggiungere spazio tra ogni finestra di dialogo e eseguire la transizione della rotazione dell'indicatore creato con i contenuti generati per migliorarne l'aspetto:
Come vengono gestiti gli errori
Se non includi un <summary>, il browser ne creerà uno per te: con un indicatore e la parola "dettagli". Questo riepilogo
fa parte di una radice shadow, pertanto non verranno applicati gli stili di riepilogo CSS dell'autore. Purtroppo Safari non include i dettagli nell'ordine di messa a fuoco della tastiera.
Se includi un elemento <summary>, ma non è il primo elemento in <details>, il browser visualizza comunque il riepilogo come dovrebbe. Inoltre, l'operazione non avrà esito negativo se includi un link, un'etichetta o un altro elemento interattivo nel riepilogo, ma i browser gestiscono i contenuti interattivi in modo diverso. Ad esempio, se includi un link in un riepilogo, alcuni browser aggiungono sia il riepilogo che il link all'ordine di tabulazione predefinito, mentre altri browser non lo impostano per impostazione predefinita.
Se fai clic su un elemento <label> nidificato in un elemento <summary>, alcuni browser metteranno in evidenza il controllo modulo associato, mentre altri lo metteranno in evidenza e il controllo di modulo verrà attivato e su <details> aperto o chiuso.
L'interfaccia di HTMLDetailsElement
Come tutti gli elementi HTML, HTMLDetailsElement eredita tutte le
proprietà, i metodi e gli eventi da HTMLElement e aggiunge la
proprietà istanza open e un
evento toggle. La proprietà HTMLDetailsElement.open è un valore booleano
che riflette l'attributo HTML open, che indica
se i contenuti dell'elemento (senza contare i <summary>) devono essere mostrati all'utente. L'evento di attivazione/disattivazione viene attivato quando l'elemento <details> viene impostato su aperto o chiuso. Puoi ascoltare questo evento utilizzando addEventListener().
Se vuoi scrivere uno script per chiudere i dettagli aperti quando l'utente apre altri dettagli, rimuovi l'attributo aperto utilizzando removeAttribute("open"):
Questo è l'unico esempio per utilizzare JavaScript. Probabilmente non hai bisogno di JavaScript, ad eccezione di questa funzionalità di chiusura di altri widget informativi aperti.
Ricorda che <details> e <summary> possono avere uno stile molto elevato e possono anche essere utilizzati per creare suggerimenti per strumenti.
Tuttavia, se utilizzerai questi elementi semantici per casi d'uso in cui la semantica nativa non corrisponde, assicurati sempre di mantenere l'accessibilità.
La maggior parte delle informazioni HTML è accessibile per impostazione predefinita. Il nostro compito di sviluppatori è garantire che i nostri contenuti rimangano accessibili.
Verifica le tue conoscenze
Verifica la tua conoscenza dei dettagli e del riepilogo.
<summary> deve essere il primo elemento secondario di quale elemento?
<p><details><fieldset>