Дескриптор `system` at-rule CSS

Дескриптор system задаёт алгоритм, который используется для преобразования целочисленного значения счётчика в строковое представление. Он используется в @counter-style для определения поведения заданного стиля.

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

Синтаксис

/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Other values */
system: fixed 3;
system: extends decimal;
system: extends circled-letters;

Значения

Можно использовать одну из трёх форм:

• Одно из ключевых слов cyclic, numeric, alphabetic, symbolic, additive или fixed.
• Ключевое слово fixed вместе с целым числом.
• Ключевое слово extends вместе со значением <counter-style-name>.

Доступны следующие значения:

cyclic

Циклически перебирает список символов, заданный в дескрипторе symbols. После достижения конца списка цикл возвращается к началу и начинается заново. Это значение подходит как для простых стилей маркеров с одним символом, так и для стилей с несколькими символами. В дескрипторе symbols необходимо указать хотя бы один символ, иначе стиль счётчика будет недопустимым.

numeric

Интерпретирует символы счётчика как цифры в позиционной системе счисления. Числовая система похожа на описанную выше систему alphabetic. Основное отличие заключается в том, что в системе alphabetic первый символ счётчика, указанный в дескрипторе symbols, интерпретируется как 1, следующий — как 2 и так далее. В числовой системе первый символ счётчика интерпретируется как 0, следующий — как 1, затем 2 и так далее.

В дескрипторе symbols необходимо указать хотя бы два символа счётчика, иначе стиль счётчика будет недопустимым.

alphabetic

Интерпретирует указанные символы как цифры алфавитной системы счисления. Если символы от "a" до "z" указаны как символы счётчика в стиле с системой alphabetic, то первые 26 представлений счётчика будут "a", "b" и так далее до "z". До этого момента поведение совпадает с поведением описанной выше системы symbolic. Однако после "z" последовательность продолжится как "aa", "ab", "ac"…

Дескриптор symbols должен содержать хотя бы два символа, иначе стиль счётчика будет недопустимым. Первый символ счётчика, указанный в дескрипторе symbols, интерпретируется как 1, следующий — как 2 и так далее. Эта система также определена только для положительных значений счётчика.

symbolic

Многократно циклически перебирает символы из списка дескриптора symbols, удваивая, утраивая и так далее число символов при каждом следующем проходе списка. Например, если в дескрипторе symbols указаны два символа «◽» и «◾», то при каждом следующем проходе они будут превращаться в «◽◽» и «◾◾», затем в «◽◽◽» и «◾◾◾» и так далее. В дескрипторе symbols необходимо указать хотя бы один символ, иначе стиль счётчика будет недопустимым. Эта система счётчика работает только с положительными значениями счётчика.

additive

Используется для представления систем счисления с «аддитивными значениями», например римских цифр. В таких системах вместо повторного использования цифр в разных позициях для получения различных значений определяются дополнительные цифры для больших значений. Число в такой системе можно получить, сложив составляющие его цифры.

Необходимо указать дополнительный дескриптор additive-symbols как минимум с одним аддитивным кортежем, иначе правило стиля счётчика будет недопустимым. Аддитивный кортеж похож на составной символ счётчика и состоит из двух частей: обычного символа счётчика и неотрицательного целочисленного веса. Аддитивные кортежи необходимо указывать в порядке убывания весов, иначе система будет недопустимой.

fixed или fixed <integer>

Определяет конечный набор символов, однократно перебирая список символов, указанный в дескрипторе symbols. После перебора всех заданных символов используется резервный стиль счётчика. Это ключевое слово полезно в случаях, когда значения стиля счётчика конечны. В дескрипторе symbols необходимо указать хотя бы один символ, иначе стиль счётчика будет недопустимым. После ключевого слова fixed можно указать необязательное значение <integer>. Если оно указано, значение <integer> определяет элемент списка, которому будет назначен первый символ из списка. Если значение не указано, по умолчанию используется integer со значением 1: первый элемент списка получает первый символ.

extends

Расширяет алгоритм другого встроенного в браузер или заданного автором стиля счётчика, позволяя изменять некоторые его свойства. Все неуказанные дескрипторы и их значения наследуются от расширяемого стиля счётчика. Если имя стиля счётчика, указанное вместе с extends, ещё не определено, по умолчанию будет расширен стиль счётчика decimal.

Нельзя указывать дескриптор symbols или additive-symbols, иначе правило стиля счётчика будет недопустимым. Если одно или несколько определений стилей счётчика образуют цикл своими значениями extends, браузер будет считать все участвующие стили счётчика расширениями стиля decimal.

Формальное определение

Формальный синтаксис

Примеры

Циклический счётчик

Значение cyclic циклически перебирает список символов, повторяя его при необходимости:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}

Результат

Фиксированный счётчик

Значение fixed перебирает список символов только один раз, начиная единственный цикл с элемента списка, номер которого указан значением integer:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}

Результат

Символьный счётчик

Значение symbolic циклически перебирает список, заданный в дескрипторе symbols, удваивая и утраивая количество символов во втором и третьем циклах соответственно:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

Алфавитный счётчик

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

Числовой счётчик

В этом примере первый символ, указанный в дескрипторе symbols, интерпретируется как 0.

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Результат

Числовой счётчик с числовыми символами

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

CSS

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

Результат

Аддитивный счётчик

В этом примере список отображается с использованием римских цифр. Обратите внимание, что задано значение range. Это необходимо, поскольку представление будет выдавать правильные римские цифры только до значения счётчика 3999. За пределами этого диапазона остальные представления счётчика будут основываться на стиле decimal, который используется в качестве резервного. Если вам нужно представлять значения счётчика римскими цифрами, можно использовать один из предопределённых стилей счётчика — upper-roman или lower-roman, — вместо того чтобы создавать правило самостоятельно.

HTML

Чтобы показать, что отсчёт не обязательно должен начинаться с 1, мы используем атрибут start элемента <ol>. Кроме того, мы используем атрибут value пятого элемента <li>, чтобы показать, что счётчики, определённые с помощью @counter-style, ведут себя так же, как встроенные счётчики.

<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
</ol>

CSS

@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Результат

Расширение счётчика

В этом примере используются алгоритм, символы и другие свойства lower-alpha — одного из нескольких встроенных значений счётчика list-style-type. Стиль расширяется удалением точки ('.') после представления счётчика и заключением символов в круглые скобки, как в (a) и (b).

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

Результат

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

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

См. также

• Другие дескрипторы @counter-style, включая symbols, additive-symbols, negative, prefix, suffix, range, pad, speak-as и fallback
• list-style, list-style-image, list-style-position
• symbols() — функциональная запись для создания анонимных стилей счётчика.