additive-symbols

Описание

Дескриптор аддитивных символов аналогичен дескриптору symbols() (en-US) и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора system (en-US) аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

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

Связано с @-правила@counter-style
Начальное значениеn/a (required)
Обработка значениякак указано

Синтаксис

css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);

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

additive-symbols = 
  [ (en-US) <integer [0,∞]> && (en-US) <symbol> ] (en-US)# (en-US)  

<symbol> = 
  <string> (en-US)        | (en-US)
  <image>         | (en-US)
  <custom-ident>  

<image> = 
  <url>       | (en-US)
  <gradient> (en-US)  

<url> = 
  <url()>  | (en-US)
  <src()>  

<url()> = 
  url( <string> (en-US) <url-modifier>* (en-US) )  | (en-US)
  <url-token>                      

<src()> = 
  src( <string> (en-US) <url-modifier>* (en-US) )

Пример

HTML

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

CSS

css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}

Результат

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

Specification
CSS Counter Styles Level 3
# counter-style-symbols

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

BCD tables only load in the browser

Смотрите также