Hier sind einige nützliche und kreative Möglichkeiten, eine Liste zu gestalten.
Was fällt Ihnen ein, wenn Sie an eine Liste denken? Das naheliegendste Beispiel ist eine Einkaufsliste – die einfachste Liste, eine Sammlung von Artikeln in keiner bestimmten Reihenfolge. Aber wir verwenden Listen im Web auf ganz unterschiedliche Weise. Eine Sammlung anstehender Konzerte an einem Veranstaltungsort? Sehr wahrscheinlich eine Liste. Ein mehrstufiger Buchungsvorgang? Sehr wahrscheinlich eine Liste. Eine Galerie mit Bildern? Selbst das könnte als eine Liste von Bildern mit Bildunterschriften betrachtet werden.
In diesem Artikel werden die verschiedenen HTML-Listentypen, die uns im Web zur Verfügung stehen, und ihre Verwendung sowie einige Attribute erläutert, mit denen Sie möglicherweise noch nicht vertraut sind. Außerdem werfen wir einen Blick auf einige nützliche und kreative Möglichkeiten, wie diese mit CSS gestaltet werden können.
Wann sollte eine Liste verwendet werden?
Ein HTML-Listenelement sollte verwendet werden, wenn Elemente semantisch gruppiert werden müssen. Hilfstechnologien (z. B. Screenreader) informieren den Nutzer über eine Liste und die Anzahl der Elemente. Wenn Sie beispielsweise an ein Raster von Produkten auf einer Shopping-Website denken, wäre es sehr hilfreich, diese Informationen zu kennen. Daher kann die Verwendung eines Listenelements eine gute Wahl sein.
Typen auflisten
Im Hinblick auf die Auszeichnung stehen uns drei verschiedene Listenelemente zur Verfügung:
- Unsortierte Liste
- Sortierte Liste
- Beschreibungsliste
Für welche Option Sie sich entscheiden, hängt vom Anwendungsfall ab.
Unsortierte Liste (ul)
Das unsortierte Listenelement (<ul>) ist am nützlichsten, wenn die Elemente in der Liste keiner bestimmten Reihenfolge entsprechen. Standardmäßig wird dies als Aufzählungsliste angezeigt. Ein Beispiel hierfür ist eine Einkaufsliste, bei der die Reihenfolge keine Rolle spielt.
Ein gängiges Beispiel im Web ist das Navigationsmenü. Beim Erstellen eines Menüs empfiehlt es sich, das ul-Element in ein nav-Element einzubinden und das Menü mit einem Label zu kennzeichnen, um Hilfstechnologien zu unterstützen. Außerdem sollten wir die aktuelle Seite im Menü angeben. Dazu verwenden wir das Attribut aria-current:
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
In diesem Artikel zur Menüstruktur finden Sie einige Empfehlungen, wie Sie dafür sorgen können, dass unsere Navigationsmenüs für alle zugänglich sind.
Sortierte Liste (ol)
Ein geordnetes Listenelement (<ol>) ist die beste Wahl, wenn die Reihenfolge der Elemente von Bedeutung ist, z. B. bei einem mehrstufigen Prozess. Standardmäßig sind die Listenelemente nummeriert. Ein Beispiel hierfür sind eine Reihe von Anweisungen, in denen die Schritte der Reihe nach ausgeführt werden müssen.
Die <ol>- und <ul>-Elemente dürfen nur <li>-Elemente als direkte untergeordnete Elemente enthalten.
Beschreibungsliste (dl)
Eine Beschreibungsliste enthält Begriffe (<dt>-Elemente) und Beschreibungen (<dd>). Jeder Begriff kann von mehr als einer Beschreibung begleitet werden. Mögliche Anwendungsfälle sind beispielsweise ein Glossar mit Begriffen oder vielleicht eine Speisekarte. Beschreibungslisten werden standardmäßig nicht mit Markierungen angezeigt, obwohl Browser das <dd>-Element tendenziell einrücken.
In HTML ist es zulässig, Begriffe mit der zugehörigen Beschreibung mithilfe eines <div> zu gruppieren. Wie wir später sehen werden, kann dies bei der Gestaltung nützlich sein.
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
Einfache Gestaltung von Listen
Eine der einfachsten Verwendungen einer Liste ist innerhalb eines Textblocks. Ziemlich oft erfordern diese einfachen Listen keine aufwendige Gestaltung, aber wir möchten die Markierungen einer geordneten oder ungeordneten Liste in gewissem Umfang anpassen, z. B. mit einer Markenfarbe oder mithilfe eines benutzerdefinierten Bildes für unsere Aufzählungszeichen. Mit list-style und dem Pseudoelement ::marker können wir sehr viel machen.
::Markierung
Neben der grundlegenden Gestaltung von Listenmarkierungen können wir auch zyklische Aufzählungszeichen erstellen. Hier verwenden wir drei verschiedene Bild-URLs für den content-Wert des Pseudoelements ::marker, was die handschriftliche Wahrnehmung unseres Beispiels mit der Einkaufsliste unterstreicht (im Gegensatz dazu, dass nur ein Bild für alle Elemente verwendet wird):
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
Benutzerdefinierte Messwerte
Bei einigen sortierten Listen können wir den Zählerwert verwenden, aber einen anderen Wert anhängen. Wir können den list-item-Zähler als Wert für die content-Eigenschaft unserer Markierung verwenden und jeden weiteren Inhalt anhängen:
::marker {
content: counter(list-item) '🐈 ';
}
Unsere Zähler erhöhen automatisch um 1, sie können jedoch um einen anderen Wert erhöht werden, wenn wir dies wünschen, indem wir die counter-increment-Eigenschaft für das Listenelement festlegen. Dadurch werden unsere Zähler beispielsweise jedes Mal um drei erhöht:
li {
counter-increment: list-item 3;
}
Es gibt noch viel mehr, über das wir mit Zählern eingehen können. Im Artikel CSS-Listen, Markierungen und Zähler werden einige dieser Möglichkeiten ausführlicher erläutert.
Einschränkungen des ::Markierungsstils
Manchmal benötigen wir mehr Kontrolle über die Position und den Stil unserer Markierungen. Es ist beispielsweise nicht möglich, die Markierung mithilfe einer Flexbox oder eines Rasters zu positionieren, was manchmal von Nachteil sein kann, wenn eine andere Ausrichtung erforderlich ist. ::marker stellt eine begrenzte Anzahl von CSS-Eigenschaften für Stile zur Verfügung. Wenn unser Design etwas anderes als einen einfachen Stil erfordert, sollten wir möglicherweise ein anderes Pseudoelement verwenden.
Stile für Listen festlegen, die nicht wie Listen aussehen
Manchmal möchten wir unsere Listen vielleicht auf eine Weise gestalten, die sich komplett vom Standardstil unterscheidet. Dies ist häufig bei einem Navigationsmenü der Fall, z. B. wo wir normalerweise alle Markierungen entfernen und die Liste mithilfe der Flexbox horizontal anzeigen möchten. Häufig wird das Attribut list-style auf none gesetzt. Dies bedeutet, dass das Pseudoelement der Markierung im DOM nicht mehr zugänglich ist.
Benutzerdefinierte Markierungen mit ::before
Das Pseudoelement ::before war eine gängige Methode zum Erstellen benutzerdefinierter Listenmarkierungen, bevor ::marker erstellt wurde. Aber auch jetzt bietet sie uns bei Bedarf mehr Flexibilität bei visuell komplexen Listenstilen.
Wie bei ::marker können wir mithilfe des Attributs content eigene benutzerdefinierte Stile für Aufzählungszeichen hinzufügen. Anders als bei der Verwendung von ::marker müssen wir eine manuelle Positionierung vornehmen, da wir die automatischen Vorteile von list-style-position nicht nutzen können. Aber wir können sie mit der Flexbox relativ einfach positionieren, und sie bietet mehr Möglichkeiten für die Ausrichtung. Beispielsweise könnten wir die Position der Markierung ändern:
Wenn wir eine geordnete Liste mithilfe des ::before-Elements gestalten, möchten wir vielleicht auch Zähler verwenden, um die numerischen Markierungen hinzuzufügen.
li::before {
counter-increment: list-item;
content: counter(list-item);
}
Wenn Sie ::before anstelle von ::marker verwenden, können wir vollen Zugriff auf CSS-Eigenschaften für benutzerdefinierte Stile haben. Außerdem sind Animationen und Übergänge zulässig, für die ::marker nur eingeschränkt unterstützt wird.
Listenattribute
Für die Elemente geordneter Listen sind einige optionale Attribute zulässig, die in verschiedenen Anwendungsfällen hilfreich sind.
Umgekehrte Listen
Wenn wir eine Liste der Top-10-Alben des letzten Jahres haben, würden wir vielleicht von 10 auf 1 herunterzählen. Dafür könnten wir benutzerdefinierte Zähler verwenden und sie negativ erhöhen. Oder wir verwenden einfach das reversed-Attribut im HTML-Code. Ich würde behaupten, dass es im Allgemeinen semantisch sinnvoll ist, das Attribut reversed zu verwenden, anstatt den Zähler in CSS negativ inkrementieren zu lassen, es sei denn, die Zähler sind rein Präsentationszweck. Wenn das CSS nicht geladen werden konnte, würden die Zahlen in der HTML weiterhin korrekt heruntergezählt werden. Außerdem müssen wir überlegen, wie ein Screenreader die Liste interpretieren würde.
Sieh dir diese Demo der 10 Top-Alben des Jahres 2021 an. Wenn die Zähler nur mit CSS erhöht werden, könnte ein Nutzer, der mit einem Screenreader auf die Seite zugreift, erkennen, dass die Zahlen aufwärts gezählt werden, sodass die Zahl 10 tatsächlich an erster Stelle steht.
In der Demo sehen Sie, dass unsere Markierungen bei Verwendung des reversed-Attributs ohne zusätzlichen Aufwand von uns bereits den richtigen Wert haben. Wenn wir jedoch benutzerdefinierte Listenmarkierungen mit dem Pseudoelement ::before erstellen, müssen wir unsere Zähler anpassen. Wir müssen nur unseren list-item-Zähler anweisen, negativ zu erhöhen:
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
In Firefox reicht dies aus, in Chrome und Safari wird jedoch ein Countdown von null auf -10 angezeigt. Wir können das Problem beheben, indem wir der Liste das Attribut start hinzufügen.
Listen aufteilen
Mit dem Attribut start lässt sich der numerische Wert angeben, mit dem die Liste beginnen soll. Dies kann z. B. nützlich sein, wenn Sie eine Liste in Gruppen aufteilen möchten.
Wir bauen auf unserem Beispiel mit unseren Top-10-Alben auf. Vielleicht möchten wir die 20 Top-Alben herunterzählen, aber in Zehnergruppen. Zwischen den beiden Gruppen befindet sich weiterer Seiteninhalt.
Wir müssen zwei separate Listen in unserem HTML-Code erstellen, aber wie können wir sicherstellen, dass die Zähler korrekt sind? Nach der aktuellen Auszeichnung werden beide Listen von 10 auf 1 heruntergezählt, was nicht unseren Erwartungen entspricht. In unserem HTML-Code können wir jedoch einen start-Attributwert angeben. Wenn wir unserer ersten Liste den start-Wert 20 hinzufügen, werden die Markierungen wieder automatisch aktualisiert.
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Layout mit mehrspaltiger Liste
Wie Sie an den vorherigen Demos sehen können, eignet sich das mehrspaltige Layout manchmal gut für unsere Listen. Durch Festlegen einer Spaltenbreite wird sichergestellt, dass die Liste automatisch reagiert und sich nur dann über zwei oder mehr Spalten legt, wenn genügend Platz vorhanden ist. Sie können auch einen Abstand zwischen den Spalten festlegen und für noch mehr Gestaltung eine column-rule mit benutzerdefiniertem Stil hinzufügen (mit einer Kurzform wie der border-Eigenschaft):
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
Wenn Sie Spalten verwenden, kann es manchmal zu unschönen Brüchen in unseren Listenelementen kommen – nicht immer so, wie wir uns das wünschen.
Wir können diese erzwungenen Pausen mithilfe von break-inside: avoid für unsere Listenelemente verhindern:
li {
break-inside: avoid;
}
Benutzerdefinierte Eigenschaften
Benutzerdefinierte CSS-Eigenschaften bieten eine ganze Reihe von Möglichkeiten zum Gestalten von Listen. Wenn wir den Index des Listenelements kennen, können wir ihn zur Berechnung der Eigenschaftswerte verwenden. Leider gibt es derzeit keine Möglichkeit, den Index des Elements (in jedem Fall) allein in CSS zu bestimmen. Zähler erlauben nur die Verwendung ihres Werts in der content-Eigenschaft. Sie lassen keine Berechnungen zu.
Wir können den Index des Elements jedoch innerhalb des style-Attributs in unserem HTML-Code festlegen. Dadurch werden Berechnungen einfacher, insbesondere wenn wir eine Vorlagensprache verwenden. Im folgenden Beispiel sehen Sie, wie wir dies mit Nunjucks festlegen würden:
<ol style="--length: items|length">
</ol>
Splitting.js ist eine Bibliothek, die auf Clientseite eine ähnliche Funktion ausführt.
Mit dem Wert der benutzerdefinierten Eigenschaft können wir den Fortschritt durch eine Liste auf verschiedene Arten anzeigen. Eine Möglichkeit wäre z. B. eine Fortschrittsanzeige für eine Liste von Schritten. In diesem Beispiel verwenden wir ein Pseudoelement mit linearem Farbverlauf, um für jedes Element einen Balken zu erstellen, der anzeigt, wie weit sich der Nutzer in der Liste befindet.
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
Mit der Farbfunktion hsl() können wir auch den Farbton im Verlauf der Liste anpassen. Wir können den hue-Wert mit unserer benutzerdefinierten Eigenschaft berechnen.
Stil für Beschreibungsliste
Wie bereits erwähnt, können wir Begriffe und ihre Definitionen in eine div in einer dl umschließen. Dadurch erhalten wir mehr Stiloptionen. Wir könnten unsere Liste z. B. als Raster anzeigen lassen. Wenn Sie display: grid auf die Liste setzen, ohne die einzelnen Gruppen in einem Wrapper div zu platzieren, werden die Begriffe und Beschreibungen in verschiedenen Rasterzellen platziert. Dies ist manchmal nützlich, wie im folgenden Beispiel, in dem ein Menü mit Kuchen und deren Beschreibungen angezeigt wird.
Wir können ein Raster in der Liste selbst definieren und sicherstellen, dass die Begriffe und Beschreibungen immer in Spalten ausgerichtet sind, wobei die Spaltenbreite durch den längsten Zeitraum bestimmt wird.
Wenn Sie jedoch Begriffe im Stil ihrer Beschreibungskarte klar gruppieren möchten, ist ein Wrapper-<div> sehr hilfreich.
Ressourcen
- Listen Eine Einführung in Listen und Markierungen
- Benutzerdefinierte Markierungen mit ::marker
- Preisvergleichsportal-Listen mit Zählern