[an error occurred while processing this directive][an error occurred while processing this directive] [an error occurred while processing this directive] Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : LIST-STYLE-TYPE } [an error occurred while processing this directive]
[an error occurred while processing this directive][an error occurred while processing this directive]

Welche Entwicklungen gibt es im Bereich CSS und auf dem Büchermarkt? Die Autoren einiger beliebter CSS-Bücher haben sich bereit erklärt, die Entwicklung am Markt aus ihrer Sicht kurz darzustellen, hier auf der Buchseite.

CSS 2.1 ::Referenz ::Eigenschaften

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):

'list-style-type' disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-latin | upper-latin | lower-greek | armenian | georgian | none | inherit

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


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: www.thestyleworks.de/ref/list-style-type.shtml
Gedruckt am [an error occurred while processing this directive] Sonntag, dem 14. [an error occurred while processing this directive] Januar, 2017.
© Copyright All Contents 2002- 2017 K. Langenberg.
Commercial Use prohibited.


Notizen: