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
L'elemento che precede una voce di elenco è chiamato
::bullet
::counter
::pencil
::marker
I tre tipi di elenchi HTML sono
<ol>
<dl>
<list>
<li>
<lo>
<ul>
Quali due stili in questo elenco applicheranno gli stili a un ::marker
?
color
transition
display
background-color