Веселощі з CSS лічильниками

CSS лічильники – це одна з тих цікавих можливостей про, які аж хочеться сказати: «Ого, не знав, що на CSS можна таке зробити». Простіше кажучи, вони дозволяють вам рахувати елементи по-порядку – без JavaScript.

Базовий лічильник

Ось це – простий приклад пагінації сторінки:

Цифри, які ви бачите, не прописані в HTML. Вони генеруються, за допомогою CSS:

body {
    counter-reset: pages; /* ініціалізація лічильника */
}

a {
    counter-increment: pages; /* збільшення лічильника */
}

a::before {
    content: counter(pages); /* відображення лічильника */
}

Властивості лічильника застосовуються по мірі того, як зустрічається відповідний елемент(в даному випадку a) в документі. Спершу зустрічається елемент body – відбувається ініціалізація лічильника(pages). Тоді зустрічаються a елементи – кожен один збільшується і виводиться.

Множинні лічильники

Можна використовувати кілька лічильників, застосовуючи унікальні назви для них. Цей приклад демонструє два різних лічильники: sections та boxes.

Відповідний CSS:

body {
    counter-reset: sections boxes;
}

section {
    counter-increment: sections;
}

section::before {
    content: 'Section ' counter(sections);
}

.box {
    counter-increment: boxes;
}

.box::before {
    content: counter(boxes, upper-roman);
}

Тут ви можете побачити синтаксис для ініціалізації двох лічильників в одному рядку(2). І для того, щоб виглядало особливо стильно, лічильник для boxes виводиться у вигляді римських цифр(upper-roman - рядок 18). Повний список варіантів відображення лічильника є такий самий, як і list-style-type (детальніше)

Підрахунок вибраних елементів

Зараз ми підійшли до найцікавішого. Властивості лічильника можуть міститися у псевдо-елементі, наприклад :checked. Це дозволяє лічильникам реагувати на вибір користувача через прапорці. Приклад, що показує кількість елементів, вибраних користувачем:

Цей CSS майже не відрізняється від наших попередніх прикладів. Єдиною відмінністю є збільшення лічильника в псевдо-елементі (input:checked) і відображення лічильника у виділеному для цього елементі( .total )

body {
    counter-reset: characters;
}

input:checked {
    counter-increment: characters;
}

.total::after {
    content: counter(characters);
}

Контроль збільшення лічильника

Лічильники можуть збільшуватися не лише на одну одиницю, вони можуть додавати будь-яке ціле число. Більше того, вони можуть зменшуватися на ціле від'ємне число. Ґрунтуючись на нашому попередньому прикладі, цей – встановлює окреме значення для збільшення для кожного одного елемента.

Синтаксис достатньо простий:

body {
    counter-reset: sum;
}

#a:checked { counter-increment: sum 64; }
#b:checked { counter-increment: sum 16; }
#c:checked { counter-increment: sum -32; }
#d:checked { counter-increment: sum 128; }
#e:checked { counter-increment: sum 4; }
#f:checked { counter-increment: sum -8; }

.sum::before {
    content: '= ' counter(sum);
}

Коли ми ініціалізуємо лічильник, ми можемо додати йому початкове значення:

body {
    counter-reset: kittens 41; /* початкове значення 41 */
}

Обережно, не попадіться!

Мабуть ви помітили, в двох останніх прикладах ми використовуємо <input type="checkbox"> для можливості вибору певних елементів. Проте прапорців немає – вони приховані:

input {
    position: absolute;
    left: -9999px;
}

Якщо ж ви будете використовувати display: none, то підрахунок вибраних елементів не буде працювати (детальніше тут)

Заключне слово

Браузери підтримують CSS лічильники чудово. Зелене світло на всіх напрямках :).

Звісно CSS лічильники красиві, але не забувайте про старих друзів <ol> та <li>. Вони й досі чудово підходять для нумерованого списку. В більш хитрих ситуація можна отримати користь з CSS лічильників.

Я повинен згадати про доступність. CSS лічильники залежать від згенерованого вмісту у псевдо-елементах. Деякі читачі екрану(screen reader) розпізнають контент, деякі – ні. Тож краще не покладатись на псевдо-елементи для важливих даних.