list-style Kurzform vs Einzeleigenschaften: type, position, image

Was die Kurzform tut

list-style: square inside setzt Typ und Position – und list-style-image auf none, weil es nicht genannt ist. Kurzformen setzen immer alle Teileigenschaften; was fehlt, bekommt den Ausgangswert. Die Reihenfolge der Werte ist frei, weil jeder Wert eindeutig zu einer Teileigenschaft gehört.

Einzeleigenschaft: gezielt ändern

Wer nur die Nummerierung wechseln will, ohne ein gesetztes Bild oder die Position anzutasten, schreibt list-style-type: upper-roman. Für ein Bild als Aufzählungszeichen ist list-style-image zuständig; fällt das Bild aus, greift der list-style-type als Ersatz – ein Grund, ihn trotzdem zu setzen.

list-style: none und Zugänglichkeit

Navigationen sind Listen ohne Aufzählungszeichen: list-style: none. In manchen Screenreadern verliert eine Liste damit ihre Ankündigung als Liste; role="list" am ul stellt sie wieder her. Wer die Zeichen nur anders gestalten will, benutzt seit 2020 ::marker für Farbe und Schrift des Aufzählungszeichens, ohne die Liste ihrer Semantik zu berauben.

Wo die Marke steht: inside und outside

Die Angabe zur Lage entscheidet, ob die Marke außerhalb der Listenbox hängt oder als erstes Element in die erste Zeile einrückt. Außen – der Ausgangswert – ergibt die vertraute Optik: Der Text aller Zeilen fluchtet, die Marke steht links davor. Innen zieht die Marke in den Textfluss, sodass die zweite Zeile eines langen Punktes unter der Marke beginnt und nicht unter dem Text.

Praktisch bedeutsam ist der Unterschied beim Hintergrund und beim Abschneiden. Eine außen stehende Marke liegt außerhalb der Box des Listenpunktes: Ein Hintergrund am Punkt reicht nicht bis unter sie, und ein Kasten mit abgeschnittenem Überlauf kappt sie. Genau deshalb verschwinden Aufzählungszeichen manchmal spurlos, sobald jemand der Liste einen Rahmen mit Innenabstand gibt oder sie in einen engen Kasten setzt. Die Abhilfe ist entweder die innen stehende Marke oder ein Innenabstand an der Liste, der der Marke Platz lässt – in CSS 2.1 ist ihre genaue Position ausdrücklich dem Browser überlassen, weshalb sich der nötige Abstand nicht exakt berechnen lässt.

Eigene Zähler statt der eingebauten Marke

Die eingebauten Markentypen decken das Übliche ab, lassen sich aber nicht gestalten und nicht ergänzen. Wer eine Nummerierung über mehrere Ebenen hinweg braucht – 1, 1.1, 1.2 –, oder ein Wort davorsetzen will, verzichtet auf die Marke und baut die Nummerierung selbst: ein Zähler wird an der Liste zurückgesetzt, an jedem Punkt erhöht und in einem Pseudoelement ausgegeben. Die drei dafür nötigen Eigenschaften stehen in CSS 2.1 im Kapitel über generierte Inhalte.

Der Preis ist derselbe wie beim Abschalten der Marke: Ein selbst gebauter Zähler ist ein Textinhalt in einem Pseudoelement, und ob eine Sprachausgabe ihn vorliest, hängt vom Programm ab. Für eine gestaltete Nummerierung, die vorgelesen werden muss, ist die verlässlichste Lösung deshalb nach wie vor die eingebaute – seit es ein eigenes Pseudoelement für die Marke gibt, lässt sie sich immerhin in Farbe, Schrift und Größe verändern, ohne den Zähler nachbauen zu müssen.

Wo die Eigenschaften überhaupt wirken

Alle drei Eigenschaften gelten für Elemente mit der Anzeigeart list-item, und alle drei werden vererbt. Beides zusammen ergibt die übliche Arbeitsweise: Notiert wird an der Liste, gewirkt wird an den Punkten. Das ist bequem und hat eine Nebenwirkung – der Wert erreicht auch verschachtelte Listen weiter unten, weshalb eine an der äußeren Liste abgeschaltete Marke in allen Unterlisten ebenfalls fehlt.

Wer für die zweite Ebene einen anderen Markentyp will, setzt ihn deshalb ausdrücklich an der inneren Liste; die Vorgabe des Browsers, die in verschachtelten Aufzählungen von Punkt über Kreis zu Quadrat wechselt, ist überschrieben, sobald irgendwo weiter oben ein eigener Wert steht. Umgekehrt kann eine Marke auch an einem Element erscheinen, das gar nicht in einer Liste steht: Die Anzeigeart genügt, das Elternelement spielt keine Rolle. Nur die Nummerierung braucht dann einen eigenen Zähler, weil ohne Liste nichts da ist, was ihn zurücksetzen würde.

Wann welches

• Alles auf einmal festlegen, Rest zurücksetzen: Kurzform.
• Nur einen Aspekt ändern, Rest behalten: Einzeleigenschaft.
• Zeichen gestalten statt entfernen: ::marker.

Kurz gesagt: Die Kurzform setzt alle drei Teileigenschaften, die Einzeleigenschaft genau eine. Für eine Navigation ohne Aufzählungszeichen genügt list-style: none am ul; für ein anderes Zeichen bei gleichem Bild und gleicher Position nur list-style-type.

Häufige Fragen