Настройка упорядоченных списков в CSS для Firefox 3

Быстрый ответ

Нумерация упорядоченного списка настраивается через свойство CSS list-style-type, применяя стандартные стили, или же через свойства counter для индивидуальной настройки.

Стандартные стили (вроде disc, circle, square, decimal, lower-roman, и т.д.) устанавливаются следующим образом:

ol {
  list-style-type: lower-alpha; /* Применяем буквенную нумерацию */
}

Индивидуальная настройка счетчика выглядит вот так:

ol {
  list-style-type: none; /* Отключаем стандартные маркеры */
  counter-reset: my-counter; /* Объявляем новый счетчик */
}
ol li::before {
  counter-increment: my-counter; /* Увеличиваем значение счетчика */
  content: '"' counter(my-counter) '". '; /* Выводим значение счетчика */
}

В результате числа в списке представлены, к примеру, так: "1"., "2". и так далее.

Продвинутые настройки: доминируем над счетчиками в CSS

Счетчики CSS — это неотъемлемый инструмент для преобразования обычных упорядоченных списков.

Многоуровневые списки, возбуждающие воображение

Реализуем многоуровневые списки, наподобие структуры документации:

ol {
  counter-reset: chapter-counter; /* Определяем главный счетчик */
}
li::before {
  counter-increment: chapter-counter;
  content: counter(chapter-counter) "." /* Уровень главы */
           counters(section-counter, "."); /* Точка для раздела, ежели нужно */
}
li {
  counter-reset: section-counter; /* Сбрасываем счетчик раздела на каждом пункте */
}

Подробнее об этом расскажет наш спикер на видео

Искусство выравнивания чисел ради эстетического вида

Регулируйте padding или margin, чтобы числа в списке были симметрично расположены, созидая идеальный вид:

ol {
  list-style-type: none;
  padding-left: 0;
}
ol li::before {
  margin-right: 10px; /* Устанавливаем отступ справа */
  content: counter(item) "."; /* Добавляем точку для элегантности */
}
li {
  margin-left: 20px; /* Регулируем отступ слева */
  display: block; /* Представляем элемент в блочном виде */
}

Счетчики с префиксами и суффиксами

Пользуйтесь возможностями свойства content для добавления префиксов или суффиксов к числам, превращая их в красноречивые элементы:

ol li::before {
  content: counter(item) "→ "; /* Стрелка, указывающая направление вперед */
}

Визуализация

Представьте себе нумерацию упорядоченного списка в виде необычных образов, каждый из которых готов к маскараду:

<ol>
  <li value="1">🧙‍♂️ Мерлин</li>
  <li value="2" style="list-style-type: '> ';">🤠 Ковбой</li>
  <li value="10" style="list-style-type: '# ';">👩‍🚀 Астронавт</li>
</ol>

Вот как этот список выглядит: волшебник, ковбой и астронавт:

1. 🧙‍♂️ Мерлин    // Обыкновенный порядковый номер для волшебника
> 2. 🤠 Ковбой      // Ковбой с дефиле
# 10. 👩‍🚀 Астронавт // Астронавт, стремящийся в бескрайние просторы космоса

Настройка нумерации списков — это о выборе подходящего стиля!

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

Через атрибут start в HTML5 задайте начало нумерации списка:

<ol start="10">
  <li>Волшебство начинается с десятки</li>
  <li>Второй пункт, словно второй этаж</li>
</ol>

Атрибут value в HTML5 для прецизионного управления нумерацией

Точное управление нумерацией пунктов списка достигается применением атрибута value:

<ol>
  <li value="100">Столетний юбилей</li>
  <li>Следующее событие после столетия</li>
</ol>

Совместимость с разными браузерами

Не забудьте обеспечить совместимость с разными браузерами. Поскольку поведение счетчиков CSS может отличаться в разных интернет-обозревателях.

Полезные материалы

1. ::marker – CSS: Cascading Style Sheets | MDN — псевдоэлемент ::marker для маркеров в CSS-списках.
2. HTML Ordered Lists — основы упорядоченных списков HTML и рекомендации по их стилизации.
3. html – Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css? – Stack Overflow — обсуждение методов создания стилизованных списков.
4. CSS list-style-type property — информация о свойстве list-style-type для стилизации списков.
5. ::marker | CSS-Tricks – CSS-Tricks — глубокое руководство по стилизации маркеров списков с помощью CSS.
6. CSS Design: Taming Lists – A List Apart — методы стилизации списков и глубокий анализ CSS.
7. <ol>: Упорядоченный список – HTML: HyperText Markup Language | MDN — всестороннее руководство по элементу <ol> в HTML.