CSS 2.1: `list-style-type`

Erläuterungen

Die Eigenschaft list-style-type ist ein Teil der Kurzschrift- Eigenschaft list-style. Sie bestimmt den Typ der Markierungen vor Aufzählungslisten. Es gibt per Definition drei verschiedene Typen: Zeichen, numerische und alphanumerische Markierungen.

Viele Einzelheiten über die Darstellung der Zeichen sind dem Anwenderprogramm überlassen, z. B. Größe der Zeichen, ihre Ausrichtung oder die Füllung des Quadrats beim Wert square. Wer volle Kontrolle über die Listenmarkierungen anstrebt oder andere als die spezifizierten Zeichen verwenden will, kann mit Hilfe von list-style-image selbsterstellte Grafiken als Markierungen verwenden.

Für numerische Systeme gilt: Anwenderprogramme, die ein numerisches System (z. B. upper-latin oder armenian) nicht darstellen können, sollten auf decimal ausweichen.

Tipp:

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

Alphanumerische Markierungen mit lateinischen Schriftzeichen sind lt. Spezifikation nach dem Ende des Alphabets nicht mehr definiert und es ist vom Anwenderprogramm abhängig, wie die weiteren Punkte ausgegeben werden. Praktisch reagieren aber alle modernen Browser in diesem Fall gleich: auf den Listenpunkt 'Z.' folgen die Punkte 'AA.', 'AB.', 'AC.', auf 'ZZ.' folgt 'AAA.' usw. Siehe dazu auch dieses Beispiel alphanumerisch geordneter Listen.

Analog zu diesem Schema sollten auch Zähler aus griechischen, armenischen, georgianischen oder anderen Schriftzeichen dargestellt werden. Wenn Sie wissen wollen, wozu Ihr Browser imstande ist, sehen Sie sich diese Beispielseite mit allen Listenzeichen nach CSS 2.1 an.

Die Spezifikation macht keine Angaben darüber, ob eine Liste weiter eingerückt werden soll, wenn die Markierungen mehr Platz benötigen. In der Praxis halten alle modernen Browser stets denselben Abstand nach links ein. Zähler, die zuviel Platz beanspruchen, werden dann nach links über den Elementrand hinausgeschoben. Siehe dazu dieses Beispiel mit römischen Ziffern.

Auch die horizontale Ausrichtung der Listenmarkierungen ist in allen modernen Browsern gleich: rechtsbündig, sodass die Punkte immer vertikal untereinander erscheinen.

Erlaubte Werte

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

disc (Ausgangswert): Gefüllter Kreis.
circle: Nicht gefüllter Kreis.
square: Quadrat, gefüllt oder nicht gefüllt.
decimal: Dezimalzahl.
decimal-leading-zero: Dezimalzahl mit führender Null.
lower-roman: Römische Ziffern in Kleinbuchstaben.
upper-roman: Römische Ziffern in Großbuchstaben.
lower-latin: Lateinisches Alphabet in Kleinbuchstaben.
upper-latin: Lateinisches Alphabet in Großbuchstaben.
lower-greek: Griechisches Alphabet Kleinbuchstaben.
armenian: Traditionelle Armenische Schreibweise.
georgian: Traditionelle Georgische Schreibweise.
none: Dieser Wert unterdrückt nur die Darstellung der Markierung. Die Zählung wird davon unabhängig dennoch fortgesetzt.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Die folgenden Werte sind Bestandteil von CSS 2, wurden aber in CSS 2.1 nicht mit aufgenommen. Sie sind erst für CSS 3 wieder vorgesehen.

upper-alpha: Lateinisches Alphabet in Großbuchstaben.
lower-alpha: Lateinisches Alphabet in Kleinbuchstaben.
hebrew: Traditionelle Hebräische Nummern.
cjk-ideografic: Ideografische Nummern (chinese/japanese/korean).
hiragana: Japanisches Silbenschriftsystem, bevorzugte Schreibweise.
katakana: Japanisches Silbenschriftsystem, verwendet für Namen und Begriffe, die aus anderen Sprachen in das Japanische übernommen wurden.
hiragana-iroha: Besondere Form des Hiragana-Systems.
katakana-iroha: Besondere Form des Katakana-Systems.

Code-Beispiel:

OL { list-style-type: decimal; } OL > LI > OL { list-style-type: lower-alpha; }

Browserunterstützung

Die Eigenschaft list-style-type wird von den meisten modernen Browsern unterstützt, mit folgenden Einschränkungen:

Firefox 1.5: Die Gecko-Browser der neuesten Version erkennen alle Werte aus CSS 2.1, zusätzlich: upper-alpha, lower-alpha, hebrew.
IE/Win 7: IE/Win kann nur Ziffern und die Zeichen des lateinischen Alphabets verwenden, auch decimal-leading-zero wird nicht erkannt. Für alle nicht erkannten Typen wird das dezimale Äquivalent eingesetzt.
Opera 8.5+: Dieser Browser erkennt ab Version 8.5 dieselben Listenpunkte wie die Gecko-Engine mit Ausnahme des Wertes hebrew.
Safari 1.3: Safari bis zur Version 1.3 stellt dezimale Listentypen nur ohne führende Null dar, kennt also nicht den Wert decimal-leading-zero.
Konqueror 3.5: Ebenso wie die Gecko-Engine erkennt der KDE-Browser alle Listentypen mit Ausnahme der fernöstlichen.

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-position, list-style-image

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. Für Mobilgeräte sind jedoch nur folgende Werte zugelassen: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none und inherit.

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):
`disc`	Spezifizierter Wert	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.

TOP

Notizen: