От автора: вот сценарий, с которым я сталкиваюсь время от времени: мне нужно создать нумерованный список, и я хочу, чтобы он был красивым.
Поскольку семантический HTML важен, я использую корректный тег ol:
<ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol>
Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*!
Я не тот человек, который смирится с безнадежностью. Поэтому я немного покопался и нашел отличное решение.
Счетчики в помощь
В CSS есть довольно изящная хитрость, чтобы справиться с этой ситуацией — встроенный механизм счетчика. Вот как это выглядит:
ol li { counter-increment: muffins
}
ol li:before { content: counter(muffins) ". ";
}
ol { list-style: none; counter-reset: muffins;
}Давайте рассмотрим этот код шаг за шагом:
counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «counter» при каждом обнаружении нового элемента. Мы помещаем ее в каждый элемент нумерованного списка. Я назвал свою переменную «muffins», потому что я люблю маффины.
Перед каждым элементом нумерованного списка я отображаю текущее значение счетчика. counter() можно рассматривать как функцию CSS, которая возвращает значение для конкретного счетчика. В этом случае маффины.
Я удаляю ненастраиваемые маркеры по умолчанию с помощью list-style: none, и указываю сброс счетчика. Это гарантирует, что если у меня на странице будет несколько элементов ol, счетчик будет сброшен для каждого.
:before
Этот трюк использует псевдо-элементы. Псевдоэлемент в CSS — это способ внедрить поддельный элемент до или после главных потомков элемента. content позволяет вам указать, что должен содержать этот элемент.
В этом примере мы добавляем текущий счетчик и немного форматирования (точка и пробел) для имитации значения ol по умолчанию. Можете поэкспериментировать с этим!
Стилизация
С помощью этого CSS мы фактически воссоздали ol по умолчанию. Разница в том, что теперь у нас есть селектор CSS, ol li: before, который мы можем использовать для применения пользовательских стилей.
Поддержка браузерами
Счетчики CSS напоминают функцию нового поколения, но на самом деле они существуют вечно. Они поддерживаются в Internet Explorer 8. Используйте это свойство без проблем.
Это кажется большой проблемой!
Рабочая группа CSS согласна с этим — они разработали черновик для нового псевдо-элемента ::marker, который позволил бы вам применять стили непосредственно к маркерам списка. К сожалению, это доступно только в Firefox и Safari. Кроме того: есть еще одна хитрость с CSS-счетчиками…
Вложенные списки
Это действительно крутая вещь: counter имеет двоюродного брата, counters, и это работает для вложенных списков. Обратите внимание, как нумерация складывается рекурсивно:
Вот CSS, необходимый для этого:
ol { counter-reset: cupcake; padding-left: 32px;
}
ol li { counter-increment: cupcake;
}
ol li:before { content: counters(cupcake, '.') ' '; /* Whatever custom styles you want here */ color: hotpink; font-weight: bold; font-family: cursive;
}Это очень похоже, за исключением того, что вы используете counters вместо counter, и вы добавляете «промежуточный» разделитель (в данном случае, точку).
Возвращаем популярность ol
ol не так популярен, как ul. И все же люди любят считать вещи! Что-то не складывается. Может быть с этим аккуратным трюком, мы, наконец, увидим, что ol получит внимание, которого он заслуживает.
Источник: https://joshwcomeau.com
Редакция: Команда webformyself.