Счетчик - CSS-хитрости

Содержание:

Anonim

Свойство counter-setCSS, соответствующее своему имени, устанавливает начальное значение для счетчика 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 Край Fire Fox Хром Сафари Опера
Нет Нет 68+ Нет Нет Нет
Android Chrome Android Firefox Браузер Android iOS Safari опера мини
Нет 79+ Нет Нет Нет
Источник: caniuse

дальнейшее чтение

  • CSS перечисляет спецификацию уровня 3 модуля (рабочий проект)
  • Отображение текущего шага с помощью счетчиков CSS
  • Подсчет с помощью счетчиков CSS и сетки
  • Как обратить вспять пользовательские счетчики CSS