CSS 2.1: `list-style-image`

Erläuterungen

Die Eigenschaft list-style-image ist ein Teil der Kurzschrift- Eigenschaft list-style. Sie setzt eine Grafik als Markierung für Aufzählungslisten ein, die normalerweise anstelle des verwendeten Markers dargestellt wird.

Für den Fall, dass einmal die festgelegte Grafik nicht geladen werden kann, sollte man list-style-type nicht mit none besetzen. Dadurch wird vermieden, dass Listenpunkte ganz ohne Markierungen dargestellt werden.

Tipp:

Die Eigenschaft list-style-image wird im Allgemeinen für Listen OL oder UL definiert und dann an die Listenelemente weitervererbt. Möglich ist aber auch, die Listenbullets direkt für die Elemente li zu deklarieren. So lässt sich jedem Listenpunkt ein individuelles Image voranstellen.

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); }

Browserunterstützung

: Die Eigenschaft list-style-image wird von allen modernen Browsern ohne Einschränkung unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

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

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.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Absolute URI oder `none`	Ja	Auf Elemente, die als Punkt einer Liste dargestellt werden.	Nicht zutreffend	Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

Notizen: