Stili elenco creatività

Dai un'occhiata ad alcuni modi utili e creativi per dare stile a un elenco.

Michelle Barker
Michelle Barker
X Home page

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 non ordinato (<ul>) è particolarmente utile quando le voci 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.

Una lista della spesa con prodotti come pane, latte e mele.

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.

Un elenco dettagliato dei passaggi necessari per preparare il tè con il latte.

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. 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 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 una certa misura gli indicatori di un elenco ordinato o non ordinato, ad esempio con un colore di brand o utilizzando un'immagine personalizzata per i punti elenco. 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 dell'indicatore e aggiungere qualsiasi altro contenuto:

::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 nell'elemento dell'elenco. Ad esempio, questo aumenterà 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 degli stili ::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 dagli stili di base, potrebbe essere meglio usare un altro pseudo-elemento.

Stili degli elenchi che non hanno lo stesso aspetto di 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

Lo stile dell'elemento pseudo ::before era un modo comune per creare indicatori di elenco personalizzati prima dell'introduzione di ::marker. 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'uso di ::marker, dobbiamo effettuare un posizionamento manuale perché non abbiamo i vantaggi automatici offerti da list-style-position. Ma con flexbox possiamo posizionarlo in modo relativamente facile e ciò offre un maggior numero 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'uso di ::before al posto di ::marker ci consente l'accesso completo alle proprietà CSS per gli stili personalizzati, nonché l'uso di animazioni e transizioni, per le quali il supporto è limitato per ::marker.

Elenco 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 a questo scopo e incrementarli negativamente. In alternativa, potremmo semplicemente utilizzare l'attributo reversed in HTML. Ritengo che generalmente abbia senso semantico utilizzare l'attributo reversed anziché incrementare negativamente il contatore in CSS, a meno che i contatori non siano puramente rappresentativi. Se il caricamento del CSS non è andato a buon fine, i numeri continueranno a essere conteggiati correttamente nel codice HTML. Inoltre, dobbiamo considerare come uno screen reader interpreterebbe 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 creiamo indicatori di elenco personalizzati utilizzando lo pseudo-elemento ::before, dobbiamo regolare i nostri 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.

Un elenco con struttura a fili in colonne con un elemento che occupa metà delle colonne.

Dovremo creare due elenchi separati nel codice HTML, ma come possiamo assicurarci che i contatori siano corretti? Allo stato attuale del nostro markup, entrambi gli elenchi prevedono un conto alla rovescia da 10 a 1, 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 la larghezza della colonna, possiamo garantire che il nostro elenco risponde automaticamente, posizionandosi su 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 scorciatoia 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.

Una dimostrazione di come i contenuti sono suddivisi tra due colonne.

Possiamo evitare queste interruzioni forzate utilizzando break-inside: avoid negli elementi dell'elenco:

li {  
    break-inside: avoid;  
}

Proprietà personalizzate

Le proprietà personalizzate CSS offrono tutta una serie di possibilità per gli elenchi di stili. 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, in modo da rendere i calcoli più semplici, 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 l'avanzamento 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 a che distanza si trova l'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à man mano che l'elenco procede, utilizzando la funzione 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 questo risultato è utile, come nell'esempio seguente, per 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 in modo distinto i termini in base allo stile di scheda delle descrizioni, un wrapper <div> è molto utile.

Risorse