Лічильник - CSS-хитрощі

Зміст:

Anonim

counter-setВластивість CSS, виправдовує свою назву, задає початкове значення для CSS лічильника. Ви знаєте, як упорядковані списки починаються з 1, а потім збільшуються звідти? counter-setВластивість дозволяє нам встановити , що початкове значення для чого - то ще, скажімо, -1. Або 2. Або 200! За винятком того, що він застосовується до лічильників CSS замість упорядкованих списків.

Отже, скажімо, у нас є власний лічильник для списку глав книг, де номер глави додається до назви глави.

Ми б почали з визначення лічильника з counter-resetвластивістю. Ми зателефонуємо йому chapterта визначимо його в батьківському класі контейнера для наших глав, що називаються творчо .chapters.

.chapters ( counter-reset: chapter; )

Далі ми призначили б chapterлічильник елементу, що використовує counter-incrementвластивість. Оскільки це розділи книг, ми застосуємо їх до

елементи, припускаючи, що назва книги буде

. Зверніть увагу, що ми фактично призначаємо його :beforeпсевдоелементу, оскільки це дозволяє нам додавати наш лічильник до фактичного

елемент. 
h2:before ( counter-increment: chapter; )

Класно, останнє, що нам потрібно було б сказати лічильнику, що він повинен відображати. Це робиться на contentвластивості за допомогою counter()функції. Ми також накинемо трохи кольору на прилавок, оскільки дизайн вимагає цього.

h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )

Гей, ми добре виглядаємо!

Але почекай! Я насправді не копаю той факт, що ми починаємо з глави 1. Я маю на увазі, що "Вперед" насправді не є главою. Якщо що, це як глава 0.

Ось де counter-setзаходить! Давайте встановимо, що все починається з нуля:

h2:first-of-type::before ( counter-set: chapter; )

Там ми йдемо! Так краще. Просто встановивши значення властивості на ім'я лічильника, ми встановили перелік глав, що починаються з глави 0. Ми могли б так само легко встановити його початок з чогось іншого, наприклад із розділу 100.

А якщо браузер не підтримує counter-set? Нічого, насправді. Це буде просто ігнорувати , і список буде починатися його по замовчуванню, 1.

Синтаксис

( ? )+ | none

В основному це вигадливий спосіб сказати, що властивість приймає ім'я власного лічильника ( ) та початкове значення ( ). Або встановіть його noneі нумерація буде починатися за замовчуванням початкової точки, 1.

  • Початкове значення: none
  • Застосовується до: усіх елементів (включаючи невізуальні)
  • Успадковано: ні
  • Тип анімації: за типом обчислюваного значення

Цінності

/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;

Зверніть увагу, що counter-setбуде створено новий лічильник, якщо назва лічильника, заявлене на ньому, ще не було деінде визначено.

Підтримка браузера

IE Край Firefox Chrome Сафарі Опера
Ні Ні 68+ Ні Ні Ні
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mini
Ні 79+ Ні Ні Ні
Джерело: caniuse

Подальше читання

  • Специфікація модуля списків CSS рівня 3 (робочий проект)
  • Відображення поточного кроку за допомогою лічильників CSS
  • Підрахунок за допомогою CSS-лічильників та сітки
  • Як змінити користувацькі лічильники CSS