Elenchi

Immagina di avere una serie di articoli che prevedi di acquistare durante la tua prossima spesa. Un modo comune per rappresentare visivamente questo tipo di informazioni è un elenco, ma come puoi aggiungere uno stile alla tua lista della spesa?

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

Creare un elenco

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

li {
  display: list-item;
}

Esistono altri due tipi di elenchi.

È possibile creare elenchi ordinati con <ol>, in questo 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 descrittivi vengono creati con <dl>, ma questo tipo di elenco non utilizza l'elemento dell'elenco <li>.

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

Stili di elenco

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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 stile dell'elenco che puoi utilizzare per applicare uno stile all'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 i 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 dell'elenco.

Un elenco con ::marker sia esterno che interno che mostra che esterno (valore predefinito) non è nell&#39;elemento dell&#39;elenco e si trova all&#39;interno della casella dei contenuti dell&#39;elemento dell&#39;elenco.

list-style-image

list-style-image ti consente di sostituire i punti elenco dell'elenco con immagini. In questo modo puoi impostare un'immagine, ad esempio url o none, per fare in modo che i tuoi elenchi puntati siano un'immagine, un SVG o anche una GIF. Puoi anche utilizzare qualsiasi tipo di media o persino un URI di dati.

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

list-style-type

L'ultima opzione è applicare uno stile a list-style-type, che trasforma gli elenchi puntati in parole chiave di stile note, stringhe personalizzate, emoji e altro ancora. Puoi visualizzare tutti i possibili tipi di stili di elenco qui.

list-style stenografia

Ora che hai tutte queste singole proprietà, puoi utilizzare la scorciatoia list-style per impostare tutti i nostri stili di elenco in una 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 sono impostati sia list-style-type sia list-style-image, list-style-type viene utilizzato come opzione di 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 di 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 spaziatura interna e margini. Puoi anche utilizzare questa abbreviazione 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 che ne dici di un approccio più granulare?

Pseudoelemento ::marker

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

Un elenco con tre elementi che mostra che ogni elenco puntato è un pseudo-elemento ::marker.

Se ispezioni l'elenco in Strumenti per sviluppatori, puoi vedere un elemento ::marker per ogni elemento dell'elenco, nonostante non ne sia stato dichiarato nessuno in HTML. Se esamini ulteriormente il ::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 non sono presenti elenchi puntati o numeri romani in HTML. Si tratta di uno pseudo-elemento perché il browser lo genera per te e fornisce un'API di stile limitata per impostarlo come target. Scopri di più sull'anatomia dell'elenco CSS. ::marker ha un supporto limitato in Safari.

Casella di controllo indicatore

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

Per definire lo stile della casella dell'indicatore, puoi utilizzare il selettore ::marker. In questo modo puoi selezionare solo l'indicatore anziché applicare lo stile all'intero elenco.

Stili indicatori

Ora che hai selezionato l'indicatore, diamo un'occhiata alle proprietà di stile disponibili per questo selettore. Puoi scoprire di più sui bullet personalizzati con ::marker CSS 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 sanno applicare stili agli elementi <li> perché hanno un valore di visualizzazione predefinito di elemento-elenco. Puoi anche inserire elementi nell'elenco che non sono <li>.

Aggiungi la proprietà display: list-item. Un esempio di utilizzo di display: list-item è se vuoi un elenco puntato in una intestazione, in modo da poterlo sostituire con qualcos'altro con ::marker. L'esempio seguente mostra un titolo che utilizza display: list-item per lo stile, con un elenco che utilizza il markup dell'elenco corretto.

Sebbene sia possibile trasformare qualsiasi elemento in una visualizzazione elemento dell'elenco con display, non dovresti utilizzare questo elemento al posto del markup dell'elenco corretto, se i contenuti a cui applichi lo stile sono effettivamente 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 non verrà letto come elemento dell'elenco dagli screen reader o dai dispositivi di commutazione. Se possibile, devi sempre utilizzare il markup semantico e creare elenchi con <li>.

Verificare di aver compreso

Metti alla prova le tue conoscenze sugli elenchi

L'elemento che precede un elemento dell'elenco si chiama

::marker
::counter
::pencil
::bullet

I tre tipi di elenchi HTML sono

<li>
<list>
<dl>
<ol>
<ul>
<lo>

Quali due stili in questo elenco applicheranno stili a un ::marker?

display
background-color
color
transition

Risorse