The CSS Podcast - 030: Elenchi
Immagina di avere una serie di articoli che intendi acquistare durante il prossimo viaggio al supermercato. Un modo comune per rappresentarlo visivamente è l'elenco, ma come si fa ad 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 gli articoli della lista della spesa (<li> elementi) come elementi secondari. Se esamini ogni elemento <li>, puoi vedere che tutti hanno 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>
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. 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 dell'esempio: list-style-position, list-style-image e list-style-type.
list-style-position
list-style-position ti consente di spostare il punto elenco a inside o outside ai contenuti dell'elemento dell'elenco. Il valore predefinito outside significa 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, ad esempio url o none, per rendere uniforme i punti elenco in un'immagine, in formato svg o gif. Puoi anche utilizzare qualsiasi tipo di supporto o persino un URI dati.
Diamo un'occhiata a come possiamo aggiungere un'immagine di ciascuno dei nostri prodotti alimentari come list-style-image:
list-style-type
L'ultima opzione è definire lo stile della colonna list-style-type, che modifica gli elenchi puntati con parole chiave in stili noti, stringhe personalizzate, emoji e altro ancora. Puoi visualizzare tutti i tipi di stili disponibili per gli elenchi qui.
list-style in forma breve
Ora che disponi di tutte queste singole proprietà, puoi utilizzare la scorciatoia list-style per impostare tutti gli stili degli elenchi su 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;
Si tratta della proprietà più utilizzata tra gli 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 i fogli di stile reimpostati rimuovono gli stili degli elenchi come la spaziatura interna e i margini. Puoi anche usare questa scorciatoia per impostare gli stili, ad esempio list-style: square inside;
Finora, gli esempi si sono concentrati sullo stile di un intero elenco e degli elementi dell'elenco, ma cosa succede a un approccio più granulare?
Pseudo-elemento ::marker
L'elemento indicatore list-item è un punto elenco, un trattino o un numero romano che consente di indicare ogni elemento dell'elenco.
Se esamini l'elenco in DevTools, puoi vedere un elemento ::marker per ogni elemento dell'elenco, anche se non ne hai dichiarato uno in HTML. Se esamini 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 nel codice HTML non sono presenti elenchi puntati o numeri romani. Si tratta di uno pseudo-elemento perché il browser lo genera per te e fornisce un'API per lo stile limitata per sceglierlo come target. Scopri di più sulla struttura dell'elenco puntato CSS. ::marker ha un supporto limitato in Safari.
Casella di pennarello
Nel modello di layout CSS, gli indicatori degli elementi dell'elenco sono rappresentati da una casella di indicatori associata a ogni elemento dell'elenco. La casella dell'indicatore è il contenitore che in genere contiene il punto elenco o il numero.
Per applicare uno stile alla casella dell'indicatore, puoi utilizzare il selettore ::marker. In questo modo puoi selezionare solo l'indicatore anziché applicare uno stile basato sull'intero elenco.
Stili indicatore
Ora che hai selezionato l'indicatore, diamo un'occhiata alle proprietà di stile disponibili per questo selettore. Puoi scoprire di più sui elenchi puntati personalizzati con CSS ::Mark su web.dev.
Sono consentite alcune proprietà ::marker CSS consentite:
animation-*transition-*colordirectionfont-*contentunicode-bidiwhite-space
Tipo display
Tutte le nostre proprietà list-style e ::marker conoscono lo stile degli elementi <li> perché hanno un valore visualizzato predefinito di list-item. Puoi anche inserire in un elenco elementi che non sono <li>.
Per farlo, aggiungi la proprietà display: list-item. Ad esempio, puoi utilizzare display: list-item se vuoi aggiungere un punto elenco appeso a un titolo, in modo da poterlo sostituire con ::marker. L'esempio seguente mostra un'intestazione che utilizza display: list-item per motivi di stile, con un elenco che utilizza il markup per l'elenco corretto.
Puoi trasformare qualsiasi elemento in una visualizzazione elemento elenco con display, ma non utilizzare invece il markup corretto dell'elenco, se i contenuti a cui vuoi applicare lo stile sono in realtà 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, pertanto l'elemento non verrà letto come elemento dell'elenco per screen reader o per cambiare dispositivo. Devi sempre utilizzare il markup semantico e creare elenchi con <li>, se possibile.
Verifica la tua comprensione
Verifica la tua conoscenza degli elenchi
L'elemento che precede un elemento elenco è chiamato un
I tre tipi di elenchi HTML sono
<dl><lo><ol><li><ul><list>Quali due stili in questo elenco applicheranno stili a un ::indicatore?
transitionbackground-colorcolordisplay