list-style

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>-Elementen und Elementen mit display: list-item;. Da diese Eigenschaft vererbbar ist, kann sie auf einem Elternelement (normalerweise <ol> oder <ul>) gesetzt werden, um denselben Listenstil auf alle verschachtelten Elemente anzuwenden.

Bestandteile der Eigenschaften

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

• list-style-image
• list-style-position
• list-style-type

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 list-style-type und list-style-image beide 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 in der 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

Kein Listenstil wird benutzt.

Formale Definition

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 angesagt 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 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 bestimmt, ob der hinzugefügte Pseudo-Inhalt als zugänglicher Inhalt ausreichend ist und stellt die Listensemantik in diesem Fall wieder her. Generell betrachtet Safari Text und Bilder als ausreichend, weshalb content: "+ "; nachstehend 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, z.B. content: " ";.

Diese CSS-Workarounds sollten nur verwendet werden, wenn keine HTML-Lösung möglich ist, und erst nach Tests, um sicherzustellen, dass sie nicht zu unerwarteten Verhalten führen, das die Benutzererfahrung negativ beeinflussen könnte.

• 'Fixing' Lists (2023)
• VoiceOver und list-style-type: none (2017)
• Verständnis von WCAG: Erstellen von Inhalten, die auf unterschiedliche Weise dargestellt werden können
• Verständnis des Erfolgskriteriums 1.3.1: Informationen und Beziehungen | WCAG 2.1

Beispiele

Listenstiltyp und -position festlegen

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

Browser-Kompatibilität

Siehe auch

• Komponenteneigenschaften: list-style-type, list-style-image, und list-style-position
• ::marker Pseudoelement
• CSS-Listen und Zähler Modul
• CSS-Zählerstile Modul