Proprietà CSS list-style-image
Usa la proprietà CSS list-style-image per impostare un'immagine al posto del marcatore degli elementi di lista. Definizione, valori ed esempi.
La proprietà CSS list-style-image sostituisce il marcatore predefinito degli elementi di lista (il disco, il cerchio o il numero) con un'immagine a tua scelta. È il modo più semplice per assegnare proiettili personalizzati a un <ol> o <ul> — un segno di spunta, una freccia, un'icona — senza aggiungere markup extra.
Questa pagina illustra cosa fa la proprietà, i valori che accetta, come viene ridimensionato il marcatore, i problemi più comuni e come si integra nella shorthand list-style.
Quando usarla
Scegli list-style-image quando vuoi proiettili decorativi che provengono da un'immagine singola e piccola e non hai bisogno di controllare con precisione le dimensioni o la spaziatura del proiettile. Se hai bisogno di un controllo preciso sul marcatore (dimensioni, spazio, allineamento), l'approccio moderno è usare lo pseudo-elemento ::marker oppure un background-image su ogni <li> con padding-left — list-style-image non consente di ridimensionare l'immagine, quindi un'immagine troppo grande dominerà la riga.
Come viene ridimensionato il marcatore
Se l'immagine ha larghezza e altezza intrinseche, vengono usate direttamente come dimensione del marcatore. Se l'immagine ha un rapporto di aspetto intrinseco e solo una dimensione intrinseca, la dimensione mancante viene calcolata dal rapporto. Non essendo disponibile alcun CSS per scalare il marcatore, prepara l'immagine alla dimensione desiderata (tipicamente 16×16 o più piccola).
La proprietà list-style-image si applica agli elementi di lista e a qualsiasi elemento con display impostato su list-item. Per impostazione predefinita ciò riguarda gli elementi <li>, ma puoi impostarla anche sull'elemento padre <ol> o <ul>, dove viene ereditata dagli elementi di lista.
Se l'immagine non viene caricata, il marcatore torna al valore di list-style-type (un disco per impostazione predefinita). Mantieni sempre un list-style-type sensato in modo che le immagini non caricate non lascino la lista senza proiettili.
| Valore iniziale | none |
|---|---|
| Si applica a | Elementi di lista. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.listStyleImage = 'url("image.jpg")'; |
Sintassi
Sintassi della proprietà CSS list-style-image
list-style-image: none | <url> | image-set() | initial | inherit;Esempio della proprietà list-style-image:
Esempio della proprietà CSS list-style-image con il valore none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: none;
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Risultato
![Proprietà CSS list-style-image](/uploads/media/default/0001/04/3253cd4b1e6f2bdbce6333da58573f6d8a9a0d53.png "CSS list-style-image none result" =420x)
Esempio della proprietà list-style-image con un URL sorgente dell'immagine:
Esempio della proprietà CSS list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Utilizzo della shorthand list-style
In pratica l'immagine viene solitamente impostata insieme al tipo di marcatore e alla posizione tramite la shorthand list-style. Le due regole seguenti sono equivalenti:
/* Longhand */
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url("arrow.png");
}
/* Shorthand — type, position, image in any order */
ul {
list-style: square inside url("arrow.png");
}Il valore square qui è il marcatore di fallback usato mentre l'immagine si carica o se non è disponibile. Consulta list-style-position per la differenza tra inside e outside.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
none | Nessuna immagine viene mostrata. Viene usato invece il marcatore definito da list-style-type. Questo è il valore predefinito. | Provalo » |
<url> | L'URL sorgente dell'immagine da usare come marcatore dell'elemento di lista, scritto come url("path/to/image.png"). | Provalo » |
image-set() | Un insieme di candidati immagine tra cui il browser sceglie in base all'ambiente di rendering, ad esempio la risoluzione dello schermo. Consente di fornire un'immagine più nitida agli schermi ad alta densità di pixel. | Provalo » |
initial | Reimposta la proprietà al suo valore predefinito (none). | Provalo » |
inherit | Eredita il valore dall'elemento padre. |
Supporto dei browser e accessibilità
list-style-image è supportata in ogni browser moderno (risale a CSS1). Due cose da tenere a mente:
- L'immagine è puramente decorativa — i lettori di schermo non la annunciano e non esiste un testo
alt. Non codificare un significato nel proiettile che non sia anche presente nel testo della lista. - Il colore del marcatore segue il
colordel testo perlist-style-type, ma un'immagine mantiene i propri colori. Se vuoi che il proiettile corrisponda al colore del testo, usa invece un approccio::markerobackground-image.