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.

* Some parts of this feature may have varying levels of support.

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

Anfangswertwie 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style
symbols()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch