additive-symbols

Baseline 2023
Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Описание

Дескриптор аддитивных символов аналогичен дескриптору symbols() и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора system аддитивное. Дескриптор 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 = 
  [ <integer [0,∞]> && <symbol> ]#  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

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

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

Пример

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

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

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