Дескриптор правила @ CSS `symbols`

Дескриптор symbols CSS правила @counter-style используется для указания символов, применяемых для создания представлений счётчиков в заданной системе счисления. Указание этого дескриптора обязательно, если значение дескриптора system равно cyclic, numeric, alphabetic, symbolic или fixed.

Синтаксис

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

Значения

Дескриптор symbols задаётся списком из одного или нескольких значений <symbol>, разделённых пробелами.

<symbol>

Задаёт символ, используемый в системе счисления. Каждый символ в списке может быть <string>, <image> или <custom-ident>. Значение <image>, в свою очередь, может быть задано как <url> или <gradient>.

Описание

Символом может быть строка, изображение или идентификатор. Он используется в @counter-style — правиле @.

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

Пробел между символами в кавычках не обязателен, но делает CSS более читаемым. Чтобы использовать кавычку как символ, экранируйте её или заключите символ в кавычки другого типа, например "'".

При задании символов с помощью идентификаторов, а не строк, соблюдайте правила синтаксиса идентификаторов. Например, как отмечалось выше, символы ASCII, не являющиеся буквами, такие как *, не являются идентификаторами и должны быть заключены в кавычки или экранированы. За шестнадцатеричными escape-последовательностями следует пробел. Он может выглядеть как пробел, разделяющий два идентификатора, но позволяет добавлять цифры после символов, записанных с помощью шестнадцатеричного escape-кода. Поэтому после идентификатора с шестнадцатеричной escape-последовательностью нужно поставить два пробела, чтобы отделить его от следующего идентификатора. Например, лучше использовать строку "\2A 1" вместо \2A 1 с двумя пробелами, поскольку инструменты для работы с кодом могут удалить повторяющиеся пробелы. Как правило, безопаснее заключать идентификаторы, которые нужно экранировать, в кавычки или использовать строки.

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

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

Примеры

Задание символов счётчика

В этом примере список значений дескриптора symbols включает буквы (A, D, E), число в кавычках ("1") и идентификатор с шестнадцатеричной escape-последовательностью в кавычках ("\24B7") для символа Ⓑ.

HTML

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

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Результат

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

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

См. также

• Дескрипторы @counter-style: system, additive-symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Свойства стиля списка: list-style, list-style-image, list-style-position
• Функция symbols()
• Тип <url>
• Модуль стилей счётчиков CSS