Ora è facile personalizzare il colore, le dimensioni o il tipo di numero o punto elenco quando utilizzi un elemento <ul>
o <ol>
.
Grazie a Igalia, sponsorizzato da Bloomberg, possiamo finalmente smaltire i nostri trucchi per creare elenchi di stili. Guarda!
Grazie a CSS ::marker
possiamo modificare i contenuti e alcuni stili di punti e numeri.
Compatibilità del browser
::marker
è supportato in Firefox per computer e Android, Safari per computer e iOS Safari (ma solo nelle proprietà color
e font-*
, vedi Bug 204163), nonché nei browser desktop e Android basati su Chromium.
Pseudo-elementi
Considera il seguente elenco HTML essenziale non ordinato:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
Il che si traduce in un rendering non sorprendente:
Il punto all'inizio di ogni elemento <li>
è senza costi. Il browser sta disegnando e creando una casella degli indicatori generata per te.
Oggi siamo entusiasti di parlare dello pseudo-elemento ::marker
, che permette di definire lo stile dell'elemento bullet che i browser creano per te.
Creazione di un indicatore
La casella dell'indicatore degli pseudo-elementi ::marker
viene generata automaticamente all'interno di ogni elemento dell'elemento dell'elenco, che precede i contenuti effettivi e lo pseudo-elemento ::before
.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
In genere, gli elementi dell'elenco sono elementi HTML <li>
, ma anche altri elementi possono diventare elementi dell'elenco con display: list-item
.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
Applicare uno stile a un indicatore
Fino al giorno ::marker
, era possibile applicare uno stile agli elenchi utilizzando list-style-type
e list-style-image
per modificare il simbolo dell'elemento dell'elenco con 1 riga di CSS:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
È utile, ma ci serve altro. Potresti cambiare il colore, le dimensioni, gli spazi e così via? È qui che ti viene in soccorso ::marker
. Consente il targeting individuale e globale di questi pseudo-elementi da CSS:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
La proprietà list-style-type
offre possibilità di stile molto limitate. Lo pseudo-elemento ::marker
significa che puoi scegliere come target l'indicatore stesso e applicare gli stili direttamente. Ciò consente un controllo molto maggiore.
Tuttavia, non puoi utilizzare tutte le proprietà CSS su ::marker
. L'elenco delle proprietà consentite e non consentite è chiaramente indicato nella specifica. Se provi qualcosa di interessante con questo pseudo-elemento e non funziona, l'elenco riportato di seguito è la tua guida a ciò che puoi e non puoi fare con CSS:
Proprietà CSS ::marker
consentite
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
La modifica dei contenuti di un elemento ::marker
viene eseguita con content
anziché con list-style-type
. Nel prossimo esempio, lo stile del primo elemento viene utilizzato list-style-type
e il secondo viene utilizzato con ::marker
. Nel primo caso, le proprietà si applicano all'intero elemento dell'elenco, non solo all'indicatore, il che significa che anche il testo viene animato e anche l'indicatore. Quando utilizzi ::marker
, possiamo scegliere come target solo la casella dell'indicatore e non il testo.
Inoltre, tieni presente che la proprietà background
non consentita non ha alcun effetto.
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
Modifica dei contenuti di un indicatore
Ecco alcuni modi per applicare uno stile agli indicatori.
Modificare tutte le voci dell'elenco
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Modificare una sola voce dell'elenco
li:last-child::marker {
content: "😍";
}
Modificare un elemento dell'elenco in SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
Modifica di elenchi numerati
Ma che succede con <ol>
? L'indicatore su un elemento di elenco ordinato è un numero e non un punto elenco per impostazione predefinita. In CSS, questi sono chiamati contatori e sono molto potenti. Hanno anche proprietà da impostare e reimpostare dove inizia e finire il numero o per passare ai numeri romani. Possiamo applicare uno stile? Esatto. Possiamo anche utilizzare il valore del contenuto dell'indicatore per creare una presentazione numerica.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Debug
Chrome DevTools è pronto ad aiutarti a esaminare, eseguire il debug e modificare gli stili applicati agli pseudo elementi ::marker
.
Stili di pseudo-elementi futuri
Puoi scoprire di più su ::marker
nei seguenti siti:
- Elenchi, indicatori e contatori CSS di Smashing Magazine
- Counting With CSS Counters and CSS Grid di CSS-Tricks
- Utilizzo dei contatori CSS di MDN
È fantastico avere accesso a qualcosa che è stato difficile da personalizzare. Potresti voler applicare uno stile ad altri elementi generati automaticamente. Potresti provare frustrazione per <details>
o per l'indicatore di completamento automatico dell'input di ricerca, elementi che non sono implementati nello stesso modo nei vari browser. Un modo per condividere ciò di cui hai bisogno è creare un'esigenza all'indirizzo https://webwewant.fyi.