list-style

Значения этого свойства применяются к элементам списка, включая <li> элементы и элементы с display: list-item;. Поскольку это свойство наследуется, его можно задать на родительском элементе (обычно <ol> или <ul>), чтобы один и тот же стиль списка применялся ко всем вложенным элементам.

Это свойство является сокращением для следующих свойств CSS:

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

/* 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;

Свойство list-style задается одним, двумя или тремя значениями в любом порядке. Если list-style-type и list-style-image оба заданы, list-style-type используется как резервное значение, если изображение недоступно.

list-style-type

<counter-style>, <string> или none. Если опущено в сокращенной форме, используется значение по умолчанию disc. См. list-style-type.

list-style-image

<image> или none. Если опущено, используется значение по умолчанию none. См. list-style-image.

list-style-position

Либо inside либо outside. Если опущено, используется значение по умолчанию outside. См. list-style-position.

none

Стиль списка не используется.

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       

Safari не распознает упорядоченные или неупорядоченные списки как списки в дереве доступности, если у них значение list-style равно none, если список не вложен в элемент навигации <nav>. Это намеренное поведение и не считается ошибкой.

Чтобы гарантировать, что списки объявляются как списки, добавьте role="list" к элементам <ol> и <ul>, особенно если список не вложен в <nav>. Это восстанавливает семантику списка без изменения дизайна:

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

Если использование ARIA role невозможно в вашем коде, можно использовать CSS вместо этого. Добавление непустого псевдосодержимого, такого как текст или изображения, перед каждым элементом списка может восстановить семантику списка, но повлияет на визуальный вид. Safari определяет, достаточно ли добавленное псевдосодержимое как доступное содержимое, восстанавливая семантику списка при необходимости. Как правило, Safari рассматривает текст и изображения как достаточное, поэтому приведенный ниже content: "+ "; работает (но требует дополнительного стилирования, чтобы не влиять на дизайн).

ul {
  list-style: none;
}

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

Заявление content: ""; (пустая строка) игнорируется, как и значения content содержащие только пробелы, такие как content: " ";.

Эти обходные пути CSS следует использовать только тогда, когда решение HTML недоступно, и только после тестирования, чтобы убедиться, что они не приводят к нежелательному поведению, которое может негативно повлиять на пользовательский опыт.

• «Исправление» списков (2023)
• VoiceOver и list-style-type: none (2017)
• Понимание WCAG: создание контента, который может быть представлен различными способами
• Понимание критерия успеха 1.3.1: Информация и отношения | WCAG 2.1

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

Результат

• Свойства компонента: list-style-type, list-style-image и list-style-position
• ::marker псевдоэлемент
• Модуль CSS списков и счетчиков
• Модуль CSS стилей счетчиков