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-Kurzschreibweise ermöglicht es Ihnen, alle Listenstil-Eigenschaften auf einmal festzulegen.

Probieren Sie es aus

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Die Werte dieser Eigenschaft werden auf Listenelemente angewendet, einschließlich <li>-Elemente und Elemente mit display: list-item;. Da diese Eigenschaft vererbt wird, kann sie auf ein übergeordnetes Element (normalerweise <ol> oder <ul>) gesetzt werden, um denselben Listenstil auf alle verschachtelten Elemente anzuwenden.

Zusammenfassende Eigenschaften

Diese Eigenschaft ist eine Kurzschreibweise 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 mit einem, zwei oder drei Werten in beliebiger Reihenfolge festgelegt. 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>, oder none. Wenn es in der Kurzschreibweise weggelassen wird, wird der Standardwert disc verwendet. Siehe list-style-type.
list-style-image: Ein <image> oder none. Wenn es weggelassen wird, wird der Standardwert none verwendet. Siehe list-style-image.
list-style-position: Entweder inside oder outside. Wenn es weggelassen wird, wird der Standardwert outside verwendet. Siehe list-style-position.
none: Es wird kein Listenstil verwendet.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Anwendbar auf	Listenelemente
Vererbt	Ja
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `list-style-image`: The keyword `none` or the computed <image> `list-style-position`: wie angegeben `list-style-type`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `list-style-image`: diskret `list-style-position`: diskret `list-style-type`: diskret

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 Barrierefreiheitsbaum an, 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, fügen Sie role="list" zu <ol> und <ul> Elementen hinzu, insbesondere wenn die Liste nicht in einem <nav> 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>

Wenn eine ARIA role für Ihren Code keine Option ist, kann stattdessen CSS verwendet werden. Das Hinzufügen von nicht leerem Pseudo-Content, wie Text oder Bilder vor jedem Listenelement, kann die Listensemantik wiederherstellen, hat jedoch Auswirkungen auf das visuelle Erscheinungsbild. Safari entscheidet, ob der hinzugefügte Pseudocontent als barrierefreier Content ausreicht, um die Listensemantik wiederherzustellen. Generell betrachtet Safari Text und Bilder als ausreichend, weshalb das unten gezeigte content: "+ "; funktioniert (benötigt jedoch zusätzliche Stilierung, um das Design nicht zu beeinträchtigen).

css

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 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

Einstellen des Listentyps und der Position

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

Siehe auch

Komponenten-Eigenschaften: list-style-type, list-style-image, und list-style-position
::marker Pseudo-Element
CSS-Listen und Zähler Modul
CSS-Zählerstile Modul