Привіт, колеги! Часто стикаюся з необхідністю робити гарні списки або нумеровані кроки (step 1, step 2...) на дизайнах. Раніше я просто жорстко прописувала цифри прямо в HTML (1, 2, 3), але якщо замовник просить змінити порядок блоків місцями, доводиться переписувати всі цифри вручну. Це дуже незручно.
Поділіться, будь ласка, своїми способами створення автоматичних лічильників. Як ви це реалізуєте за допомогою HTML та CSS?
Найбазовіший спосіб без жодного CSS — це використання стандартного нумерованого списку `<ol>`.
[code=html]
<ol>
<li>Перший крок</li>
<li>Другий крок</li>
<li>Третій крок</li>
</ol>
[/code]
Якщо треба змінити тип нумерації (наприклад, римські цифри чи букви), можна використати атрибут `type`:
`<ol type="A">` — для A, B, C;
`<ol type="I">` — для I, II, III.
Але цей спосіб має обмеження у стилізації — красиві круглі дизайнерські цифри так просто не зробиш.
Для повної свободи дизайну я використовую CSS-лічильники! Це просто магія. Ти можеш застосувати нумерацію до будь-яких елементів, не обов'язково `<li>`. Наприклад, для блоків `<div>`.
Суть полягає у двох властивостях: `counter-reset` (ініціалізує лічильник на батьківському елементі) та `counter-increment` (збільшує його на +1):
[code=css]
.steps-container {
/* Ініціалізуємо лічильник з назвою my-step */
counter-reset: my-step;
}
.step-card {
position: relative;
/* Збільшуємо на 1 для кожної картки */
counter-increment: my-step;
}
.step-card::before {
/* Виводимо значення лічильника в псевдоелемент */
content: counter(my-step);
position: absolute;
top: 10px;
left: 10px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
[/code]
Тепер ти можеш міняти `.step-card` місцями, і цифри в кружечках перерахуються автоматично.
Додам до коментаря Yulia_JS: CSS лічильники дозволяють підставляти текст безпосередньо у властивість `content`. Це дуже зручно для генерації заголовків.
Наприклад, якщо ти хочеш, щоб кожен блок автоматично починався зі слова 'Розділ 1', 'Розділ 2' і так далі:
[code=css]
article {
counter-increment: chapter;
}
article h2::before {
content: "Розділ " counter(chapter) ": ";
color: blue;
}
[/code]
HTML залишається чистим:
`<h2>Вступ</h2>` -> відобразиться як **Розділ 1: Вступ**.
Ще одна крута фіча CSS-лічильників — це вкладені лічильники (nested counters). Наприклад, коли вам потрібна нумерація типу 1.1, 1.2, 2.1 тощо.
Об'єднавши функцію `counters()` та вкладені списки, можна легко це зробити:
[code=css]
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
/* Функція counters склеює ієрархію крапкою */
content: counters(section, ".") " ";
}
[/code]
Якщо додати цей CSS, то будь-які вкладені `<ul>` чи `<ol>` будуть мати складну ієрархічну нумерацію повністю автоматично. Жодного ручного переписування!
Як бекендник, який іноді пише фронт, я б хотів додати, що не завжди CSS підходить. Іноді ці лічильники потрібно використовувати в логіці (наприклад, для атрибутів `data-id` або відправки на сервер). У таких випадках я роблю нумерацію через JavaScript.
Ось мій улюблений простий сніпет на JS:
[code=javascript]
// Знаходимо всі наші кроки
const steps = document.querySelectorAll('.my-step-element');
// Проходимось по них циклом
steps.forEach((step, index) => {
// index починається з 0, тому додаємо 1
const number = index + 1;
// Варіант 1: Записати номер всередину елемента
step.querySelector('.step-number').textContent = number;
// Варіант 2: Додати номер як атрибут для подальшої обробки
step.setAttribute('data-step-number', number);
});
[/code]
Цей підхід дозволяє мені не просто вивести гарну циферку на екран (як це робить CSS псевдоелемент `::before`), але й мати реальне значення у структурі DOM документа для моїх скриптів.