Listen

The CSS Podcast – 030: Lists

Stellen Sie sich vor, Sie haben eine Reihe von Artikeln, die Sie bei Ihrem nächsten Einkauf kaufen möchten. Eine gängige Möglichkeit, dies visuell darzustellen, ist eine Liste. Aber wie können Sie Ihrer Einkaufsliste Styling 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) Kinder waren. Wenn Sie sich jedes <li>-Element ansehen, sehen Sie, dass alle display: list-item-Elemente enthalten. Deshalb rendert der Browser standardmäßig ein ::marker.

li {
  display: list-item;
}

Es gibt zwei weitere Arten von Listen.

Sortierte Listen können mit <ol> erstellt werden. In diesem Fall wird im Listenelement eine Zahl als ::marker angezeigt.

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

Beschreibungslisten werden mit <dl> erstellt. Bei diesem Listentyp wird jedoch nicht das Listenelement <li> verwendet.

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

Listenstile

Unterstützte Browser

Quelle

Nachdem Sie nun wissen, wie eine Liste erstellt wird, können Sie sie gestalten. Die ersten CSS-Properties, die erkannt werden sollen, sind diejenigen, die auf die gesamte Liste angewendet werden.

Es gibt drei Listenstileigenschaften, 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 den Aufzählungspunkt entweder zu inside oder outside zum Inhalt des Listenelements verschieben. Der Standard-outside bedeutet, dass der Aufzählungspunkt nicht im Inhalt der Listenelemente enthalten ist, während inside das erste Element zwischen dem Inhalt des Listenelements verschiebt.

Eine Liste mit ::marker sowohl außerhalb als auch innerhalb des Listenelements, die anzeigt, dass sich außerhalb (Standardwert) nicht im Listenelement befindet, sondern innerhalb des Inhaltsfelds des Listenelements.

`list-style-image`

Mit list-style-image können Sie die Aufzählungspunkte Ihrer Liste durch Bilder ersetzen. Damit können Sie ein Bild wie url oder none festlegen, damit Ihre Aufzählungspunkte ein Bild, eine SVG- oder GIF-Datei haben. Sie können auch einen beliebigen Medientyp oder sogar einen Daten-URI verwenden.

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

`list-style-type`

Die letzte Möglichkeit besteht darin, den list-style-type zu formatieren. Dadurch werden die Aufzählungspunkte in bekannte Stil-Keywords, benutzerdefinierte Strings, Emojis und mehr geändert. Hier finden Sie alle verfügbaren Listenstiltypen.

Kurzschreibweise (`list-style`)

Da Sie nun über alle einzelnen Properties verfügen, können Sie mit dem Kürzel list-style alle Listenstile in einer Zeile festlegen:

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

Mit list-style können Sie Kombinationen aus einem, zwei oder drei der list-style-Properties in beliebiger Reihenfolge deklarieren. Wenn sowohl list-style-type als auch list-style-image festgelegt sind, wird list-style-type als Fallback verwendet, falls das Image 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 häufig genutzte Anwendung ist list-style: none, um Standardstile auszublenden. Standardformate kommen aus dem Browser. Häufig werden beim Zurücksetzen von Stylesheets Listenstile wie Abstände und Ränder entfernt. Mit dieser Abkürzung kannst du auch Stile wie list-style: square inside; festlegen.

Bisher konzentrierten sich die Beispiele auf den Stil einer ganzen Liste und Listenelemente, aber wie sieht es mit einem detaillierteren Ansatz aus?

Pseudoelement `::marker`

Das list-item-Markierungselement ist ein Aufzählungszeichen, Bindestrich oder römisches Zahlzeichen, mit dem die einzelnen Elemente in Ihrer Liste gekennzeichnet werden.

Eine Liste mit drei Elementen, aus der hervorgeht, dass es sich bei jedem der Aufzählungspunkte um ::marker Pseudoelemente handelt.

Wenn du dir die Liste in den Entwicklertools ansiehst, siehst du für jedes Listenelement ein ::marker-Element, obwohl in HTML keines deklariert wurde. Wenn Sie sich ::marker näher ansehen, werden Sie den Standardstil des Browsers dafür erkennen.

::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, erhält jedes Element eine Markierung, auch wenn Ihr HTML-Code weder einen Aufzählungspunkt noch ein römisches Zahlzeichen enthält. Dies ist ein Pseudoelement, weil der Browser es für Sie generiert und eine eingeschränkte Stil-API für das Targeting bietet. Weitere Informationen zum Aufbau des CSS-Aufzählungszeichens ::marker wird in Safari eingeschränkt unterstützt.

Filzstift

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

Sie können den Stil des Markierungsfelds mithilfe des ::marker-Selektors festlegen. So können Sie statt der gesamten Liste nur die Markierung auswählen.

Hinweis: Hinweis: ::marker-Elemente stehen vor Pseudoelementen, die Sie möglicherweise mit CSS ::before eingefügt haben.

Markierungsstile

Nachdem Sie nun die Markierung ausgewählt haben, sehen wir uns die Stileigenschaften für diese Auswahl an. Weitere Informationen zu benutzerdefinierten Aufzählungspunkten mit CSS ::marker finden Sie auf web.dev.

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

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

Hinweis : In geordneten Listen werden als Aufzählungszeichen standardmäßig Zahlen verwendet. Der Inhaltswert ::marker ist ein Anwendungsfall für Zähler, um eine benutzerdefinierte Nummerierung zu erstellen.

Display-Typ

Alle unsere list-style- und ::marker-Properties wissen, dass sie <li>-Elemente gestalten müssen, da sie den Standardwert „list-item“ haben. Sie können auch Elemente, die kein <li> sind, zu Listeneinträgen machen.

Fügen Sie dazu die Eigenschaft display: list-item hinzu. Ein Beispiel für die Verwendung von display: list-item ist, wenn Sie ein hängendes Aufzählungszeichen an einer Überschrift sehen möchten, damit Sie es in eine andere Form mit ::marker ändern können. Das folgende Beispiel zeigt eine Überschrift mit display: list-item für Stile und eine Liste mit korrektem Listen-Markup.

Mit display können Sie zwar alle Elemente in eine Listenansicht umwandeln, aber Sie sollten dies nicht anstelle des richtigen Listen-Markups verwenden, wenn es sich bei den Inhalten, die Sie gestalten möchten, wirklich um eine Liste handelt. Wenn die visuelle Darstellung eines Elements in ein Listenelement geändert wird, ändert sich dadurch nicht, wie Bedienungshilfen das Element lesen und erkennen. Daher wird es auf Screenreadern oder auf anderen Geräten nicht als Listenelement vorgelesen. Verwenden Sie nach Möglichkeit immer semantisches Markup und erstellen Sie Listen mit <li>.