От автора: используйте свойство CSS counter, чтобы превратить любой элемент в нумерованный список. Аналогично тому, как работает тег упорядоченного списка ol. Это очень полезно, если вы создаете сайт документации, где вам нужно автоматически нумеровать заголовки или создавать оглавление.
|
1 2 3 4 5 6 7 8 9 10 |
div { /* Определение и инициализация счетчика */ counter-reset: tidbit-counter; } h2::before { /* Увеличение значения счетчика */ counter-increment: tidbit-counter; /* Отображение счетчика */ content: counter(tidbit-counter) ": "; } |
|
1 2 3 4 5 |
<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div> |
Как работает свойство counter
Чтобы счетчик заработал, нужно сделать 3 вещи:
Определить и инициализировать счетчик
Обеспечить увеличение счетчика
Вывести счетчик
1. Определение и инициализация счетчика
Этот шаг состоит из 2 частей. Вам нужно определить счетчик и задать ему имя.
1a. Определение счетчика
Я назвал счетчик tidbit-counter. Мы задаем для него имя, чтобы иметь возможность вызвать его в дальнейшем.
|
1 |
counter-reset: tidbit-counter; |
1б. Инициализация счетчика
Дальше нам нужно инициализировать счетчик. По умолчанию его начальное значение — 0. Обратите внимание, что этот номер не отображается. Именно здесь вы устанавливаете «старт» счетчика. Так что, если бы я установил 20, то у меня был бы вывод 21, 22, 23… и т.д., предполагая, что шаг увеличения у меня 1 (подробнее об этом ниже).
Вот пример:
|
1 2 3 4 5 6 7 |
div { counter-reset: tidbit-counter 58; } h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ": "; } |
|
1 2 3 4 5 |
<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div> |
Вывод:
|
1 2 3 |
59: HTML 60: CSS 61: JS |
Где применяется свойство counter-reset?
Вам нужно применить свойство counter-reset к родительскому элементу. Вот что произойдет, если вы примените его не к родителю.
|
1 2 3 4 5 6 7 8 |
/* Неверно */ h2 { counter-reset: tidbit-counter; } h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter) ": "; } |
И вот вывод. Как вы заметили, счетчик не увеличивается должным образом:
|
1 2 3 |
1: HTML 1: CSS 1: JS |
Кроме того, он не обязательно должен быть прямым родителем. Пока это HTML-элемент, который оборачивает ваш список, то все в порядке. Как, например:
|
1 2 3 4 5 6 7 |
<section> <div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div> </section> |
|
1 2 3 4 |
/* Это работает */ section { counter-reset: tidbit-counter; } |
Вывод:
|
1 2 3 |
1: HTML 2: CSS 3: JS |
2. Увеличение значения счетчика
Вы установили счетчик. Теперь вы можете начать увеличивать его значение. Вот синтаксис для этого свойства:
|
1 |
counter-increment: <counter name> <integer> |
Как вы заметили, он принимает целочисленный аргумент. Это означает, что вы не ограничены просто увеличением значения счетчика на 1. В приведенном ниже примере предполагается, что для counter-reset установлено 0.
И да, вы также можете передать отрицательное целое число, чтобы уменьшать значение счетчика. Хорошо, давайте посмотрим, как это будет реализовано:
|
1 2 3 4 5 6 7 |
div { counter-reset: tidbit-counter; } h2::before { counter-increment: tidbit-counter -5; content: counter(tidbit-counter) ": "; } |
|
1 2 3 4 5 |
<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div> |
Вывод:
|
1 2 3 |
-5: HTML -10: CSS -15: JS |
3. Вывод счетчика
Наконец, чтобы отобразить счетчик, нам нужно передать функцию counter в качестве значения для свойства content. Свойство content часто позволяет отображать значение в HTML через CSS. Вот синтаксис для нашей функции counter.
|
1 |
counter(<counter name>, <counter list style>) |
По умолчанию мы работали с числами. И это стиль списка счетчика по умолчанию, или, как он называется в документации, стиль. Но вы также можете перейти на другие стили.
Полный список стилей вы можете найти здесь.
Пример
|
1 2 3 4 5 6 7 |
div { counter-reset: tidbit-counter; } h2::before { counter-increment: tidbit-counter; content: counter(tidbit-counter, thai); } |
|
1 2 3 4 5 |
<div> <h2>HTML</h2> <h2>CSS</h2> <h2>JS</h2> </div> |
Вывод:
|
1 2 3 |
๑HTML ๒CSS ๓JS |
Несколько счетчиков
Вы также можете установить несколько счетчиков, просто задав другое имя счетчика.
|
1 2 3 4 5 6 7 8 9 10 11 |
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) ": "; } |
|
1 2 3 4 5 6 7 |
<div> <h2>one</h2> <h2>one</h2> <h3>two</h3> <h3>two</h3> </div> |
Вывод:
|
1 2 3 4 |
1: one 2: one 101: two 102: two |
Вложенный счетчик
Вы также можете установить вложенный счетчик. Вместо использования counter, вам нужно использовать форму множественного числа counters. counters принимает дополнительный аргумент:
|
1 |
counter(<counter name>, <string>, <counter list style>) |
Аргумент string — это разделитель строк, который вы используете, чтобы указать, как вы хотите отделить элемент списка для вложенных счетчиков.
Давайте рассмотрим пример:
|
1 2 3 4 5 6 7 |
div { counter-reset: multi-counters; } h2::before { counter-increment: multi-counters; content: counters(multi-counters, ".") ": "; } |
|
1 2 3 4 5 6 7 8 |
<div> <h2>Frameworks</h2> <div> <h2>Vue</h2> <h2>React</h2> <h2>Angular</h2> </div> </div> |
Вывод:
|
1 2 3 4 |
1: Frameworks 1.1: Vue 1.2: React 1.3: Angular |
counter или ol
CSS counter не заменяет ol. Если у вас есть нумерованный упорядоченный список, то вы все равно должны использовать
- , потому что важно структурировать HTML, используя правильную семантику. Семантическая разметка имеет решающее значение для доступности и SEO.
Предпочтительно использовать ol
Вот пример, где я должен использовать ol. В данном случае я просто перечисляю несколько правил. Имеет смысл использовать упорядоченный список ol.
|
1 2 3 4 5 |
<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.
|
1 2 3 4 5 6 7 |
<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 2 3 4 5 |
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
Источник: //medium.com
Редакция: Команда webformyself.
