Dettagli e riepilogo

Scopri come funzionano questi utili dettagli e gli elementi di riepilogo e dove per utilizzarli.

Un widget per l'informativa è un controllo dell'interfaccia utente che nasconde e mostra contenuti. Se stai leggendo questo articolo su web.dev e l'area visibile è larga meno di 106 ems, facendo clic sul pulsante "In questa pagina" sopra questo paragrafo rivela il sommario per questa sezione. Se non è visibile, riduci il browser per visualizzare la navigazione del sommario in questa pagina come widget per l'informativa.

La Graphic User Interface accordion è composta da una serie di riquadri widget relativi alle informative. Un caso d'uso comune dell'interfaccia utente accordion è la pagina delle domande frequenti su molti siti. Una Domande frequenti sulla accordion contiene un elenco di domande visibili; se fai clic su una domanda, la risposta si espande o "divulgherà" la risposta.

jQuery include un pattern UI accordion almeno dal 2009. L'originale senza JavaScript La soluzione di accordion prevedeva l'assegnazione di un <label> a ogni domanda delle domande frequenti seguita da un segno di spunta e poi la visualizzazione di <div> rispondere correttamente quando il segno di spunta è stato 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 relativi all'informativa, come le accordion, senza JavaScript o attacchi di controllo dei moduli, sono relativamente recenti addizione; <details> e <summary> sono stati completamente supportati in tutti i browser moderni solo da gennaio 2020. Ora puoi creare funzioni, anche se meno rispetto a widget di divulgazione accattivanti che usano solo codice HTML semantico. Gli elementi <details> e <summary> ti servono: sono uno strumento integrato per gestire espandere e comprimere i contenuti. Quando un utente fa clic o tocca un <summary> oppure rilascia il tasto Invio quando l'elemento <summary> è attivo, i contenuti del pulsante di attivazione/disattivazione di <details> principale sono visibili.

Come tutti i contenuti semantici, puoi migliorare progressivamente le funzionalità e l'aspetto predefiniti. In questo caso, una piccola parte Il CSS è stato aggiunto, ma nient'altro:

Noterai che questi codepen non contengono codice JavaScript.

Attivazione/disattivazione della visibilità: attributo open

L'elemento <details> è il contenitore del widget per l'informativa. <summary> è il riepilogo o la legenda dell'elemento <details> principale. La il riepilogo viene sempre visualizzato, fungendo da pulsante che attiva/disattiva la visualizzazione degli altri contenuti principali. Interazione con <summary> attiva/disattiva la visualizzazione degli elementi di pari livello di riepilogo autoetichettati attivando/disattivando <details> attributo open dell'elemento.

L'attributo open è un attributo booleano. Se presente, indipendentemente dal valore o dalla sua mancanza, indica che tutti gli <details> i contenuti mostrati all'utente. Se l'attributo open non è presente, vengono mostrati solo i contenuti dell'attributo <summary>.

Poiché l'attributo open viene aggiunto e rimosso automaticamente mentre l'utente interagisce con il controllo, può essere utilizzato in CSS per modificare lo stile dell'elemento in base al suo stato.

Puoi creare un accordion con un elenco di più elementi <details>, ciascuno con un <summary> secondario. Attributo open omesso nel codice HTML, tutti i <details> verranno compressi o chiusi, con solo le intestazioni di riepilogo visibili al caricamento della pagina; ogni intestazione apre il resto dei contenuti nell'elemento <details> principale. Se includi l'attributo open nel codice HTML, <details> viene visualizzato in stato 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 fa parte del DOM. Se esegui una ricerca in Edge o Chrome, i dettagli contenenti un termine di ricerca verranno visualizzati l'evento. 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 intestazione contenuti, testo normale o HTML che possono essere utilizzati all'interno di un paragrafo.

Attivazione/disattivazione dell'indicatore di riepilogo

Nei due codepen precedenti, puoi notare la freccia verso inline-start nel riepilogo. In genere, sullo schermo viene presentato un widget per l'informativa con un piccolo triangolo che ruota (o ruota) per indicare lo stato aperto/chiuso, con un'etichetta accanto al triangolo. I contenuti dell'elemento <summary> etichettano il widget dell'informativa. La freccia di rotazione nella parte superiore di ogni sezione è una ::marker impostata nella Elemento <summary>. Come per gli elementi dell'elenco, l'elemento <summary> supporta list-style proprietà abbreviata e le sue proprietà long-hand, tra cui list-style-type. Puoi definire il triangolo informativo con CSS, modificando l'indicatore utilizzato da un triangolo a qualsiasi altro tipo di punto elenco, tra cui un'immagine con list-style-image.

Per applicare altri stili, utilizza un selettore simile a details summary::marker. La Lo pseudo-elemento ::marker accetta solo un numero limitato di stili. La rimozione ::marker e la sostituzione con ::before, più facile da usare, sarà È prassi 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 dell'informativa impostando list-style: none o impostando i contenuti dell'indicatore su none, ma includi sempre indicatori visivi per informare gli utenti vedenti che il riepilogo dei contenuti è un pulsante di attivazione/disattivazione che mostrerà e nasconderà 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 contenuti generati per creare un + quando i dettagli sono chiusi e un - quando i dettagli sono aperti.

Se vuoi che il blocco dei dettagli venga aperto per impostazione predefinita, includi l'attributo open nel tag <details> di apertura. Puoi anche aggiungere spazio tra una finestra di dialogo e l'altra e passa la rotazione dell'indicatore creato con i contenuti generati per migliorare 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 root shadow, pertanto non verranno applicati gli stili di riepilogo CSS dell'autore. Purtroppo Safari non include i dettagli nell'ordine di impostazione dello stato attivo della tastiera.

Se includi un <summary>, ma non è il primo elemento nella <details>, il browser mostra comunque il riepilogo come dovrebbe. Non avrà esito negativo anche se includi un link, un'etichetta o un altro elemento interattivo nel riepilogo, ma i browser gestire in modo diverso i contenuti interattivi all'interno di questi ultimi. Ad esempio, se includi un link in un riepilogo, alcuni browser aggiungerà sia il riepilogo che il link all'ordine di tabulazione predefinito, ma altri browser non si concentreranno sul link per impostazione predefinita. Se fai clic su un elemento <label> nidificato in un <summary>, alcuni browser attiveranno il controllo del modulo associato; altri browser imposta lo stato attivo sul controllo del modulo e attiva/disattiva <details> per aprire o chiudere la finestra.

Interfaccia di HTMLDetailsElement

Come tutti gli elementi HTML, HTMLDetailsElement eredita tutti proprietà, metodi ed eventi da HTMLElement e aggiunge open e una proprietà toggle . La proprietà HTMLDetailsElement.open è un valore booleano che riflette l'attributo HTML open, che indica se i contenuti dell'elemento (senza contare <summary>) devono essere mostrati all'utente. Viene attivato l'evento di attivazione/disattivazione Quando l'elemento <details> viene aperto o chiuso. Puoi ascoltare questo evento utilizzando addEventListener().

Se vuoi scrivere uno script per chiudere i dettagli aperti quando l'utente ne apre altri, rimuovi l'attributo aperto utilizzando removeAttribute("open"):

Questo è l'unico esempio per utilizzare JavaScript. Probabilmente non hai bisogno di JavaScript, ad eccezione della funzionalità che consente di chiudere widget informative aperti.

Ricorda che gli elementi <details> e <summary> possono avere uno stile molto pesante e possono essere utilizzati anche per creare suggerimenti degli strumenti. Tuttavia, se utilizzi questi elementi semantici per casi d'uso in cui la semantica nativa non corrisponde, assicurati sempre di mantenere l'accessibilità. Per impostazione predefinita, il codice HTML è per la maggior parte accessibile. 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>
Riprova.
<details>
Esatto!
<fieldset>
Riprova.