Stil für Creative-Liste

Hier finden Sie einige nützliche und kreative Möglichkeiten, Listen zu gestalten.

Michelle Barker
Michelle Barker

Was fällt Ihnen ein, wenn Sie an eine Liste denken? Das naheliegendste Beispiel ist eine Einkaufsliste – die einfachste Art von Liste, eine Sammlung von Artikeln in keiner bestimmten Reihenfolge. Aber wir verwenden Listen im Web auf vielfältige Weise. Eine Liste der anstehenden Konzerte an einem Veranstaltungsort? Sehr wahrscheinlich eine Liste. Ein mehrstufiger Buchungsvorgang? Höchstwahrscheinlich eine Liste. Eine Bildergalerie? Auch das könnte als Liste von Bildern mit Bildunterschriften betrachtet werden.

In diesem Artikel werden die verschiedenen HTML-Listentypen, die im Web verfügbar sind, und ihre Verwendungsmöglichkeiten erläutert. Außerdem werden einige Attribute vorgestellt, die Ihnen vielleicht noch nicht bekannt sind. Außerdem sehen wir uns einige nützliche und kreative Möglichkeiten an, wie Sie sie mit CSS stylen können.

Wann ist eine Liste sinnvoll?

Ein HTML-Listenelement sollte verwendet werden, wenn Elemente semantisch gruppiert werden müssen. Hilfstechnologien wie Screenreader informieren den Nutzer darüber, dass es eine Liste gibt, und über die Anzahl der Elemente. Wenn Sie sich beispielsweise ein Produktraster auf einer Shopping-Website vorstellen, wären diese Informationen sehr hilfreich. Daher ist die Verwendung eines Listenelements eine gute Wahl.

Typen auflisten

Für das Markup stehen uns drei verschiedene Listenelemente zur Verfügung:

  • Unsortierte Liste
  • Sortierte Liste
  • Beschreibungsliste

Welche Sie verwenden, hängt vom Anwendungsfall ab.

Unsortierte Liste (ul)

Das Element „Unsortierte Liste“ (<ul>) eignet sich am besten, wenn die Elemente in der Liste keiner bestimmten Reihenfolge entsprechen. Standardmäßig wird dies als Aufzählungsliste angezeigt. Ein Beispiel ist eine Einkaufsliste, bei der die Reihenfolge keine Rolle spielt.

Eine Einkaufsliste mit Artikeln wie Brot, Milch und Äpfeln.

Ein gängigeres Beispiel im Web ist ein Navigationsmenü. Wenn Sie ein Menü erstellen, sollten Sie das ul-Element in ein nav-Element einschließen und das Menü mit einem Label versehen, um Hilfstechnologien zu unterstützen. Außerdem sollten wir die aktuelle Seite im Menü angeben. Das können wir mit dem aria-current-Attribut tun:

<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 eine Reihe von Empfehlungen, damit unsere Navigationsmenüs für alle barrierefrei sind.

Sortierte Liste (ol)

Ein Element für eine geordnete Liste (<ol>) ist die beste Wahl, wenn die Reihenfolge der Elemente wichtig ist, z. B. bei einem mehrstufigen Prozess. Listenelemente sind standardmäßig nummeriert. Ein Beispiel wäre eine Anleitung, bei der die Schritte in der richtigen Reihenfolge ausgeführt werden müssen.

Eine Liste mit den Schritten zur Zubereitung von Tee mit Milch.

Sowohl <ol>- als auch <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 mit mehreren Beschreibungen verknüpft sein. Mögliche Anwendungsfälle sind ein Glossar mit Begriffen oder ein Restaurantmenü. Beschreibungslisten werden standardmäßig ohne Markierungen angezeigt, obwohl das Element <dd> in Browsern in der Regel eingerückt wird.

In HTML ist es zulässig, Begriffe mit ihren zugehörigen Beschreibungen mithilfe eines <div> zu gruppieren. Das kann für das Styling nützlich sein, wie wir später sehen werden.

<!-- 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 Listenstilvorlage

Eine der einfachsten Verwendungsmöglichkeiten von Listen ist innerhalb eines Textblocks. Oftmals erfordern diese einfachen Listen kein ausgefeiltes Design. Es kann aber sein, dass wir die Markierungen einer sortierten oder unsortierten Liste in gewissem Maße anpassen möchten, z. B. mit einer Markenfarbe oder einem benutzerdefinierten Bild für die Aufzählungspunkte. Mit list-style und dem Pseudo-Element ::marker können wir eine Menge machen.

::marker

Wir können unseren Listenmarkierungen nicht nur ein grundlegendes Design geben, sondern auch zyklische Aufzählungszeichen erstellen. Hier verwenden wir drei verschiedene Bild-URLs für den content-Wert des ::marker-Pseudoelements, was dem Beispiel für die Einkaufsliste ein handgeschriebenes Aussehen verleiht (im Gegensatz zur Verwendung eines einzelnen Bildes für alle):

::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 möchten wir möglicherweise den Zählerwert verwenden, ihm aber einen weiteren Wert anhängen. Wir können den list-item-Zähler als Wert für die content-Property unserer Markierung verwenden und beliebige andere Inhalte anhängen:

::marker {  
   
content: counter(list-item) '🐈 ';  
}  

Unsere Zähler werden automatisch um eins erhöht. Wir können aber festlegen, dass sie um einen anderen Wert erhöht werden, indem wir die Eigenschaft counter-increment 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 zu Zählern zu sagen. Im Artikel CSS-Listen, Markierungen und Zähler werden einige der Möglichkeiten ausführlicher erläutert.

Einschränkungen beim ::marker-Stil

Manchmal möchten wir mehr Kontrolle über die Position und den Stil unserer Markierungen haben. Es ist beispielsweise nicht möglich, die Markierung mit Flexbox oder Grid zu positionieren. Das kann manchmal ein Nachteil sein, wenn Sie eine andere Ausrichtung benötigen. ::marker stellt eine begrenzte Anzahl von CSS-Eigenschaften für das Design bereit. Wenn für unser Design mehr als nur ein einfaches Styling erforderlich ist, sollten wir stattdessen ein anderes Pseudo-Element verwenden.

Listen formatieren, die nicht wie Listen aussehen

Manchmal möchten wir unsere Listen ganz anders gestalten als das Standard-Styling. Das ist beispielsweise bei einem Navigationsmenü der Fall, bei dem wir normalerweise alle Markierungen entfernen und die Liste mithilfe von Flexbox horizontal anzeigen möchten. Häufig wird das Attribut „list-style“ auf „none“ festgelegt. Das bedeutet, dass das Pseudo-Element „marker“ im DOM nicht mehr zugänglich ist.

Benutzerdefinierte Markierungen mit ::before

Das Pseudo-Element ::before war eine gängige Methode, um benutzerdefinierte Listenmarkierungen zu erstellen, bevor ::marker eingeführt wurde. Aber auch jetzt bietet es uns bei Bedarf mehr Flexibilität für visuell komplexe Listenstile.

Ähnlich wie bei ::marker können wir mit dem Attribut content eigene benutzerdefinierte Aufzählungszeichenstile hinzufügen. Anders als bei ::marker müssen wir die Positionierung manuell vornehmen, da wir die automatischen Vorteile von list-style-position nicht nutzen können. Mit Flexbox können wir sie jedoch relativ einfach positionieren und es eröffnet mehr Möglichkeiten für die Ausrichtung. Wir könnten beispielsweise die Position der Markierung wechseln:

Wenn wir eine nummerierte Liste mit dem Element ::before formatieren, können wir auch Zähler verwenden, um unsere numerischen Markierungen hinzuzufügen.

li::before {  
 
counter-increment: list-item;  
 
content: counter(list-item);  
}  

Wenn wir ::before anstelle von ::marker verwenden, haben wir vollen Zugriff auf CSS-Properties für benutzerdefiniertes Styling sowie auf Animationen und Übergänge, die für ::marker nur eingeschränkt unterstützt werden.

Listenattribute

Für Elemente in sortierten Listen sind einige optionale Attribute zulässig, die uns bei einer Vielzahl von Anwendungsfällen helfen können.

Invertierte Listen

Wenn wir eine Liste der Top-10-Alben des letzten Jahres haben, können wir von 10 auf 1 herunterzählen. Wir könnten dafür benutzerdefinierte Zähler verwenden und sie negativ inkrementieren. Oder wir könnten einfach das reversed-Attribut in der HTML-Datei verwenden. Ich würde sagen, dass es im Allgemeinen semantisch sinnvoll ist, das reversed-Attribut zu verwenden, anstatt den Zähler in CSS negativ zu erhöhen, es sei denn, die Zähler dienen nur der Darstellung. Wenn das CSS nicht geladen werden konnte, würden die Zahlen in der HTML-Datei trotzdem korrekt heruntergezählt. Außerdem müssen wir berücksichtigen, wie ein Screenreader die Liste interpretieren würde.

Hier ist eine Demo der Top 10-Alben von 2021. Wenn die Zähler nur mit CSS erhöht werden, könnte ein Nutzer, der die Seite mit einem Screenreader aufruft, annehmen, dass die Zahlen nach oben gezählt werden, also dass die Zahl 10 tatsächlich die Eins ist.

In der Demo sehen Sie, dass unsere Markierungen dank des Attributs reversed bereits den richtigen Wert haben, ohne dass wir dafür etwas tun mussten. Wenn wir jedoch benutzerdefinierte Listenmarkierungen mit dem Pseudo-Element ::before erstellen, müssen wir unsere Zähler anpassen. Wir müssen nur den Zähler für die Listenelemente anweisen, sich negativ zu erhöhen:

li::before {  
 
counter-increment: list-item -1;  
 
content: counter(list-item);  
}  

In Firefox reicht das aus, in Chrome und Safari zählen die Markierungen jedoch von null bis -10. Das können wir beheben, indem wir der Liste das Attribut start hinzufügen.

Listen teilen

Mit dem start-Attribut können wir den numerischen Wert angeben, mit dem die Liste beginnen soll. Das kann beispielsweise nützlich sein, wenn Sie eine Liste in Gruppen aufteilen möchten.

Aufbauend auf unserem Beispiel mit den Top 10-Alben Vielleicht möchten wir die Top 20-Alben aber in Gruppen von jeweils zehn abzählen. Zwischen den beiden Gruppen befindet sich weiterer Seiteninhalt.

Eine Wireframe-Liste in Spalten mit einem Element, das die Spalten in der Mitte überspannt.

Wir müssen zwei separate Listen in unserem HTML-Code erstellen. Wie können wir aber dafür sorgen, dass die Zähler korrekt sind? Derzeit zählen beide Listen von 10 auf 1 herunter, was nicht gewünscht ist. In unserem HTML-Code können wir jedoch einen start-Attributwert angeben. Wenn wir unserer ersten Liste einen start-Wert von 20 hinzufügen, werden die Markierungen wieder automatisch aktualisiert.

<ol reversed start="20">  
 
<li>...</li>  
 
<li>...</li>  
 
<li>...</li>  
</ol>  

Mehrspaltiges Listenlayout

Wie Sie in den vorherigen Demos sehen konnten, eignen sich Listen manchmal gut für ein mehrspaltiges Layout. Durch Festlegen einer Spaltenbreite können wir dafür sorgen, dass unsere Liste automatisch responsiv ist und sich nur dann über zwei oder mehr Spalten erstreckt, wenn genügend Platz vorhanden ist. Wir können auch einen Abstand zwischen den Spalten festlegen und für zusätzlichen Glanz eine stilisierte Spaltenlinie hinzufügen (mit einer Kurzschreibweise, die der border-Eigenschaft ähnelt):

ol {  
   
columns: 25rem;  
   
column-gap: 7rem;  
   
column-rule: 4px dotted turquoise;  
}  

Wenn wir Spalten verwenden, kann es manchmal zu unschönen Unterbrechungen bei den Listenelementen kommen – nicht immer der gewünschte Effekt.

Eine Demonstration, wie die Inhalte auf zwei Spalten aufgeteilt werden.

Wir können diese erzwungenen Pausen mit break-inside: avoid in unseren Listenelementen verhindern:

li {  
   
break-inside: avoid;  
}  

Benutzerdefinierte Eigenschaften

Mit benutzerdefinierten CSS-Eigenschaften haben Sie eine ganze Reihe von Möglichkeiten, Listen zu gestalten. Wenn wir den Index des Listenelements kennen, können wir damit Property-Werte berechnen. Leider gibt es derzeit keine Möglichkeit, den Index des Elements (zumindest auf eine praktikable Weise) nur in CSS zu ermitteln. Bei Zählern ist nur die Verwendung des Werts im Attribut content zulässig. Berechnungen sind nicht möglich.

Wir können den Index des Elements jedoch im style-Attribut in unserem HTML-Code festlegen, was Berechnungen einfacher machen kann, insbesondere wenn wir eine templating-Sprache verwenden. In diesem Beispiel wird gezeigt, wie wir das mit Nunjucks festlegen würden:

<ol style="--length: items|length">  
 
</ol>  

Splitting.js ist eine Bibliothek, die eine ähnliche Funktion auf der Clientseite ausführt.

Mit dem Wert der benutzerdefinierten Property können wir den Fortschritt durch eine Liste auf verschiedene Arten darstellen. Eine Möglichkeit wäre eine Fortschrittsanzeige für eine Liste von Schritten. In diesem Beispiel verwenden wir ein Pseudo-Element mit einem linearen Farbverlauf, um für jedes Element einen Balken zu erstellen, der angibt, wie weit der Nutzer in der Liste fortgeschritten ist.

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 den Farbton auch im Verlauf der Liste anpassen. Wir können den Wert für hue mithilfe unserer benutzerdefinierten Property berechnen.

Stil der Beschreibungsliste

Wie bereits erwähnt, können wir Begriffe und ihre Definitionen in div in dl einschließen, um mehr Stiloptionen zu haben. Angenommen, wir möchten unsere Liste als Raster anzeigen lassen. Wenn wir display: grid in der Liste ohne einen div-Wrapper um jede Gruppe herum einfügen, würden unsere Begriffe und Beschreibungen in verschiedenen Rasterzellen platziert. Manchmal ist das nützlich, wie im folgenden Beispiel, in dem ein Menü mit Kuchen mit ihren Beschreibungen angezeigt wird.

Wir können ein Raster in der Liste selbst definieren und dafür sorgen, dass die Begriffe und Beschreibungen immer in Spalten ausgerichtet sind. Die Spaltenbreite wird dabei vom längsten Begriff bestimmt.

Wenn wir Begriffe hingegen mit ihren Beschreibungen im Kartenstil gruppieren möchten, ist ein Wrapper <div> sehr hilfreich.

Ressourcen