CSS / list-style-image: Bildmarker, Größe und Ersatzmarker

CSS list-style-image gibt ein Bild für die Markierung eines Listenelements an. Es wird üblicherweise auf ul oder ol gesetzt und von ihren li-Elementen geerbt. Wenn kein verwendbares Bild verfügbar ist, wird stattdessen die list-style-type-Markierung verwendet, daher definieren Sie auch einen geeigneten Fallback.

Funktion und Werte von list-style-image

Der Anfangswert ist none, und die Eigenschaft wird vererbt. Marker gehören zu Elementen mit display: list-item, wie etwa gewöhnliche li-Elemente. Das Setzen auf ul funktioniert normalerweise, da die Listenelemente den Wert erben; diese Eigenschaft fügt ul selbst kein Hintergrundbild hinzu.

In der Syntax ist url() eine Funktion, die eine URL enthält, nicht das bloße Wort url. Der Animationstyp ist diskret, was nicht bedeutet, dass zwei Bilder nahtlos ineinander übergehen. MDN list-style-image Referenz

Ein vollständiges Beispiel zum Kopieren

Speichern Sie den vollständigen Code unten als list-marker.html in UTF-8 und öffnen Sie ihn in einem Browser. Es sind weder eine Bibliothek noch ein Server oder eine separate Bilddatei nötig. SVG, Scalable Vector Graphics, ist ein Vektorbildformat; dieses Beispiel bettet einen 16×16 Pixel großen blauen Kreis in einer Data-URL ein. Die englischen Wörter sind Vergleichseinträge.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bildmarker für Listen vergleichen</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>Bildmarker für Listen vergleichen</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>

Das erwartete Ergebnis ist ein blauer Kreis-Marker in den ersten beiden Listen und quadratische Marker in der dritten. Nur der Text wächst in der zweiten Liste auf 32px. Wenn der lange zweite Punkt umgebrochen wird, vergleichen Sie die Ausrichtung eines äußeren Markers mit seinem Text. Nach der Bearbeitung der Datei speichern und neu laden.

Bildgröße und Schriftgröße getrennt behandeln

Dieses SVG gibt ausdrücklich Breite und Höhe als 16 an, wodurch der Bildmarker Abmessungen von 16×16 CSS-Pixeln erhält. Das Vergrößern des Textes von 20px auf 32px vergrößert dieses Bild nicht automatisch proportional. Es ist auch ungenau zu sagen, dass jedes Markersymbol immer seine ursprünglichen Pixelmaße verwendet: Die Größe kann abweichen, wenn ein Bild keine intrinsischen Dimensionen oder kein festes Verhältnis hat.

list-style-image besitzt keine eigenen Parameter für die Breite oder Höhe des Markers. Verwenden Sie ein kleines Markerbild oder legen Sie passende Abmessungen im SVG fest. Auch ::marker unterstützt nur bestimmte Eigenschaften; width und height ermöglichen dort keine beliebige Größenänderung des Bildes. Für genauere Größen und Abstände können Sie eine gesonderte Gestaltung mit Hintergrundbildern oder Pseudoelementen prüfen. Erhalten Sie dabei die Listensemantik und wichtige Informationen als tatsächlichen Text. MDN: Von ::marker unterstützte Eigenschaften

Bilder entfernen und Kurzschreibweisen prüfen

Um nur das Bild zu entfernen, setzen Sie list-style-image: none wie unten gezeigt. Das Beispiel behält list-style-type: square bei, sodass quadratische Markierungen erscheinen. Vergleichen Sie die Änderung und stellen Sie die ursprüngliche url()-Deklaration wieder her, um das Bild zurückzubringen. Der Fallback-Marker wird auch verwendet, wenn das Laden des Bildes fehlschlägt und kein verwendbares Bild verfügbar ist.

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

Die folgende list-style-Kurzschreibweise setzt auch die ausgelassene Bildkomponente zurück. Das spätere Anwenden kann daher ein zuvor deklariertes Bild entfernen. Überprüfen Sie, ob eine spätere Überschreibung durch eine Kurzschreibweise vorliegt, und verwenden Sie je nach Ihrer Absicht einzelne Eigenschaften oder fügen Sie das Bild in die Kurzschreibweise ein.

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

Fehlende Listenmarker untersuchen

1. Überprüfen Sie die Bild-URL und die Antwort. Eine relative URL in einem externen Stylesheet wird relativ zu dieser CSS-Datei aufgelöst, nicht zur HTML-Datei. Eine URL in einem Style-Element folgt der Basis-URL des Dokuments. Verwenden Sie das Netzwerk-Panel in den Entwicklertools, um 404-Antworten und ungültige Bildformate zu überprüfen.
2. Untersuchen Sie das berechnete list-style-image und display des ausgewählten li-Elements. Prüfen Sie auf eine List-Style-Kurzschreibweise oder eine höher priorisierte Regel, die den Wert überschreibt. Überprüfen Sie auch, ob display auf etwas wie flex geändert wurde, sodass das Element keinen Listeneintrag-Marker mehr erzeugt.
3. Bei der Positionierung outside können unzureichende Einrückung oder die Overflow-Einstellung eines übergeordneten Elements den Marker abschneiden. Überprüfen Sie List-Padding und das Abschneiden. Wenn eine Website-Richtlinie Daten-URLs blockiert, ersetzen Sie das Beispielbild durch eine erlaubte Bild-URL.

Verschachtelte Listen können diese Eigenschaft ebenfalls übernehmen. Um Bilder aus einer verschachtelten Liste zu entfernen, wenden Sie list-style-image: none explizit auf diese Liste an und setzen Sie ihren list-style-type auf den gewünschten Wert.

Bedeutung und Zugänglichkeit der Liste erhalten

Der blaue Kreis hier ist dekorativ. Wichtige Bedeutungen wie Abschluss, Warnungen oder Bewertungen sollten im eigentlichen Listenelementtext angegeben werden, nicht nur in einem CSS-Bild. CSS-Markierungen bieten kein HTML-img-Alt-Attribut, daher sollten Informationen nicht weggelassen werden in der Annahme, dass das Bild geladen oder angekündigt wird.

Die Vergabe desselben Bildmarkers für ein ol ersetzt dessen sichtbare Zahlen durch Bilder. Behalten Sie die nativen Zahlen bei, wenn die Leser Schrittnummerierungen benötigen. Bewahren Sie die Struktur von ul, ol und li und prüfen Sie, dass die Elemente und ihre Reihenfolge auch ohne Bilder verständlich bleiben. W3C Definition von Bildlistenmarkierungen