CSS / list-style-image: immagini, dimensioni e marcatori alternativi

CSS list-style-image specifica un'immagine per il marcatore di un elemento della lista. È comunemente impostato su ul o ol e ereditato dai loro elementi li. Se non è disponibile nessuna immagine utilizzabile, viene invece utilizzato il marcatore list-style-type, quindi definisci anche un fallback appropriato.

Funzione e valori di list-style-image

Il valore iniziale è none, e la proprietà è ereditata. I marker appartengono agli elementi con display: list-item, come i normali elementi li. Impostarlo su ul di solito funziona perché gli elementi della lista ereditano il valore; questa proprietà non aggiunge un'immagine di sfondo a ul stesso.

Nella sintassi, url() è una funzione contenente un URL, non la parola nuda url. Il tipo di animazione è discreto, il che non significa che due immagini si trasformino dolcemente l'una nell'altra. MDN list-style-image riferimento

Un esempio completo da copiare

Salva il codice completo qui sotto come list-marker.html in UTF-8 e aprilo in un browser. Non sono necessarie librerie, server o file immagine separati. SVG, Scalable Vector Graphics, è un formato di immagine vettoriale; questo esempio incorpora un cerchio blu 16×16 in un URL di dati. Le parole in inglese sono elementi di confronto.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto dei marcatori con immagini</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>Confronto dei marcatori con immagini</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

Il risultato previsto è un marcatore a cerchio blu nelle prime due liste e marcatori a forma di quadrato nella terza. Solo il testo cresce fino a 32px nella seconda lista. Quando il secondo elemento lungo va a capo, confronta l'allineamento di un marcatore esterno con il suo testo. Dopo aver modificato il file, salva e ricarica.

Distinguere dimensioni dell’immagine e del testo

Questo SVG specifica esplicitamente larghezza e altezza come 16, dando al marcatore immagine dimensioni di 16×16 pixel CSS. Aumentare il testo da 20px a 32px non ingrandisce automaticamente questa immagine in proporzione. È anche inaccurato dire che ogni immagine marcatore utilizza sempre le sue dimensioni in pixel originali: la dimensione può variare quando un'immagine non ha dimensioni o proporzioni intrinseche.

list-style-image non ha parametri separati per la larghezza o l'altezza del marcatore. Prepara una piccola risorsa per il marcatore o assegna al file SVG dimensioni appropriate. Anche le proprietà supportate da ::marker sono limitate; impostare larghezza e altezza lì non permette di ridimensionare arbitrariamente l'immagine. Per dimensioni e spaziature precise, considera un design con immagine di sfondo separata o pseudo-elemento pur preservando la semantica della lista e le informazioni testuali effettive. MDN: proprietà supportate da ::marker

Rimuovere immagini e controllare la notazione abbreviata

Per rimuovere solo l'immagine, imposta list-style-image: none come segue. L'esempio mantiene list-style-type: square, quindi appaiono i marcatori quadrati. Confronta la modifica e ripristina la dichiarazione url() originale per riportare l'immagine. Il marcatore di riserva viene utilizzato anche quando il caricamento dell'immagine fallisce e non è disponibile un'immagine utilizzabile.

.image-list {
  list-style-image: none;
}

La notazione abbreviata list-style seguente reimposta anche il componente immagine omesso. Applicandolo successivamente è possibile quindi rimuovere un'immagine dichiarata in precedenza. Controlla se c'è una sovrascrittura mediante una notazione abbreviata successiva e utilizza proprietà individuali o includi l'immagine nella notazione abbreviata secondo la tua intenzione.

.image-list {
  list-style: square outside;
}

Verificare i marcatori che non compaiono

1. Controlla l'URL dell'immagine e la risposta. Un URL relativo in un foglio di stile esterno viene risolto relativamente a quel file CSS, non al file HTML. Un URL in un elemento style segue l'URL base del documento. Usa il pannello Rete negli strumenti di sviluppo per controllare le risposte 404 e i formati immagine non validi.
2. Ispeziona l’elemento li selezionato e i suoi valori calcolati list-style-image e display. Controlla se ci sono delle dichiarazioni abbreviate list-style o delle regole a priorità più alta che sovrascrivono il valore. Controlla anche se display è stato cambiato in qualcosa come flex, così che l'elemento non generi più un marcatore di lista.
3. Con il posizionamento esterno, un'indentazione insufficiente o l'impostazione overflow di un genitore può ritagliare il marcatore. Controlla padding e ritaglio della lista. Se una politica del sito blocca gli URL dei dati, sostituisci l'immagine di esempio con un URL immagine consentito.

Anche le liste annidate possono ereditare questa proprietà. Per rimuovere le immagini da una lista annidata, applica esplicitamente list-style-image: none a quella lista e imposta il suo list-style-type al valore desiderato.

Preservare significato e accessibilità della lista

Il cerchio blu qui è decorativo. Inserisci significati importanti come completamento, avvisi o valutazioni nel testo effettivo dell'elemento della lista, piuttosto che solo in un'immagine CSS. I marker CSS non forniscono un attributo alt come quello degli elementi img HTML, quindi non omettere informazioni assumendo che l'immagine verrà caricata o annunciata.

Dare a un ol lo stesso marcatore immagine sostituisce i suoi numeri visibili con immagini. Mantieni i numeri nativi quando i lettori hanno bisogno della numerazione dei passaggi. Conserva la struttura ul, ol e li, e verifica che gli elementi e la loro sequenza rimangano comprensibili senza immagini. Definizione W3C dei marcatori di lista immagine