Listen

Angenommen, 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 ein Design hinzufügen?

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

Liste erstellen

Die vorherige Liste begann mit einem semantischen Element, also <ul>, mit Einträgen in der Einkaufsliste (<li>-Elemente) als untergeordnete Elemente. Wenn Sie jedes <li>-Element untersuchen, sehen Sie, dass sie alle display: list-item haben. Deshalb rendert der Browser standardmäßig eine ::marker.

li {
  display: list-item;
}

Es gibt noch zwei weitere Arten von Listen.

Sortierte Listen können mit <ol> erstellt werden. In diesem Fall wird für das 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, für diesen Listentyp wird jedoch das Listenelement <li> nicht verwendet.

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

Listenstile

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Jetzt, da Sie wissen, wie Sie eine Liste erstellen, können Sie ihr einen Stil zuweisen. Die ersten CSS-Properties, die erkannt werden, sind diejenigen, die auf die gesamte Liste angewendet werden.

Es gibt drei Listenstil-Eigenschaften, mit denen Sie Ihr Beispiel formatieren 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 an den Anfang inside oder ans Ende outside des Listenelements verschieben. Bei der Standardeinstellung outside ist der Aufzählungspunkt nicht im Inhalt des Listenelements enthalten. Mit inside wird das erste Element in den Inhalt des Listenelements verschoben.

Eine Liste mit den ::markern „outside“ (außen, Standardwert) und „inside“ (innen), die zeigt, dass „outside“ nicht im Listenelement, sondern im Inhaltsfeld des Listenelements ist.

list-style-image

Mit list-style-image können Sie die Aufzählungspunkte Ihrer Liste durch Bilder ersetzen. So können Sie ein Bild wie url oder none festlegen, um Ihre Aufzählungspunkte zu einem Bild, SVG oder GIF zu machen. Sie können auch jeden beliebigen Medientyp oder sogar einen Daten-URI verwenden.

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

list-style-type

Die letzte Option ist das Formatieren von list-style-type. Dadurch werden die Aufzählungspunkte in bekannte Stil-Keywords, benutzerdefinierte Strings, Emojis und mehr umgewandelt. Hier finden Sie eine Liste aller möglichen Listenstile.

list-style Kurzschrift

Nachdem Sie alle diese einzelnen Eigenschaften festgelegt haben, können Sie mit dem Kurzzeichen 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 einer, 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 beschriebenen Listenstile. Eine gängige Anwendung ist list-style: none, um Standardstile auszublenden. Standardstile stammen vom Browser. In zurückgesetzten Stylesheets werden häufig Listenstile wie Ränder und Abstände entfernt. Du kannst diese Kurzschreibweise auch verwenden, um Stile festzulegen, z. B. list-style: square inside;

Bisher haben sich die Beispiele darauf konzentriert, eine ganze Liste und Listenelemente zu formatieren. Aber wie wäre es mit einem detaillierteren Ansatz?

::marker-Pseudoelement

Das Markierungselement list-item ist der Aufzählungspunkt, Bindestrich oder die römische Ziffer, die die einzelnen Elemente in der Liste kennzeichnet.

Eine Liste mit drei Elementen, die zeigt, dass alle Aufzählungspunkte ::marker-Pseudoelemente sind.

Wenn Sie die Liste in den Entwicklertools prüfen, sehen Sie für jedes Listenelement ein ::marker-Element, obwohl Sie in HTML keine deklariert haben. Wenn Sie die ::marker genauer untersuchen, sehen Sie das Standard-Styling 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, erhält jeder Eintrag eine Markierung, auch wenn in Ihrem HTML-Code kein Aufzählungspunkt oder keine römische Ziffer vorhanden ist. Dies ist ein Pseudo-Element, da es vom Browser für Sie generiert wird und eine eingeschränkte Styling-API zum Anpassen bietet. Weitere Informationen zur CSS-Aufzählung ::marker wird in Safari eingeschränkt unterstützt.

Markierungsfeld

Im CSS-Layoutmodell werden Listenelement-Markierungen durch ein Markierungsfeld dargestellt, das jedem Listenelement zugeordnet ist. Das Markierungsfeld ist der Container, der in der Regel den Aufzählungspunkt oder die Zahl enthält.

Mit der Auswahl ::marker können Sie das Feld für die Markierung formatieren. So können Sie nur die Markierung auswählen, anstatt das gesamte Listenelement zu formatieren.

Markierungsstile

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

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

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

Display-Typ

Alle list-style- und ::marker-Properties können <li>-Elemente stylen, da sie den Standardanzeigewert „list-item“ haben. Sie können auch Elemente, die keine <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 eine eingerückte Aufzählungspunktzeichenfolge in einer Überschrift haben möchten, die Sie mit ::marker in etwas anderes ändern können. Das folgende Beispiel zeigt eine Überschrift, in der display: list-item zu Stilisierungszwecken verwendet wird, und eine Liste mit dem korrekten Listen-Markup.

Mit display können Sie zwar alles in eine Listenelementansicht umwandeln, sollten dies aber nicht tun, wenn die Inhalte, die Sie formatieren, tatsächlich eine Liste sind. Verwenden Sie stattdessen das richtige Listen-Markup. Wenn Sie die visuelle Darstellung eines Elements in ein Listenelement ändern, ändert sich nicht, wie es von Bedienungshilfen gelesen und erkannt wird. Es wird also nicht als Listenelement von Screenreadern oder Schaltern gelesen. Sie sollten immer semantisches Markup verwenden und nach Möglichkeit Listen mit <li> erstellen.

Wissen testen

Ihr Wissen über Listen testen

Das Element, das einem Listenelement vorangestellt ist, wird als

::marker
::bullet
::counter
::pencil

Es gibt drei Arten von HTML-Listen:

<ul>
<li>
<list>
<lo>
<ol>
<dl>

Mit welchen beiden Stilen in dieser Liste werden Stile auf eine ::marker angewendet?

background-color
display
transition
color

Ressourcen