Stil für Creative-Liste

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

Michelle Barker
Michelle Barker
X Startseite

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. Wir verwenden Listen im Web jedoch auf vielfältige Weise. Eine Sammlung von Konzerten 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. Assistive Technologien (z. B. Screenreader) informieren Nutzer darüber, dass eine Liste vorhanden ist, sowie ü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 ungeordnete Listenelement (<ul>) ist am nützlichsten, wenn die Elemente in der Liste keiner bestimmten Reihenfolge entsprechen. Standardmäßig wird eine Liste mit Aufzählungszeichen 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 sollte die aktuelle Seite im Menü angegeben werden. 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 eine Reihe von Empfehlungen, damit unsere Navigationsmenüs für alle barrierefrei sind.

Sortierte Liste (ol)

Ein Element für eine bestellte 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 mehrere Beschreibungen enthalten. Mögliche Anwendungsfälle sind beispielsweise ein Glossar oder eine Speisekarte in einem Restaurant. 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 Gestaltung von Listen

Eine Liste lässt sich am einfachsten in einem Textblock verwenden. 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 Pseudoelements ::marker, was den handschriftlichen Eindruck der Einkaufsliste unterstreicht, anstatt nur ein einziges Bild für alle Bilder zu verwenden:

::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 ist es sinnvoll, den Zählerwert zu verwenden, aber einen anderen Wert hinzuzufügen. 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 mithilfe der Flexbox oder des Rasters zu positionieren. Dies kann manchmal ein Nachteil sein, wenn eine andere Ausrichtung erforderlich ist. ::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.

Stil für Listen erstellen, die nicht wie Listen aussehen

Manchmal möchten wir unsere Listen auf eine Weise gestalten, die sich komplett vom Standardstil unterscheidet. 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. Beispielsweise könnten wir die Position der Markierung ändern:

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, wollen wir den Countdown von 10 auf 1 herunterzählen. Dafür könnten wir benutzerdefinierte Zähler verwenden und sie negativ erhöhen. 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 Sie die Zahlen trotzdem korrekt in der HTML-Datei herunterzählen sehen. 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 mit einem Screenreader auf die Seite zugreift, daraus schließen, dass die Zahl nach oben gezählt wird, sodass die Zahl 10 tatsächlich die Nummer 1 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 10 auflisten. 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 in unserem HTML-Code zwei separate Listen erstellen, aber wie können wir sicherstellen, 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 den start-Wert 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 eine Lücke zwischen den Spalten festlegen und für mehr Leistung eine Spaltenregel mit benutzerdefiniertem Stil hinzufügen (verwenden Sie eine Kurzschreibweise ähnlich der border-Eigenschaft):

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 Unterbrechungen verhindern, indem wir break-inside: avoid für unsere Listenelemente verwenden:

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 Eigenschaftswerte 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.

Mithilfe des Werts der benutzerdefinierten Eigenschaft können wir den Verlauf in einer Liste auf verschiedene Arten anzeigen. 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 erhalten. Beispielsweise möchten wir unsere Liste als Raster anzeigen. 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. In manchen Fällen ist dies nützlich, wie im folgenden Beispiel, in dem ein Menü mit Kuchen und Beschreibungen angezeigt wird.

Wir können ein Raster auf 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 wir Begriffe hingegen mit ihren Beschreibungen im Kartenstil gruppieren möchten, ist ein Wrapper <div> sehr hilfreich.

Ressourcen