Elenchi

Podcast CSS - 030: Elenchi .

Immagina di avere una serie di articoli da acquistare durante il tuo prossimo viaggio al supermercato. Un modo comune per rappresentare visivamente tutto questo è un elenco, ma come si può aggiungere uno stile alla lista della spesa?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Creazione di un elenco

L'elenco precedente iniziava con un elemento semantico, o <ul>, con voci dell'elenco della spesa (elementi <li>) come elementi secondari. Se controlli ogni elemento <li>, puoi vedere che hanno tutti display: list-item, motivo per cui il browser esegue il rendering di ::marker per impostazione predefinita.

li {
  display: list-item;
}

Esistono altri due tipi di elenchi.

Gli elenchi ordinati possono essere creati con <ol>, nel qual caso l'elemento dell'elenco mostrerà un numero come ::marker.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Inoltre, gli elenchi di descrizioni vengono creati con <dl>, ma questo tipo di elenco non utilizza l'elemento elemento dell'elenco <li>.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Stili elenco

Ora che sai come creare un elenco, puoi applicare uno stile agli elenchi. Le prime proprietà CSS da scoprire sono quelle applicate all'intero elenco.

Esistono tre proprietà di tipo elenco che puoi utilizzare per definire lo stile del tuo esempio: list-style-position, list-style-image e list-style-type.

list-style-position

list-style-position ti consente di spostare il punto elenco in inside o outside nei contenuti dell'elemento dell'elenco. Il valore predefinito outside indica che il punto elenco non è incluso nei contenuti degli elementi dell'elenco, mentre inside sposta il primo elemento tra i contenuti dell'elemento.

list-style-image

list-style-image ti consente di sostituire gli elenchi puntati dell'elenco con immagini. Questo ti consente di impostare un'immagine come url o none per rendere i tuoi punti elenco un'immagine, in formato svg o gif. Puoi anche utilizzare qualsiasi tipo di media o persino un URI di dati.

Vediamo come possiamo aggiungere un'immagine di ciascuno dei nostri articoli alimentari come list-style-image:

list-style-type

L'ultima opzione consiste nello modificare lo stile della list-style-type, che cambia i punti elenco in parole chiave con stili noti, stringhe personalizzate, emoji e altro ancora. Puoi visualizzare tutti i possibili tipi di stile dell'elenco qui.

list-style in forma breve

Ora che hai tutte queste singole proprietà, puoi utilizzare la scorciatoia list-style per impostare tutti gli stili degli elenchi in un'unica riga:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style ti consente di dichiarare combinazioni di una, due o tre delle proprietà list-style in qualsiasi ordine. Se list-style-type e list-style-image sono entrambi impostati, list-style-type viene utilizzato come riserva se l'immagine non è disponibile.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Questa è la proprietà più utilizzata degli stili elenco trattati in questa sezione. Un'applicazione comune è list-style: none per nascondere gli stili predefiniti. Gli stili predefiniti provengono dal browser e spesso vengono reimpostati i fogli di stile che rimuoveranno gli stili degli elenchi come spaziatura interna e margini. Puoi usare questa forma breve per impostare gli stili, ad esempio list-style: square inside;

Finora gli esempi si sono concentrati sullo stile di un intero elenco e su tutti gli elementi dell'elenco, ma che dire di un approccio più granulare?

Pseudo-elemento ::marker

L'elemento indicatore list-item è il punto elenco, il trattino o il numero romano che aiuta a indicare ogni elemento dell'elenco.

Se controlli l'elenco in DevTools, puoi vedere un elemento ::marker per ogni elemento dell'elenco, anche se non è stato dichiarato alcun elemento in HTML. Se ispezioni ulteriormente ::marker, vedrai lo stile predefinito del browser.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Quando dichiari un elenco, a ogni elemento viene assegnato un indicatore, anche se il codice HTML non contiene elenchi puntati o numeri romani. Si tratta di uno pseudo-elemento perché il browser lo genera per te e fornisce un'API di stile limitata per sceglierlo come target. Scopri di più sull'anatomia del punto elenco CSS. ::marker offre supporto limitato in Safari.

Riquadro degli indicatori

Nel modello di layout CSS, gli indicatori degli elementi dell'elenco sono rappresentati da una casella associata a ciascun elemento dell'elenco. L'indicatore è il contenitore che in genere contiene il punto o il numero.

Per definire lo stile del riquadro dell'indicatore, puoi usare il selettore ::marker. In questo modo, puoi selezionare solo l'indicatore, invece di definire lo stile in base all'intero elenco.

Stili indicatore

Ora che hai selezionato l'indicatore, esaminiamo le proprietà di stile disponibili per questo selettore. Puoi scoprire di più sui elenchi puntati personalizzati con CSS ::marker su web.dev.

Esistono diverse proprietà ::marker CSS consentite:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Tipo display

Tutte le nostre proprietà list-style e ::marker sono in grado di applicare uno stile agli elementi <li>, poiché hanno un valore di visualizzazione predefinito: list-item. Puoi anche inserire in un elemento dell'elenco gli elementi che non sono un <li>.

Per farlo, aggiungi la proprietà display: list-item. Ad esempio, puoi usare display: list-item se vuoi aggiungere un punto elenco appeso a un titolo, in modo da poterlo modificare con ::marker. L'esempio seguente mostra un'intestazione che utilizza display: list-item per l'applicazione di stili, con un elenco che utilizza il markup dell'elenco corretto.

Sebbene sia possibile trasformare qualsiasi elemento in una visualizzazione di elementi dell'elenco con display, non è consigliabile utilizzare questo metodo invece di utilizzare il markup dell'elenco corretto, se i contenuti a cui stai applicando uno stile sono davvero un elenco. La modifica dell'aspetto visivo di un elemento in un elemento dell'elenco non cambia il modo in cui i servizi di accessibilità leggono e riconoscono l'elemento, quindi l'elemento non verrà letto come elemento dell'elenco per gli screen reader o per il passaggio da un dispositivo all'altro. Devi sempre utilizzare il markup semantico e creare elenchi con <li> quando possibile.

Verifica le tue conoscenze

Verifica le tue conoscenze degli elenchi

Risorse

• Guida MDN sugli elenchi di stili
• Punti elenco personalizzati con CSS ::marker
• Smashing Magazine: elenchi, indicatori e contatori CSS
• MDN con contatori CSS
• Modulo Elenchi e contatori CSS - Livello 3
• CSS-Tricks: conteggio con i contatori CSS e la griglia CSS