Від автора: у цій невеликій статті ми познайомимося з CSS лічильниками – корисною, але поки не дуже відомим властивістю. Після нашого демо ми розберемо реальні приклади сайтів, на яких застосовуються CSS лічильники.
Основне завдання: стилізувати нумерований список
Спочатку подивимося на те, що у нас повинно вийти:
Нічого складно, правда? Але є невеличке «але»: при створенні маркерів ми будемо використовувати семантичну розмітку і по можливості максимально уникати непотрібних div ів і span’ів. Розберемо гнучкий і зрозумілий метод!
CSS лічильники
Для створення даного шаблону потрібно всього лише створити нумерований список. Тут ви могли б сказати «а чи не можна взяти інший елемент або навіть не список». Відповідь – так, але потрібно пам’ятати, що тільки нумерований список точно описує структуру нашої сторінки.
Друге питання імовірно буде «Можна повністю переробити зовнішній вигляд цифр списку?». Стилізувати нумерований список досить складне завдання, але на щастя є інший кросбраузерність спосіб. Так що давайте сховаємо цифри списку і скористаємося CSS лічильниками.
Синтаксис
З допомогою CSS лічильників можна генерувати числа на основі повторюваних елементів і стилізувати їх. Уявіть собі лічильники як змінні, значення яких можна збільшувати. Розглянемо базовий синтаксис:
Створення нового лічильника. На малюнку вище показано, як створити лічильник для нумерованого списку і вказати область його застосування. Ми використовували властивість counter-reset.
Перше значення – ім’я лічильника
Слідом йде опціональний параметр, який визначає стартову точку лічильника (за умовчанням 0). Зверніть увагу на те, що лічильник завжди вважає вгору, тобто нашим першим значенням 1.
Стилізація дочірніх елементів. На другому малюнку видно, що ми додаємо стилі для псевдокласу ::before на елементі списку li.
Властивості content було присвоєно значення. Використовуючи CSS лічильники з властивістю content, ми можемо конкатенувати згенеровані числа з рядками.
Вказується ім’я лічильника
І задається тип decimal (десяткова система числення). Позитивні значення збігаються зі значеннями властивості list-style-type.
Властивості counter-increment ми знову вказуємо ім’я лічильника
Потім опціонально можна вказати крок инкремента. За умовчанням коштує 1.
Розмітка
На основі вищесказаного розмітка буде такою:
List Item
Some text here.
List Item
Some text here.
І CSS:
ol {
counter-reset: section;
}
li {
list-style-type: none;
font-size: 1.5 rem;
padding: 30px;
margin-bottom: 15px;
background: #0e0fee;
color: #fff;
}
li::before {
content: counter(section);
counter-increment: section;
display: inline-block;
position: absolute;
left: -75px;
top: 50%;
transform: translateY(-50%);
padding: 12px;
font-size: 2rem;
width: 25px;
висота: 25px;
text-align: center;
color: #000;
border-radius: 50%;
border: 3px solid #000;
}
В результаті ми отримуємо:
Обмеження
Важливо відзначити, що на даний момент псевдокласи доступні не на всі 100%. Щоб це з’ясувати я провів швидкий тест: я встановив NVDA і відкрив демо з-під Chrome 50, Firefox 45 і Internet Explorer 11.
Я виявив, що при використанні Internet Explorer екранний диктор не вимовляв згенерований контент. На даний момент більшість екранних дикторів нормально розпізнають такий контент. Однак, щоб розуміти, що можна генерувати за допомогою псевдоелемент і що не можна, дані обмеження знати просто необхідно.
Приклади CSS лічильників
Ми вивчили основи роботи з CSS лічильниками, і тепер можна показати пару прикладів їх потенційного застосування. В першу чергу CSS лічильники часто використовуються в онлайн версії газет. Найчастіше вони будуть розташовуватися у сайдбарах:
Wall Street Journal
Handelsblatt
CSS лічильники також можуть застосовуватися в секціях, де описуються якісь кроки чи вказується напрям дії. Приклади:
SpikeNode
Приклади з гаком HTML кодом
Вище ми навели два приклади онлайн версій видань, які використовують CSS лічильники. Тепер давайте розглянемо ще два приклади, але тепер замість лічильників використовується зайвий HTML код (хоча вміст у ньому доступний):
Washington Post
Guardian
Висновок
У цій невеликій статті ми навчилися стилізувати нумеровані списки з допомогою CSS лічильників. Підіб’ємо підсумок:
CSS лічильники відмінно підходять під будь-який проект з динамічними нумерованими списками та користувацькими стилями. Однак даний метод не на 100% доступний. Необхідно розуміти його слабкі сторони і використовувати тільки у відповідних випадках.
Для створення лічильника необхідно задати два властивості (counter-reset,counter-increment) і одну функцію (counter) або counters())).
Лічильник відображається через псевдоэлемент. В роботі лічильника бере участь властивість content, а воно доступне тільки з-під псевдоэлемента.
Ви коли-небудь використовували CSS лічильники в своїх проектах? Якщо так, сміливо діліться своєю роботою!
