list-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die list-style CSS-Kurzschrift-Eigenschaft ermöglicht es Ihnen, alle Listeneigenschaften auf einmal festzulegen.

Probieren Sie es aus

Die Werte dieser Eigenschaft werden auf Listenelemente angewendet, einschließlich <li>-Elementen und Elementen mit display: list-item;. Da diese Eigenschaft vererbt wird, kann sie auf einem Elternelement (normalerweise <ol> oder <ul>) gesetzt werden, um das gleiche Listenstil-Design auf alle verschachtelten Elemente anzuwenden.

Bestandteil-Eigenschaften

Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:

Syntax

css
/* type */
list-style: square;

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

/* position */
list-style: inside;

/* two values */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* three values */
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: revert-layer;
list-style: unset;

Die list-style-Eigenschaft wird als ein, zwei oder drei Werte in beliebiger Reihenfolge angegeben. Wenn sowohl list-style-type als auch list-style-image gesetzt sind, wird der list-style-type als Fallback verwendet, wenn das Bild nicht verfügbar ist.

Werte

list-style-type

Ein <counter-style>, <string> oder none. Wenn im Kurzschreibweise weggelassen, wird der Standardwert disc verwendet. Siehe list-style-type.

list-style-image

Ein <image> oder none. Wenn weggelassen, wird der Standardwert none verwendet. Siehe list-style-image.

list-style-position

Entweder inside oder outside. Wenn weggelassen, wird der Standardwert outside verwendet. Siehe list-style-position.

none

Es wird kein Listenstil verwendet.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufListenelemente
VererbtJa
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

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

<list-style-position> =
inside |
outside

<list-style-image> =
<image> |
none

<list-style-type> =
<counter-style> |
<string> |
none

<image> =
<url> |
<gradient>

<counter-style> =
<counter-style-name> |
<symbols()>

<url> =
<url()> |
<src()>

<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed

Barrierefreiheit

Safari erkennt geordnete oder ungeordnete Listen im Barrierefreiheitsbaum nicht als Listen, wenn sie einen list-style-Wert von none haben, es sei denn, die Liste ist innerhalb des <nav>-Navigationselements verschachtelt. Dieses Verhalten ist beabsichtigt und wird nicht als Fehler angesehen.

Um sicherzustellen, dass Listen als Listen angekündigt werden, sollten Sie role="list" bei <ol>- und <ul>-Elementen einfügen, insbesondere wenn die Liste nicht in einem <nav> verschachtelt ist. Dies stellt die Listensemantik wieder her, ohne das Design zu beeinflussen:

html
<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

Falls ein ARIA-role für Ihren Code keine Option ist, kann stattdessen CSS verwendet werden. Das Hinzufügen von nicht-leeren Pseudo-Inhalten wie Text oder Bildern vor jedem Listenelement kann die Listensemantik wiederherstellen, beeinflusst jedoch das visuelle Erscheinungsbild. Safari entscheidet, ob der hinzugefügte Pseudo-Inhalt als ausreichend barrierefreie Inhalte gilt und stellt dann gegebenenfalls die Listensemantik wieder her. Im Allgemeinen betrachtet Safari Text und Bilder als ausreichend, weshalb das content: "+ "; unten funktioniert (erfordert jedoch zusätzlichen Stil, um das Design nicht zu beeinträchtigen).

css
ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Eine Erklärung von content: ""; (ein leerer String) wird ignoriert, ebenso wie content-Werte, die nur Leerzeichen enthalten, wie content: " ";.

Diese CSS-Workarounds sollten nur verwendet werden, wenn keine HTML-Lösung verfügbar ist, und nur nach Tests, um sicherzustellen, dass sie nicht zu unerwarteten Verhaltensweisen führen, die die Benutzererfahrung negativ beeinflussen könnten.

Beispiele

Listentyp und Listenposition einstellen

HTML

html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Ergebnis

Spezifikationen

Specification
CSS Lists and Counters Module Level 3
# list-style-property

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch