List Style Recipes

Listen sind ein grundlegender Bestandteil von HTML! Sie sind nützlich in Dingen wie Blogbeiträgen zum Auflisten von Schritten, Rezepten zum Auflisten von Zutaten oder Elementen in einem Navigationsmenü. Sie sind nicht nur eine Gelegenheit zum Stylen, sondern haben auch Auswirkungen auf die Barrierefreiheit. Zum Beispiel wird die Anzahl der Elemente in einer Liste von einem Screenreader angekündigt, um etwas Kontext zu der Liste zu geben.

Konzentrieren wir uns hier auf das Styling von Listen, hauptsächlich auf geordnete und ungeordnete Listen (mit Entschuldigungen dafür, dass wir unseren Freund, die Definitionsliste, vernachlässigen) und etwas ungewöhnliche Styling-Situationen.

Die Grundlagen

Bevor Sie etwas allzu Ausgefallenes tun, sollten Sie wissen, dass es recht wenige Einstellungen für list-style-type gibt, die Ihre Bedürfnisse sofort abdecken könnten.

Der Bruch in der Mitte

Geordnete Listen können bei jeder gewünschten Zahl starten.

Die verschachtelten Dezimalzahlen

Die umgekehrte Top-10-Liste

Ein einzelnes Attribut reversed erledigt die Aufgabe.

Bild-Aufzählungszeichen

Am besten verwendet man ein background-image auf einem Pseudo-Element. Man könnte denken, dass list-style-image der richtige Weg ist, aber es ist extrem begrenzt. Zum Beispiel kann man es nicht positionieren oder sogar skalieren.

Emoji-Aufzählungszeichen

Handverlesene „zufällige“ Reihenfolge

Das Attribut value weist einem Listenelement das entsprechende Aufzählungszeichen für diese Position zu.

Benutzerdefinierte Textzähler

Kann für die meiste Kontrolle mit Pseudo-Elementen durchgeführt werden, aber es gibt auch list-style-type: '-';

Innen vs. Außen

Mit list-style-position: outside; (dem Standardwert) passen die Dinge besser, aber die Listenzeichen werden außerhalb der Box gerendert, daher muss man vorsichtig sein, sie nicht abzuschneiden. Sie könnten vom Rand des Browserfensters abstehen, oder overflow: hidden; wird sie komplett ausblenden. Die letzten beiden Beispiele hier enthalten einen Trick, um die schönere Ausrichtung zu imitieren, während sie innerhalb des Elements gerendert werden.

Farbige Aufzählungszeichen

Drei Wege hier

1. ::marker (am neuesten und einfachsten)
2. Klassisches Pseudo-Element-Styling
3. background-image (dieses ist eine SVG-Daten-URL, sodass Sie die Farbe aus dem CSS manipulieren können)

Kolonisierte Liste

Die Anzahl der Spalten kann automatisch sein.

Farbige Kreis-Zahlen

Benutzerdefinierte wechselnde Listensymbole

Einzelne Elemente können mit list-style: symbols() und wiederverwendbare Sets mit @counter-style erstellt und dann verwendet werden. Beachten Sie, dass dies zum Zeitpunkt der Erstellung nur in Firefox unterstützt wird.