Знаете ли вы, что с помощью CSS вы можете создать счетчик? Это может быть особенно полезно в тех случаях, когда подсчет необходим только для презентационных целей. В этом полезном кратком совете я покажу вам, как использовать counter-increment .
Screencast
Как это работает?
Это действительно довольно просто. Мы даже не говорим здесь о CSS3; свойство counter-increment существует уже некоторое время. Просто многие из нас не знакомы с этим или не нашли его применения.
Мы начнем с применения свойства counter-increment . Давайте представим, что у нас есть набор ящиков, и в каждом ящике должно отображаться число, соответствующее порядку, в котором ящик встречается в своей последовательности.
|
1
2
3
|
.box {
counter-increment: boxes;
}
|
Свойство
counter-incrementможет принимать одно или два свойства. Первый — этоidкоторый вы позже будете использовать для ссылки на этот конкретный счетчик. Вы также можете передать второй параметр, который относится к приращению. Например, вместо 1, 2, 3, 4 вы можете переключиться на 5, 10, 15, 20 , применив:counter-increment: boxes 5.
Этот код теперь будет хранить уникальный номер для каждого элемента, который имеет class box . Но, конечно же, мы хотим получить этот номер на странице. Надеемся, что в будущем мы сможем использовать свойство content в стандартных селекторах, но пока не совсем. Вместо этого мы будем использовать псевдоэлементы для применения содержимого.
|
1
2
3
|
.box:after {
content: counter(boxes);
}
|
При этом к элементу .box будет применен уникальный номер — опять же, в зависимости от порядка элемента в последовательности. Если в какой-то момент нам понадобится сбросить этот порядок обратно на 1 , мы могли бы использовать свойство counter-reset: boxes .
Зачем делать это снова?
Теперь вы все еще можете подумать: «Зачем мне это использовать?» Есть много ситуаций, когда это может быть удобно. Например, рассмотрим раздел комментариев блога. Если вы хотели предоставить
число для каждого комментария в наборе — возможно, немного прозрачный — вы можете использовать эту технику. Номер не важен для разметки и используется только для презентации. В этих случаях CSS
счетчики сделают свое дело красиво!