HTML-списки скучны. Они не do много, поэтому мы не думаем о них, несмотря на то, насколько широко они используются. И мы по-прежнему можем делать то же самое, что и всегда, для их настройки, например, удалять маркеры, менять порядок и создавать собственные счетчики.
Однако есть несколько «новых» вещей, включая опасности, которые нужно знать при использовании списков. Опасности в основном незначительны, но гораздо более распространены, чем вы думаете. Мы доберемся до них, плюс кое-что новое, что мы можем сделать со списками, и даже новые способы подхода к старым решениям.
Чтобы уточнить, это элементы HTML, о которых мы говорим:
- Упорядоченные списки
- Неупорядоченные списки
- Списки описаний
- Интерактивные списки
Упорядоченные списки, неупорядоченные списки и интерактивные списки содержат элементы списка (
), которые отображаются в зависимости от того, с каким списком мы имеем дело. Упорядоченный список (
) отображает числа рядом с элементами списка. Ненумерованные списки (
) и элементы меню (
) отображает маркеры рядом с элементами списка. Мы называем это «маркерами списка» и их даже можно стилизовать используя :: маркер псевдоэлемент. В списках описания используются термины описания (
) и детали описания (
) вместо
и не имеют маркеров списка. Предполагается, что они будут использоваться для отображения метаданных и глоссариев, но я не могу сказать, что когда-либо видел их в дикой природе.
Начнем с простого — как правильно (по крайней мере, на мой взгляд) сбросить стили списка. После этого мы рассмотрим пару проблем доступности, прежде чем пролить свет на неуловимую
element, который вы, возможно, удивитесь, узнав… на самом деле это тоже тип списка!
Сброс стилей списка
Браузеры автоматически применяют собственные стили агента пользователя, чтобы помочь с визуальной структурой списков прямо из коробки. Это может быть здорово! Но если мы хотим начать с чистого листа, свободного от мнений по стилю, то мы должны сначала сбросить эти стили.
Например, мы можем довольно легко удалить маркеры рядом с элементами списка. Здесь ничего нового:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}Но в современном CSS есть новые способы помочь нам ориентироваться на конкретные экземпляры списка. Допустим, мы хотим удалить маркеры из всех списков, за исключением случаев, когда эти списки отображаются в развернутый контент, например статья. Если мы объединим возможности более новых функций псевдокласса CSS :where() и :not(), мы можем изолировать эти экземпляры и разрешить маркеры в этих случаях:
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}Зачем использовать :where() вместо :is()? Специфика :where() всегда равен нулю, тогда как :is() принимает специфичность самого конкретного элемента в своем списке селекторов. Итак, используя :where() - это менее сильный способ переопределения вещей, и его можно легко переопределить.
Стили UA также применяют заполнение для отступа содержимого элемента списка от его маркера. Опять же, в некоторых случаях это довольно хорошая возможность прямо из коробки, но если мы уже удаляем маркеры списка, как мы сделали выше, то мы также можем стереть это дополнение. Это еще один случай для :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}Хорошо, это предотвратит появление элементов списка без маркеров в пространстве. Но мы как бы выплеснули вместе с водой ребенка и удалили прокладку во всех случаях, включая те, которые мы ранее изолировали в
. Итак, теперь эти списки с маркерами как бы свисают с края поля содержимого.
Обратите внимание, что стили UA применяют дополнительный 40px до
элемент.
Итак, что мы хотим сделать, так это предотвратить «зависание» маркеров списка за пределами контейнера. Мы можем исправить это с помощью list-style-position имущество:
Или нет… может дело в стилистических предпочтениях?
Новые проблемы доступности со списками
К сожалению, когда дело доходит до списков, есть пара проблем с доступностью — даже в наши более современные времена. Одно беспокойство вызывает результат применения list-style: none; как мы делали при сбросе стилей UA.
Одним словом, сафари. не читать упорядоченные и неупорядоченные списки, оформленные с помощью list-style: none как фактические списки, например, при навигации по содержимому с помощью программы чтения с экрана. Другими словами, удаление маркеров также удаляет семантическое значение списка. исправить это исправление это применить AIR list роль в списке и listitem роль для элементов списка поэтому скринридеры подберут их:
- ...
- ...
- ...
- ...
- ...
- ...
Как ни странно, Safari считает это функцией а не баг. По сути, пользователи сообщали, что программы чтения с экрана объявляли слишком много списков (потому что разработчики склонны злоупотреблять ими), так что теперь только те, у кого есть role="list" объявляются программами чтения с экрана, что на самом деле не так уж и странно. Скотт О'Хара имеет подробное краткое изложение о том, как все это было.
Вторая проблема с доступностью возникла не по нашей вине (ура!). Итак, вы знаете, как ты должен добавить aria-label в
элементы без заголовков? Что ж, иногда имеет смысл сделать то же самое со списком, который не содержит элемента заголовка, помогающего описать список.
Grocery list
Ты абсолютно не должны использовать любой метод. Использование заголовка или метки ARIA — это просто добавление контекста, а не требование — обязательно протестируйте свои веб-сайты с помощью средств чтения с экрана и сделайте то, что обеспечивает наилучший пользовательский опыт в данной ситуации.
В новостях по теме Эрик Бейли написал отличную статью о почему и как он считает aria-label быть кодовым запахом.
Подождите,
тоже список?
Итак, вы, вероятно, задаетесь вопросом обо всех
элементы, которые я проскальзывал в примеры кода. На самом деле это очень просто; меню представляют собой неупорядоченные списки, за исключением того, что они предназначены для интерактивных элементов. Они даже представлены в дереве специальных возможностей в виде неупорядоченных списков.
На заре семантической паутины я ошибочно полагал, что меню похожи на
s, прежде чем поверить, что они предназначены для контекстных меню (или «панелей инструментов», как в спецификации говорится), потому что так говорили ранние версии спецификации HTML. (У MDN есть интересная статья обо всех устаревших вещах, связанных с
если вам это вообще интересно)
Однако сегодня это семантический способ использования меню:
Лично я думаю, что есть несколько хороших вариантов использования для
. В последнем примере показан список кнопок социальных сетей, заключенных в помеченный
элемент, примечательным аспектом которого является то, что метка «Поделиться статьей» вносит значительный вклад в контекст, который помогает описать, что делают кнопки.
Меню обязательно? Нет. Они HTML ориентиры? Точно нет. Но они есть, если вам нравится меньше
s, и вы чувствуете, что компонент мог бы использовать aria-label для дополнительного контекста.
Что-нибудь еще?
Да, есть и вышеупомянутое
(список описаний), однако, MDN, похоже, не считает их списками точно так же — это список групп, содержащих термины — и я не могу сказать, что действительно видел их в употреблении. Согласно MDN, они должны использоваться для метаданных, глоссариев и других типов пар ключ-значение. Я бы просто избегал их на том основании, что все программы чтения с экрана объявляют их по-разному.
Но не будем заканчивать на негативной ноте. Вот список супер крутых вещей, которые вы можете делать со списками:
