Списки - это фундаментальная часть HTML! Их используют в статьях при описании этапов или шагов, для перечисления ингредиентов в рецептах, для элементов в меню сайта и многих других местах. Списки не только позволяют стилизовать их в соответствии с дизайном, но и сохраняют при этом свою доступность. Например, количество элементов в списке объявляется в программе чтения с экрана, чтобы придать некоторый контекст списку.
Давайте сосредоточимся в этой статье на стилях списков, в основном только на упорядоченных и неупорядоченных списках, и разберем несколько необычных ситуаций стилизации.
Стили по умолчанию
Прежде чем “изобретать колесо”, знайте, что существует несколько значений для свойства list-style-type, которые, возможно, смогут закрыть минимальные потребности в стилизации списков.
Разделение нумерованного списка по середине
Упорядоченные списки могут начинаться с любого числа, которое вы можете задать вручную.
Вложенные упорядоченные списки
Список с нумерацией от большего к меньшему
Атрибут reversed позволяет "развернуть" список.
Маркеры-картинки
В этом случае, лучше всего использовать свойство background-image для псевдоэлемента.
Вы можете подумать, что свойство list-style-image будет более уместным, но оно имеет ряд ограничений. Например, вы не можете сместить картинку и даже изменить её размер.
Маркеры-emoji
Список нумерованный в случайном порядке вручную
Атрибут value установит в качестве маркера списка указанное для этого пункта значение.
Текст + номер
Как вариант, можно для этого варианта использовать псевдоэлементы для большей свободы в стилизации, но есть и list-style-type: '-';
Нумерация внутри и снаружи списка
Маркеры позиционируются лучше при использовании list-style-position: outside; (значение по умолчанию), но при этом они отображаются вне поля, поэтому вам следует быть осторожным, чтобы не обрезать их. Маркеры могут вылезти за края окна браузера или используя overflow: hidden; вы скроете их полностью. В следующих примерах есть хитрость для имитации качественного выравнивания при рендеринге маркеров внутри элемента.
Цветные маркеры
Есть три варианта изменения цвета:
- ::marker (самый новый и самый простой)
- Классический вариант со стилизацией псевдоэлемента
- background-image (мы экспортируем SVG с помощью URL и в таком случае можно управлять цветом из CSS)
Список в несколько колонок
Количество колонок рассчитывается автоматически.
Цветные нумерованные маркеры
Заданные вручную, повторяющиеся символы
Можно создать список маркеров с помощью list-style: symbols(); и использовать их повторно при помощи @counter-style.
Обратите внимание, что это поддерживается только в Firefox на момент написания.