Руководство по CSS counter

От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление.

div { /* Определение и инициализация счетчика */ counter-reset: tidbit-counter;
}
h2::before { /* Увеличение значения счетчика */ counter-increment: tidbit-counter;
/* Отображение счетчика */ content: counter(tidbit-counter) ": ";
}

<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2>
</div>

Как работает свойство counter

Чтобы счетчик заработал, нужно сделать 3 вещи:

1. Определение и инициализация счетчика

Этот шаг состоит из 2 частей. Вам нужно определить счетчик и задать ему имя.

1a. Определение счетчика

Я назвал счетчик tidbit-counter. Мы задаем для него имя, чтобы иметь возможность вызвать его в дальнейшем.

counter-reset: tidbit-counter;

1б. Инициализация счетчика

Дальше нам нужно инициализировать счетчик. По умолчанию его начальное значение — 0. Обратите внимание, что этот номер не отображается. Именно здесь вы устанавливаете «старт» счетчика. Так что, если бы я установил 20, то у меня был бы вывод 21, 22, 23… и т.д., предполагая, что шаг увеличения у меня 1 (подробнее об этом ниже).

Вот пример:

div { counter-reset: tidbit-counter 58;
}
h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ": ";
}

<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2>
</div>

Вывод:

59: HTML
60: CSS
61: JS

Где применяется свойство counter-reset?

Вам нужно применить свойство counter-reset к родительскому элементу. Вот что произойдет, если вы примените его не к родителю.

/* Неверно */
h2 { counter-reset: tidbit-counter;
}
h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ": ";
}

И вот вывод. Как вы заметили, счетчик не увеличивается должным образом:

1: HTML 1: CSS 1: JS

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

<section> <div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div>
</section>

/* Это работает */
section { counter-reset: tidbit-counter;
}

Вывод:

1: HTML 2: CSS 3: JS

2. Увеличение значения счетчика

Вы установили счетчик. Теперь вы можете начать увеличивать его значение. Вот синтаксис для этого свойства:

counter-increment: <counter name> <integer>

Как вы заметили, он принимает целочисленный аргумент. Это означает, что вы не ограничены просто увеличением значения счетчика на 1. В приведенном ниже примере предполагается, что для counter-reset установлено 0.

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

div { counter-reset: tidbit-counter;
}
h2::before { counter-increment: tidbit-counter -5; content: counter(tidbit-counter) ": ";
}

<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2>
</div>

Вывод:

-5: HTML -10: CSS -15: JS

3. Вывод счетчика

Наконец, чтобы отобразить счетчик, нам нужно передать функцию counter в качестве значения для свойства content. Свойство content часто позволяет отображать значение в HTML через CSS. Вот синтаксис для нашей функции counter.

counter(<counter name>, <counter list style>)

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

Полный список стилей вы можете найти здесь.

Пример

div { counter-reset: tidbit-counter;
}
h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter, thai);
}

<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2>
</div>

Вывод:

๑HTML
๒CSS
๓JS

Несколько счетчиков

Вы также можете установить несколько счетчиков, просто задав другое имя счетчика.

div { counter-reset: counter-one counter-two 100;
}
h2::before { counter-increment: counter-one; content: counter(counter-one) ": ";
}
h3::before { counter-increment: counter-two; content: counter(counter-two) ": ";
}

<div> <h2>one</h2> <h2>one</h2> <h3>two</h3> <h3>two</h3>
</div>

Вывод:

1: one
2: one
101: two
102: two

Вложенный счетчик

Вы также можете установить вложенный счетчик. Вместо использования counter, вам нужно использовать форму множественного числа counters. counters принимает дополнительный аргумент:

counter(<counter name>, <string>, <counter list style>)

Аргумент string — это разделитель строк, который вы используете, чтобы указать, как вы хотите отделить элемент списка для вложенных счетчиков.

Давайте рассмотрим пример:

div { counter-reset: multi-counters;
}
h2::before { counter-increment: multi-counters; content: counters(multi-counters, ".") ": ";
}

<div> <h2>Frameworks</h2> <div> <h2>Vue</h2> <h2>React</h2> <h2>Angular</h2> </div>
</div>

Вывод:

1: Frameworks 1.1: Vue 1.2: React 1.3: Angular

counter или ol

CSS counter не заменяет ol. Если у вас есть нумерованный упорядоченный список, то вы все равно должны использовать

, потому что важно структурировать HTML, используя правильную семантику. Семантическая разметка имеет решающее значение для доступности и SEO.

Предпочтительно использовать ol

Вот пример, где я должен использовать ol. В данном случае я просто перечисляю несколько правил. Имеет смысл использовать упорядоченный список ol.

<h2>Rules</h2>
<ol> <li>You do not talk about Fight Club</li> <li>You do not talk about Fight Club</li>
</ol>

Предпочтительно использовать CSS counter

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

<article> <h2>What is Vue.js?</h2> <p>Vue is a progressive framework for building user interfaces.</p> <h2>Getting Started</h2> <p>Visit Vuejs.org to learn more!</p>
</article>

Вывод

1: What is Vue.js?
Vue is a progressive framework for building user interfaces. 2: Getting Started
Visit Vuejs.org to learn more!

Поддержка браузерами

CSS counter поддерживается всеми основными браузерами, включая Internet Explorer 8 и выше. Can I Use: CSS Counters

Автор: Samantha Ming

Источник: https://medium.com

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