The CSS Podcast – 030: 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
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.
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.
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