Руководство по CSS-счетчикам

Перевод статьи Samantha Ming: A Guide to CSS counter. Опубликовано с разрешения автора.

Читайте в моем блоге

Используйте свойство “counter”, чтоб превратить любой элемент в нумерованный список. Аналогично тому, как работает упорядоченный список внутри тега <ol> Это может пригодиться, при создании сайта документации, где необходимо автоматически нумеровать заголовки или для таблицы с данными. 👍

div {
  /* Объявление и Инициализация Счетчика */
  counter-reset: tidbit-counter;
}

h2::before {
  /* Инкрементирование  */
  counter-increment: tidbit-counter;

  /* Отображение Значения */
  content: counter(tidbit-counter) ": ";
}

HTML

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

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

Чтоб счетчик заработал необходимо выполнить три шага:

1. Объявление и Инициализация Счетчика
2. Инкрементирование
3. Отображение Значения

1. Объявление и Инициализация Счетчика

Этот шаг состоит из двух частей. Вам необходимо объявить счетчик и дать ему имя.

1a. Объявление Счетчика

Дадим имя tidbit-counter. Мы дали счетчику имя, чтобы была возможность вызвать его в последующих шагах.

counter-reset: tidbit-counter;

1b. Инициализация Счетчика

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

┌───────────────┬──────────────────┐
│ counter-reset │ Output           │
├───────────────┼──────────────────┤
│ 0             │ 1, 2, 3 ...etc   │
│ 20            │ 21, 22, 23...etc │
│ 58            │ 59, 60, 61...etc │
└───────────────┴──────────────────┘

Пример:

div {
  counter-reset: tidbit-counter 58; /* 👈 */
}

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

HTML

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

Pезультат

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>

CSS

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

Pезультат

1: HTML
2: CSS
3: JS

2. Инкрементирование Счетчика

После того как счетчик был настроен, можно приступить к его увеличению. Синтаксис этого свойства:

counter-increment: <counter name> <integer>

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

┌───────────────────┬────────────────────┐
│ counter-increment │ Output             │
├───────────────────┼────────────────────┤
│ 1 (default)       │ 1, 2, 3 ...etc     │
│ 5                 │ 5, 10, 15...etc    │
│ -5                │ -5, -10, -15...etc │
└───────────────────┴────────────────────┘

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

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter -5; /* 👈 */
  content: counter(tidbit-counter) ": ";
}

HTML

<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>)

По умолчанию используются цифры. Это дефолтное значение для counter list style или как это называется в документации style. Но вы также можете использовать и другие стили.

┌─────────────┬───────────────────┐
│ style       │ Output            │
├─────────────┼───────────────────┤
│ default     │ 1, 2, 3 ...etc    │
│ upper-alpha │ A, B, C ...etc    │
│ lower-roman │ i, ii, iii ...etc │
│ thai        │ ๑, ๒, ๓ ...etc    │
└─────────────┴───────────────────┘

Здесь вы можете посмотреть полный список стилей

И давайте посмотрим на примере:

div {
  counter-reset: tidbit-counter;
}

h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter, thai); /* 👈 */
}

HTML

<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) ": ";
}

HTML

<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 принимает дополнительный аргумент:

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

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

┌────────┬──────────────────────┐
│ string │ Output               │
├────────┼──────────────────────┤
│ "."    │ 1.1, 1.2, 1.3 ...etc │
│ ">"    │ 1>1, 1>2, 1>3 ...etc │
│ ":"    │ 1:1, 1:2, 1:3 ...etc │
└────────┴──────────────────────┘

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

div {
  counter-reset: multi-counters;
}

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

HTML

<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 счетчики не заменяют <ol>. Если у вас есть пронумерованный упорядоченный список, вам все таки стоит использовать <ol>, важно чтобы разметка HTML была семантически правильно структурирована. Семантическая разметка имеет решающее значение для доступности и SEO.

Когда побеждает <ol>

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

<h2>Правила Бойцовского клуба</h2>

<ol>
  <li>Никогда никому не рассказывать о Бойцовском клубе</li>
  <li>Никогда никому не рассказывать о Бойцовском клубе</li>
</ol>

Когда побеждает CSS counter

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

<article>
  <h2>Что такое Vue.js?</h2>
  <p>Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов.</p>
  
  <h2>Начало работы</h2>
  <p>Посетите Vuejs.org, чтобы узнать больше!</p>
</article>

Результат

1: Что такое Vue.js?
Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов.

2: Начало работы
Посетите Vuejs.org, чтобы узнать больше!

☝️Вы можете сказать что мне нравится Vue.js 😝

Браузерная поддержка

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

Can I Use: CSS Counters

Ресурсы

• MDN Web Docs: Using CSS counters
• MDN WebDocs: List Style Type
• w3schools: CSS counter-increment
• w3schools: CSS counter-reset
• CSS Tricks: counter-increment
• CSS Tricks: counter-reset
• 30 Seconds of CSS
• Counters and Calc(): Two Little-Known CSS Features Explained
• The Accessibility of ::before and ::after
• Accessiblity support for CSS generated content

Поставте лайк ❤️

Like this on Twitter
Like this on Instagram

Спасибо за прочтение ❤

Say Hello! Instagram | Facebook | Twitter | SamanthaMing.com | Blog

Публикация оригинальной статьи samanthaming.com, medium.com