@counter-стиль

Правило @counter-style определяется именем стиля счётчика, а стиль указанного счётчика может быть настроен с помощью <declaration-list>, состоящего из одного или нескольких описателей и их значений.

<counter-style-name>

Предоставляет имя для вашего стиля счётчика. Оно задаётся как чувствительное к регистру <custom-ident> без кавычек. Значение не должно быть равно none. Как и все пользовательские идентификаторы, значение вашего стиля счётчика не может быть ключевым словом CSS. Избегайте других перечисленных значений свойств CSS, включая значения свойств списка и стиля счётчика. Имя вашего счётчика не может совпадать с регистра-независимыми значениями свойств list-style-type decimal, disc, square, circle, disclosure-open, и disclosure-closed.

Примечание: Неперезаписываемые имена стилей счётчиков decimal, disc, square, circle, disclosure-open, и disclosure-closed нельзя использовать в качестве имени пользовательского счётчика. Однако они допустимы в других контекстах, где ожидается тип данных <counter-style-name>, например, в system: extends <counter-style-name>.

system

Указывает алгоритм, используемый для преобразования целого значения счётчика в строковое представление. Если значение равно cyclic, numeric, alphabetic, symbolic, или fixed, также необходимо указать описатель symbols. Если значение равно additive, также необходимо указать описатель additive-symbols.

symbols

Указывает символы, которые должны использоваться для представления маркеров. Символы могут содержать строки, изображения или пользовательские идентификаторы. Этот описатель требуется, если описатель system задан как cyclic, numeric, alphabetic, symbolic, или fixed.

additive-symbols

Определяет *добавочные кортежи* для аддитивных систем. В то время как символы, указанные в описателе symbols , используются большинством алгоритмов для построения представления маркера, аддитивные системы счётчиков, такие как римские цифры, состоят из ряда взвешенных символов. Описатели представляют собой список символов счётчика вместе с их неотрицательными целыми весами, упорядоченными по убыванию веса. Этот описатель требуется, если описатель system задан как additive.

negative

Указывает символы, которые должны быть добавлены или предшествовать представлению счётчика, если значение отрицательное.

prefix

Указывает символ, который должен быть добавлен в начало представления маркера. Префиксы добавляются к представлению на заключительной стадии, перед любыми символами, добавленными к значениям отрицательных счётчиков описателем negative.

suffix

Аналогично описателю префикса, указывает символ, который добавляется к представлению маркера. Суффиксы добавляются после представления маркера, включая после любых символов, добавленных к значениям отрицательных счётчиков описателем negative.

range

Определяет диапазон значений, к которым применим стиль счётчика. Если стиль счётчика используется для представления значения счётчика за пределами диапазонов, определённых этим описателем, стиль счётчика возвращается к своему стилю fallback.

pad

Используется, когда необходимо, чтобы представления маркеров имели минимальную длину. Например, если вы хотите, чтобы счётчики начинались с 01 и продолжались 02, 03, 04 и т. д., то необходимо использовать описатель pad. Для представлений, больших, чем заданное значение pad, маркер строится обычным образом.

speak-as

Описание того, как синтезаторы речи, такие как программы чтения с экрана, должны объявлять стиль счётчика. Например, значение маркера элемента списка может быть прочитано как числа или буквы для упорядоченных списков или как звуковые сигналы для неупорядоченных списков, в зависимости от значения этого описателя.

fallback

Указывает имя системы счётчика, к которому будет обращаться, если указанная система не может построить представление значения счётчика или если значение счётчика выходит за рамки заданных range. Если счётчик обратной связи также не может представить значение, используется обратная связь этого счётчика, если она указана. Если описаны либо нет счётчиков обратной связи, либо цепочка обратных связей систем не может представить значение счётчика, она в конечном итоге обращается к стилю decimal.

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }  

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

Это правило стиля счётчика может быть применено к спискам следующим образом:

.items {
  list-style: circled-alpha;
}

Вышеприведённый код даёт следующий результат:

Ещё больше примеров можно найти на странице демо (код).

В документе Готовые стили счётчиков найдётся коллекция из более чем 100 counter-style фрагментов кода. Этот документ предоставляет счётчики, которые удовлетворяют потребностям языков и культур всего мира.

Конвертер стилей счётчиков Counter styles converter использует этот список для тестирования и создания копируемого и вставляемого кода для стилей счётчиков.

• counter()
• counters()
• symbols()
• list-style, list-style-image, list-style-position, list-style-type
• Модуль CSS counter styles