List-style: none в CSS — как убрать маркеры списков

[hannadev]

Когда работаешь со списками в CSS, часто нужно избавиться от стандартных маркеров или номеров. Именно для этого существует свойство list-style: none, которое скрывает оформление по умолчанию. Это универсальное решение, которое пригодится при создании меню, карточек товаров или кастомных списков с собственными маркерами.

В этой статье разберёмся, как правильно использовать list-style: none, какие подводные камни его ожидают, и как не потерять семантику списка при его применении. Это важно для доступности страницы и корректной работы скринридеров.

Что такое list-style: none и как его применять

list-style: none — это универсальное свойство CSS, которое одновременно сбрасывает три характеристики списка: тип маркера, изображение маркера и его позицию. Когда ты применяешь это значение к элементу <ul> или <ol>, браузер перестаёт отображать маркеры пуль или числа.

Самый простой способ убрать маркеры — добавить одну строку кода к селектору списка:

ul {
  list-style: none;
}

Этот код применится и к неупорядоченным спискам (<ul>), и к упорядоченным (<ol>). Но есть важный нюанс: list-style: none влияет только на визуальное отображение, а не на структуру документа.

Обычно вместе с удалением маркеров нужно сбросить стандартные отступы списка:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

Разница между list-style: none и list-style-type: none

В CSS есть несколько способов работать со стилями списков. Можно использовать сокращённое свойство list-style или обращаться к отдельным свойствам — list-style-type, list-style-image и list-style-position. Понимание разницы поможет тебе избежать ошибок.

Когда ты пишешь list-style: none, это влияет на два свойства сразу: list-style-type и list-style-image. То есть одновременно убираются как стандартные маркеры, так и пользовательские изображения. А вот list-style-position остаётся неизменным — оно не получает значение none, потому что у этого свойства просто нет такого значения.

Если же использовать только list-style-type: none, эффект будет похож, но технически это другая запись. Вот сравнение:

Свойство	Убирает маркеры	Убирает изображения	Сбрасывает позицию
list-style: none	Да	Да	Нет
list-style-type: none	Да	Нет	Нет
list-style-image: none	Нет	Да	Нет

В большинстве случаев разницы не видно, но если ты комбинируешь несколько свойств, помни об этой особенности. Например, такой код сработает:

ul {
  list-style: none square;
}

Здесь none применится к типу маркера, а square — к изображению (если оно будет добавлено через другое свойство). Но этот синтаксис нечасто используется на практике.

Проблема с доступностью: почему скринридеры перестают воспринимать список

Здесь кроется самая серьёзная проблема, о которой многие разработчики забывают. Когда ты применяешь list-style: none, браузер (особенно VoiceOver на macOS и iOS) может прекратить воспринимать элемент как семантический список. Для людей, использующих скринридеры, информация о том, что перед ними список, попросту исчезает.

Это случилось потому, что некоторые браузеры связали видимое отсутствие маркеров с логическим удалением семантики списка. То есть если нет маркеров — значит, это не список. Парадокс! Но на практике это создаёт проблемы для доступности. Человек со зрением видит структурированные элементы, а пользователь скринридера — просто набор текста без контекста.

Чтобы избежать этой проблемы, необходимо явно сохранить семантику списка. Самый простой способ — добавить пробел нулевой ширины через псевдоэлемент ::before:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  padding-left: 2rem;
}

ul li::before {
  content: "\200B"; /* Пробел нулевой ширины */
  position: absolute;
}

Этот нулевой пробел не видит пользователь со зрением, но скринридер его воспринимает и понимает, что перед ним всё-таки список. Это простое решение значительно улучшает доступность страницы.

Кастомные маркеры вместо стандартных

Одна из главных причин, по которым разработчики используют list-style: none, — это возможность добавить свои маркеры. Вместо скучных точек и букв можно вставить значки, эмодзи или даже изображения. Браузер дает для этого несколько инструментов.

Самый распространённый подход — использовать CSS свойства background и псевдоэлементы. Убираешь стандартные маркеры, а затем добавляешь собственное оформление через фоновое изображение:

ul {
  list-style: none;
  padding-left: 2rem;
}

ul li {
  padding-left: 2rem;
  background-image: url('star.svg');
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Этот метод даёт полный контроль над внешним видом маркеров. Ты можешь менять размер, цвет, расстояние — всё, что захочется. Правда, нужно помнить о производительности: SVG и PNG файлы загружаются медленнее, чем встроенные маркеры CSS.

Ещё один способ — использовать символы и эмодзи. Это работает прямо в CSS без дополнительных файлов:

ul {
  list-style-type: "⚡ ";
}

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

Для более сложных сценариев можно использовать @counter-style — это позволяет создать собственный вид нумерации. Правда, не все браузеры его поддерживают, поэтому с этим нужно быть осторожнее.

Практические примеры использования

Вот несколько реальных сценариев, где list-style: none действительно необходим:

Навигационное меню. Семантически это список ссылок, но визуально пользователь не должен видеть маркеры. Убираешь их через CSS:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

Карточки товаров или статей. Каждая карточка — это элемент списка, но маркеры здесь ни к чему. Сбрасываешь оформление и затем стилизуешь самые карточки как блоки.

Чек-листы и интерактивные элементы. Убираешь маркеры, добавляешь чекбоксы или иконки через JavaScript и CSS. Список остаётся семантическим, но выглядит как полноценный интерактивный компонент.

Списки особенностей или преимуществ. Вместо точек вставляешь галочки, плюсы или другие иконки, которые лучше передают смысл контента.

В каждом из этих случаев list-style: none — первый шаг в создании кастомного оформления списка.

Как работают отступы при удалении маркеров

Часто разработчики забывают о том, что списки имеют стандартные отступы в разных браузерах. Когда применяешь list-style: none, маркеры исчезают, но отступы остаются. Это может привести к странному расположению элементов на странице.

Стандартно браузеры устанавливают на <ul> и <ol>:

• margin-top и margin-bottom (обычно 16px)
• margin-left или padding-left (обычно 40px)

Когда ты добавляешь list-style: none, эти отступы никуда не деваются. Поэтому всегда нужно сбросить их явно:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Это основа для работы со списками. Затем ты уже сам контролируешь все отступы через CSS, добавляя нужные значения для padding и margin как на сам список, так и на его элементы.

Есть также нюанс с padding и margin у элементов <li>. Они могут иметь собственные отступы, которые нужно учитывать при позиционировании кастомных маркеров. Обычно делают так: убирают отступы у списка, а затем добавляют padding-left к элементам списка, освобождая место для маркера.

О чём помнить при работе со списками

Применение list-style: none — это не просто одна строка кода. За этим кроется целая философия структурирования контента и работы с доступностью. Главное правило: сохраняй семантику, даже если скрываешь визуальное оформление.

Не забывай, что список — это не просто группа элементов, это информационная структура. Поисковые системы, скринридеры и другие технологии полагаются на правильную разметку. Если ты уберёшь маркеры, но оставишь теги <ul> и <li>, семантика сохранится. А если ты заменишь список на <div> просто потому, что не хочешь видеть маркеры, — вот это будет ошибкой.

Второй важный момент — производительность и совместимость. Стандартные CSS маркеры загружаются мгновенно, а кастомные иконки или изображения требуют дополнительных HTTP запросов. Символы и эмодзи работают быстро, но не все браузеры одинаково их отображают. Тестируй свои решения на разных устройствах и браузерах, чтобы убедиться, что всё выглядит ожидаемо.