CSS-Eigenschaft list-style

Erlaubte Werte

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

'list-style'
[ <list-style-type> || <list-style-position> || <list-style-image> ] | inherit

<list-style-type>

Art des Zählers oder Markierungszeichens vor Aufzählungslisten.

<list-style-position>

Einrückung des Zählers oder Markierungszeichens.

<list-style-image>

Grafik, die ein Markierungszeichen ersetzt.

inherit

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

Code-Beispiel

Im folgenden Beispiel werden Kleinbuchstaben dargestellt, falls die Graphik einmal nicht verfügbar sein sollte. Beides wird links nach außerhalb des Blockes geschoben.

OL.la { list-style: lower-alpha
                    outside
                    url(/graphics/x-8-8.gif); }

Mit der folgenden Deklaration geben wir sowohl list-style-type als auch list-style-image den Wert none.

OL.la { list-style: none; }

Wechselwirkungen

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

Was die Kurzschrift mitnimmt

Die Kurzschrift setzt alle drei Bestandteile, auch die nicht genannten, und zwar auf ihre Ausgangswerte: Punkt als Zeichentyp, außerhalb als Lage, keine Grafik. Der Hinweis auf der Seite zur Lage der Marke sagt das allgemein; hier hat es eine besonders verbreitete Folge.

list-style: none entfernt nicht nur das Zeichen. Es setzt auch die Lage auf den Ausgangswert zurück und löscht eine zuvor gesetzte Grafik. Steht in einem Stylesheet zuerst eine sorgfältig eingestellte Liste und danach irgendwo diese eine Deklaration, ist von der Einstellung nichts übrig.

Die Reihenfolge im Stylesheet entscheidet deshalb. Eine Kurzschrift gehört an den Anfang eines Regelblocks, die Feinheiten danach. Umgekehrt gelesen: wer eine einzelne Eigenschaft setzt und sie später nicht wiederfindet, sucht zuerst nach einer Kurzschrift, die danach kommt.

Die Werte in beliebiger Reihenfolge

Der doppelte Balken in der Wertesyntax erlaubt alle drei Bestandteile in beliebiger Anordnung und jeden davon auch einzeln. Das funktioniert, weil sich die drei Werttypen voneinander unterscheiden lassen: eine Pfadangabe ist als solche erkennbar, und die beiden Schlüsselwortmengen für Zeichentyp und Lage überschneiden sich nicht.

list-style: square inside und list-style: inside square bedeuten daher dasselbe. Das ist keine Selbstverständlichkeit: Kurzschriften, deren Bestandteile denselben Werttyp tragen, müssen sich an eine feste Stellung halten, weil sonst nicht zu entscheiden wäre, was gemeint ist.

Ein Wert kann allerdings mehrdeutig aussehen: none ist sowohl für den Zeichentyp als auch für die Grafik ein gültiger Wert. Steht es allein, gilt es für beide, und genau das führt zu der verschwundenen Absicherung, die auf der Seite zur Listengrafik beschrieben ist.

Marken abschalten und die Folge für die Ausgabe

Listen ohne sichtbare Marken sind in Oberflächen die Regel: Navigationen, Kartenreihen und Menüs sind ausgezeichnete Listen, sollen aber nicht wie Listen aussehen. Der übliche Weg dorthin ist diese Kurzschrift mit dem Wert none.

In manchen Darstellungsmaschinen hat das eine Nebenwirkung, die man nicht sieht: eine Liste ohne Marken wird der Sprachausgabe nicht mehr als Liste gemeldet. Die Ansage, wie viele Einträge folgen und der wievielte gerade gelesen wird, entfällt damit, und die Navigation von Eintrag zu Eintrag ebenfalls.

Der Ausweg besteht darin, die Rolle des Elements im Dokument ausdrücklich anzugeben, sodass sie unabhängig von der Gestaltung erhalten bleibt. Wichtig ist vor allem, den Zusammenhang zu kennen: eine Entscheidung über das Aussehen kann hier eine Entscheidung über die Struktur nach sich ziehen.

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

Siehe bei den individuellen Eigenschaften

Berechneter Wert

Siehe bei den individuellen Eigenschaften

Vererbung

Ja

Anwendbarkeit

Auf Elemente, die als Punkt einer Liste dargestellt werden.

%-Bezugswert

Nicht zutreffend

Mediengruppe(n)

Visual

Ausblick

Im geplanten Modul Lists ist mit der Einführung einer Reihe von neuen list-style-types zu rechnen, insbesondere die grafischen Schriften des mittleren und fernen Ostens werden nach dem Willen des W3C Eingang in die Codierung finden. Ebenso wird die Nutzung von Listenmarkierungen genauer beschrieben und vereinfacht werden.