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
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Das Element vor einem Listenelement wird als
::marker
::counter
::pencil
::bullet
Es gibt drei Arten von HTML-Listen:
<dl>
<ul>
<list>
<ol>
<li>
<lo>
Welche beiden Stile in dieser Liste werden Stile auf ein ::marker
anwenden?
display
color
background-color
transition