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-Kurzschreibweiseigenschaft ermöglicht es Ihnen, alle Listenstileigenschaften auf einmal festzulegen.
Probieren Sie es aus
Die Werte dieser Eigenschaft werden auf Listenelemente angewendet, einschließlich <li>
-Elemente und Elemente mit
. Da diese Eigenschaft vererbt wird, kann sie auf ein Elternelement (normalerweise display
: list-item;<ol>
oder <ul>
) angewendet werden, um denselben Listenstil auf alle verschachtelten Elemente anzuwenden.
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* 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 list-style-type
als Fallback verwendet, falls das Bild nicht verfügbar ist.
Werte
list-style-type
-
Ein
<counter-style>
,<string>
, odernone
. Wenn es in der Kurzform weggelassen wird, wird der Standardwertdisc
verwendet. Siehelist-style-type
. list-style-image
-
Ein
<image>
odernone
. Wenn es weggelassen wird, wird der Standardwertnone
verwendet. Siehelist-style-image
. list-style-position
-
Entweder
inside
oderoutside
. Wenn es weggelassen wird, wird der Standardwertoutside
verwendet. Siehelist-style-position
. none
-
Es wird kein Listenstil verwendet.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | Listenelemente |
Vererbt | Ja |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie 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 nicht als Listen im Barrierefreiheitstree, 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 betrachtet.
Um sicherzustellen, dass Listen als Listen angekündigt werden, fügen Sie role="list"
zu <ol>
und <ul>
-Elementen hinzu, insbesondere wenn die Liste nicht in einem <nav>
verschachtelt ist. Dies stellt die Listensemantik wieder her, ohne das Design zu beeinflussen:
<ul role="list">
<li>An item</li>
<li>Another item</li>
</ul>
Wenn ein ARIA-role
für Ihren Code nicht in Frage kommt, kann stattdessen CSS verwendet werden. Indem nicht-leerer Pseudo-Content wie Text oder Bilder vor jedem Listenelement hinzugefügt wird, kann die Listensemantik wiederhergestellt werden, was sich jedoch auf das visuelle Erscheinungsbild auswirkt. Safari entscheidet, ob der hinzugefügte Pseudo-Content als barrierefreier Inhalt ausreicht und stellt die Listensemantik wieder her, falls dies der Fall ist. Im Allgemeinen betrachtet Safari Text und Bilder als ausreichend, weshalb content: "+ ";
im Folgenden funktioniert (erfordert jedoch zusätzliches Styling, um das Design nicht zu beeinflussen).
ul {
list-style: none;
}
ul li::before {
content: "+ ";
}
Eine Deklaration 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 eine HTML-Lösung nicht verfügbar ist, und erst nach einer Überprüfung, um sicherzustellen, dass sie keine unerwarteten Verhaltensweisen hervorrufen, die sich negativ auf die Benutzererfahrung auswirken können.
Beispiele
Einstellung des Listenstil-Typs und der Position
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
.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
- Komponenteneigenschaften:
list-style-type
,list-style-image
, undlist-style-position
::marker
Pseudo-Element- CSS-Listen und Zähler Modul
- CSS-Zählerstile Modul