CSS-Listen, Markierungen und Zähler

Listen in CSS haben bestimmte Eigenschaften, die uns den Standard-Listenstil geben, den wir erwarten. Eine ungeordnete Liste erhält einen Aufzählungspunkt vom Typ disc , und geordnete Listen werden nummeriert. Mein Interesse, Listen detaillierter zu untersuchen, kam von einigen Arbeiten, die ich zur Dokumentation des Pseudo-Elements ::marker für MDN gemacht habe. Dieses Pseudo-Element wird in Firefox 68 ausgeliefert und wird heute veröffentlicht . Mit dem uns zur Verfügung stehenden ::marker können wir beginnen, einige interessante Dinge mit Listen zu tun, und in diesem Artikel werde ich mehr erklären.

Dekonstruieren einer Liste

Sie haben vielleicht nicht viel über Listen nachgedacht, obwohl wir sie häufig in unserem Markup verwenden. Viele Dinge lassen sich ganz logisch als Liste auszeichnen. Während Schritt-für-Schritt-Anleitungen oder geordnete Elemente natürlich durch eine geordnete Liste <ol> beschrieben werden können, können viele Dinge in einem Design mit einer ungeordneten Liste <ul> beschrieben werden. Eine sehr häufige Verwendung des Elements ist beispielsweise das Markieren der Navigation, da es sich um eine Liste von Zielen auf der Website handelt. Beginnen wir für unsere Untersuchung damit, genau herauszufinden, was eine Liste in CSS ist.

Wie bei vielen Dingen in CSS werden Listen einige Anfangswerte zugewiesen. Diese Werte lassen sie wie eine Liste aussehen. Diese speziellen Werte beginnen mit der Information, dass ein Listenelement die Eigenschaft display mit dem Wert list-item hat. Dadurch wird ein Feld auf Blockebene mit einem zusätzlichen Markierungsfeld erstellt. Im Markierungsfeld wird das Aufzählungszeichen oder die Nummer hinzugefügt.

Listen wurden schon früh in CSS definiert, und ein Großteil der Definition von Listen, wie wir sie heute verwenden, stammt von CSS2. Die CSS2-Spezifikation beschreibt ein Listenelement wie folgt:

„Ein Element mit display: list-item erzeugt eine Hauptblockbox für den Inhalt des Elements und, abhängig von den Werten von list-style-type und list-style-image , möglicherweise auch eine Markierungsbox als visuelle Anzeige, dass das Element ist ein Listenelement.“

Die Hauptblockbox ist die Hauptbox des Elements und enthält alle untergeordneten Elemente, da ein Listenelement andere Markups enthalten kann. Die Markierungsbox wird dann in Bezug auf diese Hauptbox platziert. Die Spezifikation geht weiter auf die Tatsache ein, dass jede Hintergrundfarbe nur hinter diesem Hauptkästchen und nicht der Markierung sein wird. Außerdem kann der Marker auf einen von mehreren vordefinierten Werten gesetzt werden:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none
• inherit

Die Anzeigespezifikation der Ebene 3 definiert display: list-item zusammen mit den anderen möglichen Werten für die display . Es bezieht sich auf CSS 2.1 – ebenso wie viele CSS-Eigenschaften und -Werte, die aus CSS2 stammen –, beschreibt das list-item Schlüsselwort jedoch als „das Element dazu veranlasst, ein ::marker -Pseudoelement zu generieren“.

Die Level-3-Spezifikation führt auch die Möglichkeit ein, ein Inline-Listenelement mit der Syntax mit zwei Werten zu erstellen, die verwendet wird display: inline list-item . Dies wird von Browsern noch nicht implementiert.

Erstellen von Markierungsfeldern für Nicht-Listenelemente

Wie bei anderen Werten von display ist es absolut zulässig, jedem HTML-Element den Anzeigetyp list-item zu geben (falls Sie ein ::marker für das Element generieren möchten). Dadurch wird das Element nicht semantisch zu einem Listenelement, sondern wird stattdessen nur visuell als Listenelement angezeigt und kann daher einen ::marker haben. Wenn wir unten das Pseudo-Element ::marker besprechen, werden Sie einige Fälle entdecken, in denen es nützlich sein kann, anderen Elementen display: list-item zu geben.

Die Level-3-Spezifikation der CSS-Listen: ::marker And Counters

Die display -Spezifikation erweitert und verdeutlicht die Definition von Listen, die wir in CSS2 finden, jedoch gibt es auch eine Spezifikation, die das Verhalten von Listen detailliert definiert: die CSS Lists Specification Level 3. Da das grundlegende Verhalten von Listenelementen in display definiert ist, ist dies Die Spezifikation beschreibt das Markierungsfeld, das generiert wird, wenn etwas display: list-item hat, zusammen mit den Zählern, die standardmäßig verwendet werden, wenn Sie eine geordnete Liste erstellen. Es gibt einige potenziell nützliche Funktionen, auf die über diese Funktionen zugegriffen werden kann.

Das ::marker Pseudo-Element

Mit dem ::marker können Sie auf die Listenmarkierung abzielen – getrennt vom Inhalt des Listenelements. Dies war in früheren CSS-Versionen nicht möglich. Wenn Sie also die Farbe oder Schriftgröße von ul oder li ändern, würde dies auch die Farbe und Schriftgröße der Markierungen ändern. Um etwas so scheinbar Einfaches zu tun, wie Listenaufzählungszeichen in einer anderen Farbe als Text zu haben, müsste entweder der Inhalt des Listenelements in eine Spanne eingeschlossen werden (oder ein Bild für die Markierung verwendet werden).

 ul { color: #00b7a8; } ul span { color #333; }

Mit dem ::marker ist es am einfachsten, eine andere Aufzählungszeichen- als Textfarbe zu verwenden, was bedeutet, dass Sie anstelle des Codes im obigen Beispiel Folgendes verwenden können:

 ul { color: #333; } ul ::marker { color: #00b7a8; }

Möglicherweise möchten Sie auch eine andere Größe und font-family für die Nummerierung in einer geordneten Liste verwenden.

 ol ::marker { font-size: 200%; color: #00b7a8; font-family: "Comic Sans MS", cursive, sans-serif; }

Sie können all dies in einem unterstützenden Browser sehen, indem Sie mein CodePen-Beispiel verwenden:

Sie könnten das ::marker für Nicht-Listenelemente verwenden. Im folgenden Code habe ich eine display: list-item . Dies gibt ihm eine Kugel und daher ein ::marker -Feld zum Zielen.

Ich habe das Aufzählungszeichen geändert, um ein Emoji zu verwenden:

 h1 { display: list-item; } h1::marker { content: ""; } 

Im obigen Beispiel habe ich generierte Inhalte in den Regeln für die Markierung verwendet. Nur ein kleiner Teil der CSS-Eigenschaften ist für ::marker verfügbar. Dazu gehören Schrifteigenschaften und Farbe, aber auch die content , um generierte Inhalte einzubinden.

Das Hinzufügen von content als zulässige Eigenschaft für ::marker ist neu, ist jedoch in der Firefox-Implementierung enthalten. Die Einbeziehung bedeutet, dass Sie beispielsweise eine Textzeichenfolge in einen ::marker können. Es eröffnet auch zusätzliche Möglichkeiten zur Formatierung von Markern, wenn Sie die Verwendung von Zählern mit ::marker kombinieren.

Browserunterstützung und Fallbacks

Für Browser, die das Pseudo-Element ::marker nicht unterstützen, ist der Fallback der reguläre Marker, der sowieso angezeigt worden wäre. Leider können wir derzeit keine Feature-Abfragen verwenden, um die Unterstützung für Selektoren wie dieses Pseudo-Element zu erkennen, obwohl ein Problem bezüglich des Hinzufügens zur Spezifikation aufgetreten ist. Dies bedeutet, dass Sie Ihren Code nicht forken können, um eine Sache zu tun, wenn Sie Unterstützung haben, und etwas anderes, wenn Sie dies nicht tun. In den meisten Fällen ist der Rückgriff auf den regulären Marker eine vernünftige Lösung.

Zähler

Geordnete Listen haben eine Listennummerierung – etwas, das durch einen CSS-Zähler erreicht wird. Die CSS-Listen-Spezifikation beschreibt daher auch diese Zähler. Wir können selbst auf Zähler zugreifen und diese erstellen, die uns in Kombination mit dem ::marker einige nützliche Funktionen bieten können. Diese Zähler können auch in normal (nicht ::marker ) generierten Inhalten verwendet werden.

Wenn ich eine nummerierte Liste von Schritten habe (und ich möchte „Schritt 1“, „Schritt 2“ usw. aufschreiben), kann ich dies tun, indem ich generierten Inhalt in meiner Markierung verwende und den list-item , dies stellt den eingebauten Zähler dar:

 ::marker { content: "Step " counter(list-item) ": "; } 

Verschachtelte Zähler

Wenn Sie verschachtelte Listen haben, ist eine übliche Art, sie zu nummerieren, das Element der obersten Ebene eine ganze Zahl (1), dann untergeordnete Elemente als (1.1, 1.2) und ihre untergeordneten Elemente (1.1.1, 1.1.2) zu haben. und so weiter. Sie können dies erreichen, indem Sie mehr Funktionalität von Zählern verwenden.

Wenn Sie HTML-Listen verschachteln, erhalten Sie am Ende mehrere Zähler mit demselben Namen – die ineinander verschachtelt sind. Auf die Verschachtelung von Zählern kann mit der Funktion counters() zugegriffen werden.

Im folgenden Code verwende ich counters() , um meine Listenmarkierungen wie oben beschrieben zu formatieren. Das erste Argument für counters() ist der Name des zu verwendenden Zählers. Ich verwende den integrierten list-item . Das zweite Argument ist eine Zeichenfolge – dies wird zwischen den Ausgabezählern verkettet (ich verwende ein . ). Schließlich füge ich ein : außerhalb der Zählerfunktion, aber innerhalb des content hinzu, sodass meine Zählerausgabe durch einen Doppelpunkt vom Inhalt getrennt wird.

 ::marker { content: counters(list-item,'.') ':'; color: #00b7a8; font-weight: bold; }

Dies gibt mir die Ausgabe wie im Bild. Wenn Sie einen Browser verwenden, der ::marker und Zähler unterstützt, können Sie im CodePen-Beispiel sehen, wie es funktioniert – versuchen Sie, die Zeichenfolge von einer . zu etwas anderem, um zu sehen, wie das die Ausgabe ändert.

Was ist der Unterschied zwischen counter() und counters() ?

Die Funktion counter() , die wir im ersten Beispiel zum Ausgeben unserer Schritte verwendet haben, verwendet nur den innersten Zähler. Wenn Sie also eine Reihe verschachtelter Listen haben, schreiben Sie den Zähler aus, der sich auf die Ebene bezieht, auf der Sie sich gerade befinden.

Die Funktion counters() schreibt im Wesentlichen den gesamten Zweig aus und gibt Ihnen die Möglichkeit, eine Zeichenfolge zwischen Zählern im Zweig zu verketten. Wenn Sie also ein Listenelement mit einem Zähler von 2 haben (das Teil einer Liste ist, die in einem Listenelement mit einem Zähler von 4 verschachtelt ist), enthält der Zweig Folgendes:

• 4
• 2

Sie können dies als 4.2 im Marker ausgeben, indem Sie Folgendes verwenden:

 ::marker { content: counters(list-item,'.'); }

Zähler auf anderen Elementen

Zähler können für Dinge verwendet werden, die keine Listen sind – entweder um einen Marker auszugeben – in diesem Fall muss das Element display: list-item haben – oder um regelmäßig generierte Inhalte auszugeben. Zähler werden häufig in der Buchproduktion verwendet, um Kapitel- und Abbildungsnummerierung und andere Dinge zu ermöglichen. Es gibt keinen Grund, im Web nicht ähnlich vorzugehen, insbesondere bei längeren Artikeln.

Die in der CSS-Listenspezifikation definierten CSS-Eigenschaften, die sich mit diesen Zählern befassen, sind:

• counter-set
• counter-reset
• counter-increment

Um zu sehen, wie diese außerhalb von Listen funktionieren, sehen wir uns ein Beispiel für die Verwendung von Zählern zum Nummerieren der Überschriften in einem Dokument an.

Das erste, was ich tun muss, ist, einen Zähler für Header auf dem body-Element zu erstellen – fertig zur Verwendung. Ich verwende dazu die counter-reset Eigenschaft. Die Eigenschaften counter-reset und counter-set sind sehr ähnlich. Die Eigenschaft „ counter-reset “ erstellt einen neuen Zähler, wenn noch kein Zähler mit dem angegebenen Namen vorhanden ist, erstellt aber auch verschachtelte Zähler wie oben beschrieben, wenn ein Zähler mit diesem Namen vorhanden ist. Die counter-set Eigenschaft erstellt nur dann einen neuen Counter, wenn es keinen Counter mit diesem Namen gibt. Dafür würde die Verwendung einer der beiden Eigenschaften gut funktionieren, aber counter-set hat keine so gute Browserunterstützung wie counter-reset , also nehme ich den praktischen Weg:

 body { counter-reset: heading-counter; }

Da ich nun einen Zähler habe, kann ich die counter-increment Eigenschaft des Selektors für die Header verwenden; Dies sollte den Zähler jedes Mal erhöhen, wenn der Selektor übereinstimmt.

 h2 { counter-increment: heading-counter; }

Um den Wert zu sehen, muss ich ihn in das Dokument ausgeben. Ich kann dies tun, indem ich Generated Content verwende und ihn before der Überschrift einfüge, wie im folgenden CodePen-Beispiel gezeigt:

 h2::before { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

Alternativ könnte ich das h2 list-item machen und dann ::marker , wie unten gezeigt. Wie bereits ausgeführt, hat die Verwendung des ::marker Elements eine eingeschränkte Browserunterstützung. In Firefox sollten Sie den Zähler sehen, der als Markierung für die Überschrift verwendet wird, während andere Browser das Standard-Aufzählungszeichen anzeigen.

 h2 { display: list-item; } h2::marker { content: counter(heading-counter) ": "; color: #00b7a8; font-weight: bold; } 

Zähler auf Formularelementen

Es gibt auch ein wenig Interaktivität, die Sie mit CSS-Zählern erreichen können – etwas, von dem Sie vielleicht denken, dass Sie JavaScript brauchen.

Ich habe ein Formular mit mehreren Pflichtfeldern. Der erforderliche Status kann in CSS mit einer Pseudoklasse :required ausgewählt werden, und die Nichtbefüllung eines Feldes kann über die Pseudoklasse :invalid erkannt werden. Das bedeutet, dass wir nach Feldern suchen können, die sowohl erforderlich als auch ungültig sind, und einen Zähler erhöhen können. Geben Sie das dann als generierten Inhalt aus.

Wie nützlich dies in Wirklichkeit ist, ist umstritten – da wir mit diesem Wert wirklich nichts anderes anfangen können, als ihn in generierte Inhalte zu stecken. Es gibt auch Bedenken, dass generierte Inhalte für bestimmte Screenreader nicht zugänglich sind, daher müsste jede Verwendung, die mehr als nur dekorativ ist, andere Möglichkeiten des Zugriffs auf diese Informationen gewährleisten. Lesen Sie „Accessibility Support For CSS Generated Content“ und die neueren Informationen „CSS Content Property Screen Reader Compatibility“ für weitere Details zur Barrierefreiheit und zu generierten Inhalten.

Es zeigt jedoch, dass Zähler nützlichere Dinge leisten können, als nur Listen zu nummerieren. Es kann sein, dass dieses Wissen eines Tages nützlich ist, um ein Problem zu lösen, an dem Sie arbeiten.

Finde mehr heraus

Dieser Artikel ist ziemlich weit weg von Stillisten, obwohl alles, was ich beschrieben habe, in der CSS-Listenspezifikation zu finden ist. Weitere Informationen zu den in den folgenden Links beschriebenen Dingen finden Sie. Wenn Sie eine interessante Verwendung für CSS-Zähler gefunden haben oder sich Dinge vorstellen können, für die Sie ::marker verwenden könnten, fügen Sie eine Notiz in den Kommentaren hinzu.

• ::marker
• counter-set
• counter-reset
• counter-increment
• „Using CSS Counters“, MDN-Webdokumentation
• „Zählen mit CSS-Zählern und CSS-Grid“, CSS-Tricks