Стилизация нумерованных списков с помощью CSS-счетчиков

Стилизация нумерованных списков с помощью CSS-счетчиков Сайтостроение

 

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

Поскольку семантический HTML важен, я использую корректный тег ol:

12345<ol>  <li>Stop</li>  <li>Drop</li>  <li>Roll</li></ol>

Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*!

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

Счетчики в помощь

В CSS есть довольно изящная хитрость, чтобы справиться с этой ситуацией — встроенный механизм счетчика. Вот как это выглядит:

CSS

12345678910ol li {  counter-increment: muffins}ol li:before {  content: counter(muffins) «. «;}ol {  list-style: none;  counter-reset: muffins;}

Давайте рассмотрим этот код шаг за шагом:

counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «counter» при каждом обнаружении нового элемента. Мы помещаем ее в каждый элемент нумерованного списка. Я назвал свою переменную «muffins», потому что я люблю маффины.

Перед каждым элементом нумерованного списка я отображаю текущее значение счетчика. counter() можно рассматривать как функцию CSS, которая возвращает значение для конкретного счетчика. В этом случае маффины.

READ
Google начинает борьбу с сайтами, злоупотребляющими рекламными PUSH

Я удаляю ненастраиваемые маркеры по умолчанию с помощью 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-счетчиков

Вот CSS, необходимый для этого:

CSS

READ
Аудиоверсии контента не сказываются на позициях сайта в выдаче Google
1234567891011121314ol {  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 получит внимание, которого он заслуживает.

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.