CSS-Eigenschaft list-style-image

.probe {
  list-style-image: url(/graphics/css-bullet.gif);
}

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'list-style-image'
<uri> | none | inherit

<uri>

URI der Grafik.

none (Ausgangswert)

Es wird keine Grafik dargestellt, d.h. das Anwenderprogramm greift auf die voreingestellten Markierungen zurück.

inherit

Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

UL.list3 > LI:first-child {
 list-style-image: url(/graphics/x-8-8.gif); }

Wechselwirkungen

list-style, list-style-type, list-style-position

Der Rückfall auf das Markierungszeichen

Der Hinweis auf dieser Seite beschreibt eine Absicherung, die in der Gestaltung selten mitgedacht wird. Grafik und Zeichentyp schließen sich nicht aus: Sie werden beide angegeben, und die Grafik gewinnt, solange sie sich laden lässt. Fehlt sie, tritt der Zeichentyp an ihre Stelle.

Wird stattdessen list-style-type: none gesetzt, gibt es keinen Rückfall. Eine Liste ohne Marken sieht dann nicht nur anders aus, sie verliert ihre Gliederung: die Einträge stehen als eingerückte Absätze untereinander, und wo einer aufhört und der nächste beginnt, ist bei mehrzeiligen Einträgen nicht mehr zu erkennen.

Die Kurzschrift macht diesen Fehler leicht. Wer list-style: url(punkt.png) schreibt, setzt den Zeichentyp auf seinen Ausgangswert zurück, und das ist immerhin ein sichtbarer Punkt. Wer list-style: none url(punkt.png) schreibt, hat die Absicherung selbst abgeschaltet.

Warum eine Grafik als Marke selten die beste Wahl ist

Die Spezifikation sagt nichts über die Größe der Marke. Eine Grafik erscheint deshalb in ihrer eigenen Größe und wächst nicht mit der Schrift. Vergrößert der Leser den Text, bleibt die Marke, wie sie ist, und das Verhältnis kippt. Auf Bildschirmen mit hoher Punktdichte kommt hinzu, dass eine punktgenau gezeichnete Grafik unscharf wirkt.

Auch die senkrechte Ausrichtung liegt nicht in der Hand des Autors. Wo die Grafik zur ersten Zeile steht, entscheidet das Anwenderprogramm, und die Ergebnisse gehen auseinander. Genau deshalb hat sich lange der Umweg gehalten, die Marke abzuschalten und stattdessen ein Hintergrundbild am Listeneintrag zu setzen, dessen Lage sich genau bestimmen lässt.

Heute gibt es dafür bessere Werkzeuge. Der Zeichentyp nimmt inzwischen auch eine beliebige Zeichenkette an, sodass sich ein Sonderzeichen als Marke verwenden lässt, das mit der Schrift wächst und ihre Farbe annimmt. Und über das Pseudoelement für die Marke lässt sich diese unmittelbar gestalten.

Vererbung und verschachtelte Listen

Die Eigenschaft wird vererbt, und darauf beruht die übliche Schreibweise: die Angabe steht an der Liste und erreicht von dort jeden Eintrag. Der Hinweis auf dieser Seite nennt auch den anderen Weg, die Angabe unmittelbar am Eintrag, mit dem sich einzelnen Einträgen eigene Marken geben lassen.

Bei verschachtelten Listen wirkt die Vererbung über die Ebenen hinweg. Eine Grafik an der äußeren Liste erscheint auch an allen inneren, denn die innere Liste erbt sie über ihre Einträge. Wer für die zweite Ebene eine andere Marke will, muss sie dort ausdrücklich setzen; die übliche Abstufung von Punkt, Kreis und Quadrat, die Browser für den Zeichentyp mitbringen, gibt es für Grafiken nicht.

Besonderheiten im Medientyp handheld

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert

none

Berechneter Wert

Absolute URI oder none

Vererbung

Ja

Anwendbarkeit

Auf Elemente, die als Punkt einer Liste dargestellt werden.

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual