CSS-правило @counter-style

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

Хотя CSS предоставляет множество полезных предопределённых стилей счётчиков, правило @counter-style предлагает неограниченные возможности для создания счётчиков. Это правило отвечает потребностям мировой типографики, позволяя авторам определять собственные стили счётчиков, когда предопределённые стили не подходят.

Синтаксис

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Правило @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 circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

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

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

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

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>

Другие примеры смотрите на демонстрационной странице (код).

Готовые стили счётчиков

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

Конвертер стилей счётчиков использует этот список для тестирования и создания кода стилей счётчиков, который можно копировать и вставлять.

Спецификации

Совместимость с браузерами

См. также

• counter()
• counters()
• symbols()
• list-style, list-style-image, list-style-position, list-style-type
• Модуль стилей счётчиков CSS