Dai un'occhiata ad alcuni modi utili e creativi per dare stile a un elenco.
Cosa ti viene in mente quando pensi a un elenco? L'esempio più ovvio è una lista della spesa, l'elenco più semplice, una raccolta di articoli senza un ordine particolare. Tuttavia, sul web utilizziamo gli elenchi in svariati modi. Una raccolta di concerti in programma in un luogo? Molto probabilmente un elenco. Un processo di prenotazione in più passaggi? Molto probabilmente un elenco. Una galleria di immagini? Anche questo potrebbe essere considerato un elenco di immagini con didascalie.
In questo articolo esamineremo i diversi tipi di elenchi HTML disponibili sul web e quando utilizzarli, inclusi alcuni attributi che potresti non conoscere. Esamineremo anche alcuni modi utili e creativi per applicare stili con CSS.
Quando utilizzare un elenco
Un elemento dell'elenco HTML deve essere utilizzato quando gli elementi devono essere raggruppati semanticamente. Le tecnologie per la disabilità (come gli screen reader) avvisano l'utente della presenza di un elenco e del numero di elementi. Se pensi, ad esempio, a una griglia di prodotti su un sito di shopping, conoscere queste informazioni sarebbe molto utile. Pertanto, l'utilizzo di un elemento dell'elenco potrebbe essere una buona scelta.
Elenca tipi
Per quanto riguarda il markup, abbiamo a disposizione tre diversi elementi di elenco:
- Elenco non ordinato
- Elenco ordinato
- Elenco di descrizioni
La scelta dipende dal caso d'uso.
Elenco non ordinato (ul)
L'elemento dell'elenco non ordinato (<ul>
) è più utile quando gli elementi dell'elenco non corrispondono a un ordine particolare. Per impostazione predefinita, viene visualizzato come elenco puntato. Un esempio è una lista della spesa, in cui l'ordine non ha importanza.
Un esempio più comune sul web è un menu di navigazione. Quando crei un menu, è buona norma racchiudere ul
in un elemento nav
e identificare il menu con un'etichetta per aiutare le tecnologie per la disabilità. Dobbiamo anche identificare la pagina corrente nel menu, il che possiamo fare utilizzando l'attributo aria-current
:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
Questo articolo sulla struttura del menu illustra una serie di consigli per garantire che i nostri menu di navigazione siano accessibili a tutti.
Elenco ordinato (ol)
Un elemento dell'elenco ordinato (<ol>
) è la scelta migliore quando l'ordine degli elementi è importante, ad esempio in un processo in più passaggi. Per impostazione predefinita, le voci dell'elenco sono numerate. Un esempio potrebbe essere un insieme di istruzioni in cui i passaggi devono essere completati in ordine.
Sia gli elementi <ol>
che <ul>
possono contenere solo elementi <li>
come elementi secondari diretti.
Elenco di descrizioni (dl)
Un elenco descrittivo contiene termini (elementi <dt>
) e descrizioni (<dd>
). Ogni termine può essere accompagnato da più descrizioni. Possibili casi d'uso potrebbero includere un glossario di termini o un menu di un ristorante. Per impostazione predefinita, gli elenchi descrittivi non vengono visualizzati con indicatori, anche se i browser tendono a rientrare l'elemento <dd>
.
In HTML è consentito raggruppare i termini con le relative descrizioni utilizzando un <div>
. Questo può essere utile per lo stile, come vedremo più avanti.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Stile di elenco semplice
Uno degli utilizzi più semplici di un elenco è all'interno di un blocco di testo del corpo. Molto spesso questi semplici elenchi non richiedono uno stile elaborato, ma potremmo voler personalizzare in qualche misura gli indicatori di un elenco ordinato o non ordinato, ad esempio con un colore del brand o utilizzando un'immagine personalizzata per i nostri elenchi puntati. Possiamo fare molto con list-style
e lo pseudo-elemento ::marker
.
::marker
Oltre a dare ai nostri indicatori di elenco uno stile di base, possiamo creare elenchi puntati ciclici. Qui utilizziamo tre diversi URL immagine per il valore content
dell'elemento pseudo ::marker
, che aggiunge un'atmosfera scritta a mano al nostro esempio di elenco della spesa (anziché utilizzare una sola immagine per tutti):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Contatori personalizzati
Per alcuni elenchi ordinati potremmo voler utilizzare il valore del contatore, ma aggiungerne un altro. Possiamo utilizzare il contatore list-item
come valore per la proprietà content
del nostro indicatore e aggiungere altri contenuti:
::marker {
content: counter(list-item) '🐈 ';
}
I nostri contatori aumentano automaticamente di uno, ma possiamo consentire che aumentino di un valore diverso, se lo vogliamo, impostando la proprietà counter-increment
sull'elemento dell'elenco. Ad esempio, questo incrementerà i nostri contatori di tre ogni volta:
li {
counter-increment: list-item 3;
}
Potremmo approfondire molto di più i contatori. L'articolo Elenchi, indicatori e contatori CSS illustra alcune delle possibilità in modo più dettagliato.
Limitazioni dello stile ::marker
A volte potremmo voler avere un maggiore controllo sulla posizione e sullo stile degli indicatori. Ad esempio, non è possibile posizionare l'indicatore utilizzando flexbox o griglia, il che a volte può essere uno svantaggio se hai bisogno di un altro allineamento. ::marker
espone un numero limitato di proprietà CSS per lo stile. Se il nostro design richiede qualcosa di diverso dallo stile di base, potrebbe essere meglio utilizzare un altro pseudo-elemento.
Applicare stili a elenchi che non sembrano elenchi
A volte potremmo voler applicare agli elenchi uno stile completamente diverso da quello predefinito. Questo accade spesso con un menu di navigazione, ad esempio, in cui in genere vogliamo rimuovere tutti gli indicatori e potremmo visualizzare l'elenco in orizzontale utilizzando flexbox. È prassi comune impostare la proprietà list-style
su none
. Ciò significa che lo pseudo-elemento indicatore non sarà più accessibile nel DOM.
Indicatori personalizzati con ::before
Prima dell'introduzione di ::marker
, lo stile dell'elemento pseudo ::before
era un modo comune per creare indicatori di elenco personalizzati. Tuttavia, anche ora può offrirci una maggiore flessibilità, quando ce ne è bisogno, per lo stile degli elenchi visivamente complessi.
Come per ::marker
, possiamo aggiungere i nostri stili di elenchi puntati personalizzati utilizzando l'attributo content
. A differenza dell'utilizzo di ::marker
, dobbiamo eseguire un po' di posizionamento manuale, poiché non otteniamo i vantaggi automatici offerti da ::marker
.list-style-position
Tuttavia, possiamo posizionarlo relativamente facilmente con flexbox e offre un numero maggiore di possibilità di allineamento. Ad esempio, potremmo alternare la posizione dell'indicatore:
Se applichiamo uno stile a un elenco ordinato utilizzando l'elemento ::before
, potremmo anche utilizzare i contatori per aggiungere i nostri indicatori numerici.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
L'utilizzo di ::before
anziché ::marker
ci consente di avere accesso completo alle proprietà CSS per lo stile personalizzato, nonché di consentire animazioni e transizioni, il cui supporto è limitato per ::marker
.
Elenco degli attributi
Gli elementi degli elenchi ordinati accettano alcuni attributi facoltativi, che possono essere utili in una serie di casi d'uso.
Elenchi invertiti
Se abbiamo un elenco dei 10 migliori album dell'anno precedente, potremmo voler eseguire il conto alla rovescia da 10 a 1. Potremmo utilizzare contatori personalizzati e incrementarli in modo negativo. In alternativa, potremmo semplicemente utilizzare l'attributo reversed
in HTML. In genere, ha senso semantico utilizzare l'attributo reversed
anziché incrementare negativamente il contatore in CSS, a meno che i contatori non siano puramente di presentazione. Se il caricamento del CSS non è andato a buon fine, i numeri continueranno a essere conteggiati correttamente nel codice HTML. Inoltre, dobbiamo considerare in che modo uno screen reader interpreterà l'elenco.
Guarda questa demo dei 10 album più ascoltati del 2021. Se i contatori venivano incrementati solo con CSS, un utente che accedeva alla pagina utilizzando uno screen reader potrebbe concludere che i numeri venivano conteggiati in ordine crescente, quindi il numero 10 era in realtà il numero 1.
Nella demo puoi vedere che, utilizzando l'attributo reversed
, i nostri indicatori hanno già il valore corretto, senza alcuno sforzo aggiuntivo da parte nostra. Tuttavia, se stiamo creando indicatori di elenco personalizzati utilizzando l'elemento pseudo ::before
, dobbiamo modificare i contatori. Dobbiamo solo indicare al contatore degli elementi dell'elenco di aumentare in modo negativo:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
Questo sarà sufficiente in Firefox, ma in Chrome e Safari gli indicatori conteggiano da zero a -10. Possiamo risolvere il problema aggiungendo l'attributo start
all'elenco.
Suddividere gli elenchi
L'attributo start
ci consente di specificare il valore numerico da cui deve iniziare l'elenco. Un modo in cui può essere utile è quando vuoi suddividere un elenco in gruppi.
Sviluppiamo l'esempio dei 10 album più ascoltati. Forse vogliamo elencare i 20 album più ascoltati, ma in gruppi di 10. Tra i due gruppi sono presenti altri contenuti della pagina.
Dovremo creare due elenchi separati nel codice HTML, ma come possiamo assicurarci che i contatori siano corretti? Al momento, con il nostro markup, entrambi gli elenchi conteggiano da 10 a 1, il che non è ciò che vogliamo. Tuttavia, nel codice HTML possiamo specificare un valore dell'attributo start
. Se aggiungiamo un valore start
pari a 20 al nostro primo elenco, gli indicatori verranno aggiornati di nuovo automaticamente.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Layout dell'elenco con più colonne
Il layout a più colonne a volte si presta bene ai nostri elenchi, come puoi vedere dalle demo precedenti. Impostando una larghezza di colonna, possiamo assicurarci che l'elenco sia automaticamente adattabile, sovrapponendosi a due o più colonne solo quando lo spazio è sufficiente. Possiamo anche impostare uno spazio tra le colonne e, per un tocco in più, aggiungere una regola-colonna con stile (utilizzando una abbreviazione simile alla proprietà border
):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
L'utilizzo delle colonne può a volte causare interruzioni sgradevoli negli elementi dell'elenco, non sempre l'effetto desiderato.
Possiamo evitare queste interruzioni forzate utilizzando break-inside: avoid
negli elementi dell'elenco:
li {
break-inside: avoid;
}
Proprietà personalizzate
Le proprietà CSS personalizzate offrono una vasta gamma di possibilità per applicare stili agli elenchi. Se conosciamo l'indice dell'elemento dell'elenco, possiamo utilizzarlo per calcolare i valori delle proprietà. Purtroppo al momento non esiste un modo per determinare l'indice dell'elemento (in un modo utilizzabile, in ogni caso) solo in CSS. I contatori ci consentono di utilizzare il loro valore solo nella proprietà content
e non consentono i calcoli.
Tuttavia, possiamo impostare l'indice dell'elemento all'interno dell'attributo style
nel nostro codice HTML, il che può rendere i calcoli più fattibili, soprattutto se utilizziamo un linguaggio di creazione di modelli. Questo esempio mostra come impostarlo utilizzando Nunjucks:
<ol style="--length: items|length">
</ol>
Splitting.js è una libreria che svolge una funzione simile sul lato client.
Utilizzando il valore della proprietà personalizzata, possiamo mostrare la progressione in un elenco in vari modi. Un modo potrebbe essere una barra di avanzamento per un elenco di passaggi. In questo esempio, utilizziamo uno pseudo-elemento con un gradiente lineare per creare una barra per ogni elemento che mostra quanto l'utente è avanzato nell'elenco.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Potremmo anche regolare la tonalità man mano che l'elenco avanza, utilizzando la funzione di colore hsl()
. Possiamo calcolare il valore hue
utilizzando la nostra proprietà personalizzata.
Stile dell'elenco di descrizioni
Come accennato in precedenza, possiamo scegliere di inserire i termini e le relative definizioni in un div
in un dl
per avere più opzioni di stile. Ad esempio, potremmo voler visualizzare l'elenco sotto forma di griglia. Se imposti display: grid
nell'elenco senza un wrapper div
attorno a ogni gruppo, i termini e le descrizioni verranno posizionati in celle della griglia diverse. A volte è utile, come nell'esempio seguente, mostrare un menu di torte con le relative descrizioni.
Possiamo definire una griglia nell'elenco stesso e assicurarci che i termini e le descrizioni siano sempre allineati in colonne, con la larghezza della colonna determinata dal termine più lungo.
D'altra parte, se vogliamo raggruppare distintamente i termini con le relative descrizioni in stile scheda, un wrapper <div>
è molto utile.
Risorse
- Elenchi: un'introduzione agli elenchi e a ::marker
- Indicatori personalizzati utilizzando ::marker
- Elenchi CSS con contatori