CSS: counter
Создаем списки с помощью CSS свойства counter
Вы знаете, что нумерованный список можно создать с помощью CSS-свойства counter? Постойте, это же так похоже на использование HTML-тега counter можно, например, автоматически нумеровать заголовки или сделать оглавление для объемного документа.
div {
counter-reset: my-counter; /* cоздаем и инициализируем счетчик */
}
h2::before {
counter-increment: tidbit-counter; /* увеличиваем значение счетчика */
content: counter(tidbit-counter) ": "; /* визуализируем счетчик */
}
HTML
CSS
JS
Как работает свойство counter?
Для того чтобы счетчик работал нужно выполнить три шага:
- создать и инициализировать счетчик,
- увеличить значение счетчика,
- визуализировать значение счетчика.
Создаем и инициализируем счетчик
Этот шаг состоит из двух пунктов. Для начала нужно создать счетчик и дать ему имя.
Создаем счетчик
В этом примере счетчик называется my-counter. Без имени счетчика дальнейшие действия будут невозможны.
counter-reset: my-counter;
Инициализируем счетчик
Следующий пункт - определение стартового значения счетчика, по умолчанию это 0 (в этом случае можно ничего не указывать). Можно указать любое целочисленное стартовое значение. Если укзаать 20, вывод начнется с 21 (в случае, если значение счетчика увеличивается на 1 за шаг, но об этом позже).
| counter-reset | результат |
|---|---|
| 0 | 1, 2, 3… |
| 20 | 21, 22, 23… |
| 59 | 60, 61, 62… |
Рассмотрим пример:
В данном примере для инициализации счетчика указано значение 199, по умолчанию шаг равен 1, список будет начинаться с 200.
Где должен находиться counter-reset?
Это очень важно: свойство counter-reset нужно применять к родительскому элементу. Рассмотрим некорректный пример:
/* Так делать не нужно!!! */
h2{
counter-reset: my-counter;
}
h2:before{
counter-increment: my-counter;
content: counter(my-counter) ": ";
}
HTML
CSS
JS
Значения счетчика не увеличиваются верным образом:
1: HTML
2: CSS
3: JS
Еще одно замечание: counter-reset может быть привязан и не к прямому родителю, но элемент, в котором инициализируется счетчик, должен обязательно оборачивать весь нумерованный список. Например, так:
/* Такой вариант работает верно */
section{
counter-reset: my-counter;
}
h2:before{
counter-increment: my-counter;
content: counter(my-counter) ": ";
}
HTML
CSS
JS
Результат:
1: HTML
2: CSS
3: JS
Увеличение значения счетчика
Итак, счетчик создан. Теперь необходимо поработать над увеличением его значения. Для этого используем следующий синтаксис:
counter-increment:
Вторым аргументом свойства counter-increment является целое число. Это означает, что значение счетчика может изменяться с шагом, отличным от 1. Для приведенной ниже таблицы значение свойства counter-reset равно 0:
| counter-increment | результат |
|---|---|
| 1 | 1, 2, 3… |
| 5 | 5, 10, 15… |
| -5 | -5, -10, -15… |
И, конечно, чтобы запустить обратный отсчет можно использовать отрицательные числа. Посмотрим, как работает такой вариант:
div{
counter-reset: my-counter 4;
}
h2:before{
counter-increment: my-counter -1; /* используем отрицательное значения для шага счетчика */
content: counter(my-counter) ": ";
}
HTML
CSS
JS
Получим результат:
Визуализируем значение счетчика
Наконец, для вывода счетчика на экран нужно передать функцию counter, как значение свойства content. Это довольно часто используемый способ вывода значения CSS-свойства на странице сайта. Вот необходимый синтаксис:
counter(, )
По умолчанию для списка используются арабские цифры. Но style можно изменить:
| style | результат |
|---|---|
| default | 1, 2, 3… |
| upper-alpha | A, B, C… |
| lower-roman | i, ii, iii… |
Все варианты стилей списков находятся здесь.
Пример:
div{
counter-reset: my-counter;
}
h2::before{
counter-increment: my-counter;
content: counter(my-counter, thai) " ";
}
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) ": ";
}
Первый список
Первый список
Второй список
Второй список
Результат:
Вложенные счетчики
Как создавать вложенные списки? Нет ничего проще: просто укажите counters вместо counter в качестве аргумента свойства content. У counters есть дополнительный параметр:
counters(, , )
Параметр string определяет формат разделителя.
| string | результат |
|---|---|
| ”.” | 1.1, 1.2, 1.3… |
| ”>” | 1>1, 1>2, 1>3… |
| “:” | 1:1, 1:2, 1:3… |
Посмотрим на пример:
div{
counter-reset: multi-counters;
}
h2:before{
counter-increment: multi-counters;
content: counters(multi-counters,".") ": ";
}
Фреймворки
Laravel
Yii
Symfony
Результат:
Counter vs
Выбираем ol
CSS-свойство counter не замещает HTML-тег
Список
- Первый элемент
- Второй элемент
Выбираем counter
Делаем выбор в сторону counter, если необходимо создать нумерованные заголовки h1...h6 разделенные контентом p:
Что такое Vue.js?
Vue прогрессивный фреймворк для создания пользовательских интерфейсов.
Ссылки
Перейдите на Vuejs.org, чтобы получить больше информации.
Результат:
1: Что такое Vue.js?
Vue прогрессивный фреймворк для создания пользовательских интерфейсов.
2: Ссылки
Перейдите на Vuejs.org, чтобы получить больше информации.
Совместимость с браузерами
CSS-свойство counter поддерживается значительным количеством браузеров, в том числе Internet Explorer 8.
Более подробную информацию можно получить на caniuse.com.
Источники информации
- MDN: counters
- MDN: 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
Спасибо за внимание.
