Stili elenco creatività

Scopri alcuni modi utili e creativi per definire un elenco.

Michelle Barker

Cosa ti viene in mente quando pensi a una lista? L'esempio più ovvio è una lista della spesa, la più semplice delle liste, una raccolta di articoli in un ordine particolare. Tuttavia, utilizziamo gli elenchi in molti modi diversi sul web. Una raccolta dei prossimi concerti in una sede? Molto probabilmente si tratta di un elenco. Un processo di prenotazione in più passaggi? Probabilmente si tratta di un elenco. Una galleria di immagini? Anche questo potrebbe essere considerato un elenco di immagini con didascalie.

In questo articolo illustreremo i diversi tipi di elenchi HTML disponibili sul web e quando utilizzarli, compresi alcuni attributi che potresti non conoscere. Vedremo anche alcuni modi utili e creativi per creare stili con CSS.

Quando utilizzare un elenco

Devi utilizzare un elemento di elenco HTML quando gli elementi devono essere raggruppati semanticamente. Le tecnologie per la disabilità (come gli screen reader) comunicano all'utente la presenza di un elenco e il numero di articoli. Ad esempio, se pensi a una griglia di prodotti su un sito di shopping, conoscere queste informazioni sarebbe molto utile. Pertanto, utilizzare un elemento 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>) è utile soprattutto quando gli elementi nell'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 è il menu di navigazione. Quando crei un menu, è buona norma includere ul in un elemento nav e identificare il menu con un'etichetta, per aiutare le tecnologie per la disabilità. Dovremmo anche identificare la pagina corrente nel menu, cosa 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 dei menu illustra una serie di consigli per fare in modo che i menu di navigazione siano accessibili a tutti.

Elenco ordinato (ol)

Un elemento di elenco ordinato (<ol>) è la scelta migliore quando l'ordine degli elementi è importante, ad esempio 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.

Entrambi gli elementi <ol> e <ul> possono contenere solo elementi <li> come elementi secondari diretti.

Elenco di descrizioni (dl)

Un elenco di descrizioni contiene termini (<dt> elementi) e descrizioni (<dd>). Ogni termine può essere accompagnato da più di una descrizione. I casi d'uso possibili potrebbero includere un glossario di termini o magari il menu di un ristorante. Per impostazione predefinita, gli elenchi di descrizioni non vengono visualizzati con indicatori, anche se i browser tendono a far rientrare l'elemento <dd>.

Nel codice HTML è consentito raggruppare i termini con le descrizioni che li accompagnano utilizzando un <div>. Può essere utile per applicare uno 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>  

Definizione semplice degli elenchi

Uno degli utilizzi più semplici di un elenco è all'interno di un blocco di corpo del testo. Molto spesso questi semplici elenchi non hanno bisogno di uno stile elaborato, ma potremmo voler personalizzare gli indicatori di un elenco ordinato o non ordinato in una certa misura, ad esempio con un colore del brand o utilizzando un'immagine personalizzata per i nostri punti elenco. Possiamo fare molto con list-style e lo pseudo-elemento ::marker.

Nota: per un ripasso sulle nozioni di base dello stile degli elenchi, dai un'occhiata al tutorial per imparare a usare CSS e approfondisci l'utilizzo di ::marker in questa guida per elenchi puntati personalizzati. Continua a leggere per scoprire alcune cose che forse non conosci ancora.

::indicatore

Oltre ad aggiungere uno stile di base agli indicatori dell'elenco, possiamo creare punti ciclici. Qui utilizziamo tre diversi URL immagine per il valore content dello pseudo-elemento ::marker, che si aggiunge al design scritto a mano dell'esempio di lista della spesa (invece di 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 possiamo 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 qualsiasi altro contenuto:

::marker {  
    content: counter(list-item) '🐈 ';  
}  

I nostri contatori aumentano automaticamente di uno, ma possiamo consentirli di aumentare di un valore diverso se vogliamo, impostando la proprietà counter-increment nell'elemento dell'elenco. Ad esempio, i contatori verranno incrementati di tre ogni volta:

li {  
    counter-increment: list-item 3;  
}  

Con i contatori possiamo approfondire l'argomento. L'articolo Elenchi, indicatori e contatori CSS illustra alcune delle possibilità in modo più dettagliato.

Limitazioni dello ::stile degli indicatori

A volte, potremmo volere 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ò rappresentare uno svantaggio se è necessario un altro allineamento. ::marker espone un numero limitato di proprietà CSS per lo stile. Se il nostro design richiede uno stile diverso da quello di base, potremmo fare meglio a usare un altro pseudo pseudo elemento.

Stili di elenchi che non hanno l'aspetto di un elenco

A volte potrebbe essere necessario modificare lo stile degli elenchi in modo totalmente diverso da quello predefinito. Questo è spesso il caso del menu di navigazione, ad esempio dove di solito vogliamo rimuovere tutti gli indicatori e potremmo visualizzare l'elenco orizzontalmente utilizzando Flexbox. È prassi comune impostare la proprietà list-style su none. Ciò significa che lo pseudo elemento dell'indicatore non sarà più accessibile nel DOM.

Attenzione: avviso: list-style: none fa sì che Safari non riconosca più un elenco non ordinato nell'albero dell'accessibilità, il che significa che uno screen reader non annuncerà più informazioni utili come il numero di elementi. Una soluzione semplice (supponendo che l'elenco debba essere letto come tale) è l'utilizzo di role="list" nell'elemento <ul> o <ol> nel codice HTML, come consigliato dall'esperto di accessibilità Scott O'Hara.

Indicatori personalizzati con ::before

Lo stile dello pseudo-elemento ::before era un modo comune per creare indicatori di elenchi personalizzati prima dell'introduzione di ::marker. Ma anche ora, può consentirci una maggiore flessibilità, quando ne abbiamo bisogno, per uno stile visivamente complesso degli elenchi.

Come ::marker, possiamo aggiungere stili personalizzati per i punti elenco utilizzando l'attributo content. A differenza dell'uso di ::marker, dobbiamo effettuare il posizionamento manuale perché non otteniamo i vantaggi automatici offerti da list-style-position. Ma possiamo posizionarlo relativamente facilmente con flexbox, che apre un numero maggiore di possibilità di allineamento. Ad esempio, potremmo alternare la posizione dell'indicatore:

Se applichiamo lo stile a un elenco ordinato con l'elemento ::before, potremmo utilizzare i contatori per aggiungere indicatori numerici.

li::before {  
  counter-increment: list-item;  
  content: counter(list-item);  
}  

L'uso di ::before anziché di ::marker ci consente di accedere a tutte le proprietà CSS per gli stili personalizzati e di consentire animazioni e transizioni, per le quali il supporto è limitato per ::marker.

Attributi elenco

Gli elementi degli elenchi ordinati accettano alcuni attributi facoltativi, che possono aiutarci in una serie di casi d'uso.

Elenchi invertiti

Se avessimo un elenco dei 10 album più popolari dello scorso anno, potremmo voler fare il conto alla rovescia da 10 a 1. Potremmo utilizzare contatori personalizzati a questo scopo, incrementandoli negativamente. Oppure potremmo semplicemente utilizzare l'attributo reversed nel codice HTML. Direi che in genere ha senso semantico utilizzare l'attributo reversed anziché incrementare negativamente il contatore in CSS, a meno che non siano puramente di presentazione. Se il caricamento del CSS non va a buon fine, le cifre riportate nel codice HTML continuano a essere contate alla rovescia. Inoltre, dobbiamo considerare come uno screen reader interpreterebbe l'elenco.

Prendi questa demo dei 10 album più ascoltati del 2021. Se i contatori vengono incrementati puramente con CSS, un utente che accede alla pagina utilizzando uno screen reader potrebbe concludere che i numeri vengano conteggiati più in alto, quindi che il numero 10 fosse in realtà il numero uno.

Puoi vedere nella demo che, utilizzando l'attributo reversed, i nostri indicatori contengono già il valore corretto, senza alcuno sforzo in più da parte nostra. Tuttavia, se creiamo indicatori di elenchi personalizzati utilizzando lo pseudo-elemento ::before, dobbiamo modificare i contatori. Dobbiamo solo indicare al nostro contatore di elementi dell'elenco di incrementare negativamente:

li::before {  
  counter-increment: list-item -1;  
  content: counter(list-item);  
}  

Questo è sufficiente in Firefox, ma in Chrome e Safari gli indicatori faranno il conto alla rovescia da zero a -10. Possiamo risolvere il problema aggiungendo l'attributo start all'elenco.

Elenchi suddivisi

L'attributo start ci consente di specificare il valore numerico da cui deve iniziare l'elenco. Questo può essere utile quando vuoi suddividere un elenco in gruppi.

Prendiamo l'esempio dei nostri 10 album principali. Magari vogliamo davvero fare il conto alla rovescia per i primi 20 album, ma in gruppi di 10. Tra i due gruppi ci sono altri contenuti della pagina.

Dovremo creare due elenchi separati nel codice HTML, ma come possiamo garantire che i contatori siano corretti? Allo stato attuale del nostro markup, entrambi gli elenchi fanno il conto alla rovescia da 10 a 1, che non è ciò che vogliamo. Tuttavia, nel nostro HTML possiamo specificare un valore per l'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 a più colonne

Il layout a più colonne a volte si presta bene ai nostri elenchi, come puoi vedere dalle demo precedenti. Se imposti la larghezza delle colonne, possiamo garantire che l'elenco si adatti automaticamente, posizionandosi su due o più colonne solo quando lo spazio è sufficiente. Possiamo anche impostare un divario tra le colonne e, per un maggiore stile, aggiungere una regola-colonna con stile (usando un'abbreviazione simile alla proprietà border):

ol {  
    columns: 25rem;  
    column-gap: 7rem;  
    column-rule: 4px dotted turquoise;  
}  

Utilizzando le colonne, a volte possiamo ritrovare sgradevoli interruzioni nelle voci dell'elenco, non sempre l'effetto che vogliamo.

Possiamo evitare queste interruzioni forzate utilizzando break-inside: avoid nelle voci del nostro elenco:

li {  
    break-inside: avoid;  
}  

Proprietà personalizzate

Le proprietà personalizzate CSS offrono un'ampia gamma di possibilità per definire gli elenchi. Se conosciamo l'indice dell'elemento dell'elenco, possiamo utilizzarlo per calcolare i valori delle proprietà. Purtroppo al momento non è possibile determinare l'indice dell'elemento (in modo utilizzabile, in ogni caso) solo in CSS. I contatori ci consentono solo di utilizzare il loro valore nella proprietà content e non consentono calcoli.

Tuttavia, possiamo impostare l'indice dell'elemento all'interno dell'attributo style nel codice HTML, in modo da rendere i calcoli più fattibili, soprattutto se stiamo utilizzando un linguaggio per i modelli. Questo esempio mostra come eseguiremo questa impostazione utilizzando Nunjucks:

<ol style="--length: items|length">  
  
</ol>  

Splitting.js è una libreria che esegue una funzione simile sul lato client.

Utilizzando il valore della proprietà personalizzata, possiamo mostrare l'avanzamento in un elenco in vari modi. Un modo potrebbe essere una barra di avanzamento per un elenco di passaggi. In questo esempio, stiamo utilizzando uno pseudo-elemento con un gradiente lineare per creare una barra per ogni elemento che indica la distanza dell'utente 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à con l'avanzamento dell'elenco utilizzando la funzione colore hsl(). Possiamo calcolare il valore di hue utilizzando la nostra proprietà personalizzata.

Stili dell'elenco di descrizioni

Come accennato in precedenza, possiamo scegliere di disporre i termini e le relative definizioni in un elemento div in un dl, per offrire 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 intorno a ogni gruppo, i nostri termini e le nostre descrizioni vengono inseriti 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.

Se invece vogliamo raggruppare i termini in modo distinto in base allo stile della scheda delle descrizioni, un wrapper <div> è molto utile.

Risorse

• Elenchi Un'introduzione agli elenchi e ::Mark
• Indicatori personalizzati che utilizzano ::indicatore
• Elenchi CSS con contatori