Listen

Der Preisvergleichsportal-Podcast – 030: Listen

Stell dir vor, du planst eine Reihe von Artikeln, die du auf deinem nächsten Einkaufsbummel kaufen möchtest. Eine gängige Methode, dies visuell darzustellen, ist eine Liste. Aber wie können Sie Ihrer Einkaufsliste einen Stil hinzufügen?

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

Listen erstellen

Die vorherige Liste begann mit einem semantischen Element oder <ul>, wobei Einkaufslistenelemente (<li>-Elemente) untergeordnete Elemente sind. Wenn Sie sich jedes <li>-Element ansehen, sehen Sie, dass alle display: list-item haben. Aus diesem Grund rendert der Browser standardmäßig ein ::marker-Element.

li {
  display: list-item;
}

Es gibt zwei weitere Arten von Listen.

Geordnete Listen können mit <ol> erstellt werden. In diesem Fall zeigt das Listenelement eine Zahl als ::marker an.

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

Beschreibungslisten werden mit <dl> erstellt. Dieser Listentyp verwendet jedoch nicht das <li>-Element der Liste.

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

Listenstile

Nachdem Sie nun wissen, wie Sie eine Liste erstellen, können Sie sie gestalten. Die ersten CSS-Eigenschaften, die erkannt werden, sind die, die auf die gesamte Liste angewendet werden.

Es gibt drei Listenstil-Properties, mit denen Sie Ihr Beispiel gestalten können: list-style-position, list-style-image und list-style-type.

list-style-position

Mit list-style-position können Sie Aufzählungspunkte entweder zum Inhalt des Listenelements inside oder outside verschieben. Der Standardwert outside bedeutet, dass der Aufzählungspunkt nicht im Inhalt der Listenelemente enthalten ist, während inside das erste Element innerhalb des Inhalts des Listenelements verschiebt.

list-style-image

Mit list-style-image können Sie die Aufzählungspunkte Ihrer Liste durch Bilder ersetzen. Damit kannst du ein Bild wie url oder none festlegen, um deine Aufzählungspunkte als Bild, SVG oder GIF zu formatieren. Sie können auch einen beliebigen Medientyp oder sogar einen Daten-URI verwenden.

Sehen wir uns an, wie wir ein Bild von jedem unserer Lebensmittel als list-style-image hinzufügen können:

list-style-type

Die letzte Option besteht darin, das list-style-type zu gestalten. Dadurch werden die Aufzählungspunkte beispielsweise in Keywords mit bekanntem Stil, benutzerdefinierte Strings oder Emojis geändert. Hier finden Sie eine Liste aller möglichen Listenstiltypen.

Kurzschreibweise: list-style

Jetzt, da Sie all diese einzelnen Eigenschaften haben, können Sie die Kurzschreibweise list-style verwenden, um alle unsere Listenstile in einer Zeile festzulegen:

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Mit list-style kannst du Kombinationen aus ein, zwei oder drei der list-style-Properties in beliebiger Reihenfolge angeben. Wenn sowohl list-style-type als auch list-style-image festgelegt sind, wird list-style-type als Fallback verwendet, wenn das Bild nicht verfügbar ist.

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

Dies ist die am häufigsten verwendete Eigenschaft der in diesem Abschnitt behandelten Listenstile. Eine gängige Anwendung ist list-style: none zum Ausblenden von Standardstile. Standardstile stammen vom Browser und häufig werden Listenstile wie Abstände und Ränder durch das Zurücksetzen von Stylesheets entfernt. Sie können diese Abkürzung auch verwenden, um Stile wie list-style: square inside; festzulegen.

Bisher ging es bei den Beispielen darum, eine ganze Liste zu gestalten und Listenelemente zu gestalten. Aber wie sieht es mit einem detaillierteren Ansatz aus?

Pseudoelement ::marker

Das Markierungselement list-item ist eine Aufzählungs-, Binde- oder römische Zahl, mit der die einzelnen Einträge in der Liste gekennzeichnet werden.

Wenn du dir die Liste in den Entwicklertools ansiehst, kannst du für jedes Listenelement ein ::marker-Element sehen, auch wenn keines in HTML deklariert wurde. Wenn Sie sich das ::marker genauer ansehen, sehen Sie den Standardstil des Browsers.

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

Wenn Sie eine Liste deklarieren, wird jedes Element mit einer Markierung versehen, auch wenn der HTML-Code keine Aufzählungspunkte oder römischen Ziffern enthält. Dabei handelt es sich um ein Pseudoelement, da der Browser es für Sie generiert und eine eingeschränkte Stil-API für das Targeting zur Verfügung stellt. Weitere Informationen zum Aufbau des CSS-Aufzählungszeichens ::marker bietet in Safari eingeschränkten Support.

Markierungsfeld

Im CSS-Layoutmodell werden Markierungen von Listenelementen durch ein Markierungsfeld dargestellt, das mit jedem Listenelement verknüpft ist. Das Markierungsfeld ist der Container, der normalerweise das Aufzählungszeichen oder die Nummer enthält.

Mit dem ::marker-Selektor können Sie das Markierungsfeld gestalten. So können Sie nur die Markierung auswählen, anstatt Stile anhand der gesamten Liste zu gestalten.

Markierungsstile

Nachdem Sie die Markierung ausgewählt haben, sehen wir uns nun die Stileigenschaften an, die dieser Auswahl zur Verfügung stehen. Weitere Informationen zu benutzerdefinierten Aufzählungspunkten mit CSS ::marker findest du auf web.dev.

Es gibt mehrere zulässige CSS-::marker-Properties:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Display-Typ

Alle unsere list-style- und ::marker-Eigenschaften können <li>-Elemente gestalten, da sie den Standardanzeigewert „list-item“ haben. Sie können auch Dinge, die kein <li> sind, in ein Listenelement aufnehmen.

Dazu fügen Sie die Property display: list-item hinzu. Ein Beispiel für die Verwendung von display: list-item ist, wenn Sie ein hängendes Aufzählungszeichen auf einer Überschrift verwenden möchten, damit Sie es mit ::marker in eine andere Bezeichnung ändern können. Das folgende Beispiel zeigt eine Überschrift, bei der display: list-item für die Gestaltung verwendet wird, mit einer Liste mit korrektem Listen-Markup.

Mit display können Sie beliebige Elemente in eine Listenelementansicht umwandeln. Dies sollten Sie jedoch nicht verwenden, statt das korrekte Listen-Markup zu verwenden. Wenn es sich bei den Inhalten, die Sie gestalten, in Wirklichkeit um eine Liste handelt. Wenn Sie die visuelle Darstellung eines Listenelements ändern, wirkt sich das nicht darauf aus, wie Bedienungshilfen das Element lesen und erkennen. Daher wird es von Screenreadern oder auf anderen Geräten nicht als Listenelement gelesen. Du solltest immer semantisches Markup verwenden und Listen nach Möglichkeit mit <li> erstellen.

Wissen testen

Testen Sie Ihr Wissen über Listen

Ressourcen

• MDN-Leitfaden zu Stillisten
• Benutzerdefinierte Aufzählungszeichen mit CSS ::marker
• Smashing Magazine: CSS-Listen, Markierungen und Zähler
• MDN mit CSS-Zählern
• Modul 3: CSS-Listen und -Zähler
• CSS-Tricks: Mit CSS-Zählern und CSS-Raster zählen