Начинаем работать с CSS-счётчиками

Оригинал: scotch.io/tutorials/getting-started-with-css-counters
Перевод: Влад Мержевич

Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».

Верный путь для обозначения иерархии — через нумерацию объектов. Кроме нумерованного списка в CSS нет другого элемента, который позволяет нам увеличивать порядок. Если бы мы хотели отобразить числа, то должны были сделать некоторую подготовку. Слежение за индексом, его автоинкремент и др. Что-то вроде этого.

PHP

<ul class="numbered-list">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

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

К счастью, в CSS мы можем реализовать подобные вещи, не прилагая особых усилий.

Сброс и инкремент счётчика

Прежде чем делать счётчики на CSS, вы должны знать, что счётчик включает в себя две вещи: сброс и инкремент. Сброс — это то, где мы сбрасываем счётчик или даём ему начальную точку. Инкремент фактически увеличивает счётчик. Давайте быстро набросаем нашу разметку.

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

HTML

<ul class="numbered-list">
  <li class="numbered-list__item">
  <span class="numbered-list__counter"></span>
  <span class="numbered-list__text">Minion ipsum</span>
  </li>
</ul>

Установим <li class="numbered-list"></li> в качестве точки сброса. Для этого мы просто делаем следующее.

CSS

.numbered-list {
  counter-reset: counter-name;
}

Замечание: counter-name может быть произвольным.

Поскольку мы установили нашу точку сброса, то должны сообщить <span class="numbered-list__counter"></ span> увеличивать его значение. Для этого мы используем следующее.

CSS

.numbered-list__counter {
  counter-increment: counter-name;
}

Обращаясь к указанной выше точке сброса, мы говорим счётчику через counter-increment начинать считать. В таком виде наш пример пока не работает.

Поскольку счётчик является генерируемым контентом, вроде :before и :after, нам нужно вставлять счётчики с помощью свойства content в :after, либо в :before. Кроме того, CSS-функция counter позволяет идеально сбросить значение счётчика.

CSS

.numbered-list__counter:before {
  counter-increment: counter-name;
  content: counter(counter-name);
}

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

Смещение индекса инкремента

counter-increment также может принимать положительное или отрицательное значение для изменения шага инкремента.

CSS

counter-increment: counter-name 2;
/* counter-increment: counter-name +2; */

Это увеличит инкремент на множитель 2. Чтобы поменять инкремент на обратный, вы можете использовать отрицательное значение, что уменьшит значение индекса на указанный множитель.

CSS

counter-increment: counter-name -2;

Изменение начальной точки счётчика

Передача целого числа после объявления counter-reset говорит браузеру изменить смещение начального значения.

CSS

.numbered-list {
  counter-reset: counter-name 2;
}

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

Обратная нумерация

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

Сам видел, что люди делают нечто вроде этого.

PHP

<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

Счётчик сбрасывается строчно через генерацию в PHP значения counter-reset. В CSS-файле мы можем затем установить отрицательное значение для counter-increment.

Использование других форматов

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

Если вы являетесь поклонником римских цифр (как я), то для использования римских цифр всё, что вам нужно сделать, это просто передать второй параметр (lower-roman) в функцию counter.

CSS

content: content(counter-name, lower-roman);

Другие варианты включают: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

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

Как говорится, «одна картинка стоит тысячи слов». Этот график от CanIUse иллюстрирует, насколько широко поддерживаются счётчики в CSS. Они хорошо поддерживаются в Internet Explorer и Safari, что говорит о многом. Поэтому вам не стоит беспокоиться об использовании счётчиков, они массово поддерживаются браузерами.

Лично я считаю, что CSS-счётчики — это круто. Некоторым людям подсчёт с помощью CSS кажется непонятным и они продолжают использовать имеющийся у них метод.