additive-symbols

Базовая версия 2023

Новое

С сентября 2023 года данная функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Дескриптор additive-symbols правила @counter-style используется для указания символов счётчика, когда значение дескриптора @counter-style system установлено как additive. Аддитивная система используется для построения систем счисления с учётом знака и значения, таких как римские цифры.

Синтаксис

/* Single tuple */
additive-symbols: 3 "*";

/* Comma-separated list of tuples */
additive-symbols:
  3 "0",
  2 "\2E\20",
  1 url(symbol.png);

/* Binary counter */
additive-symbols:
  2 "1",
  1 "0";

/* Etruscan (a civilization in ancient Italy) counter  */
additive-symbols:
  100 "𐌟",
  50 "𐌣",
  10 "𐌢",
  5 "𐌡",
  1 "𐌠";

Значения

Дескриптор принимает список значений аддитивных кортежей, каждый кортеж состоит из двух значений, разделённых пробелом:

<integer>: Положительное целое число, определяющее весовой коэффициент ассоциированного символа значения кортежа.
<symbol>: Указывает символ счётчика, используемый для значения веса, определённого ассоциированным значением веса <integer> кортежа.

Примечание: Аддитивные кортежи должны быть указаны в порядке убывания веса; в противном случае объявление дескриптора некорректно и игнорируется.

Описание

Дескриптор additive-symbols определяет список аддитивных кортежей, разделённых запятыми. Каждый аддитивный кортеж содержит целое неотрицательное число и символ счётчика, разделённые пробелом. Для корректности список должен быть упорядочен в порядке убывания целых чисел. Целое число и символ конкатенируются для формирования символа счётчика.

Когда значение дескриптора system равно cyclic, numeric, alphabetic, symbolic, или fixed, используйте дескриптор symbols() вместо additive-symbols.

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

Соответствующее правило at-rule	`@counter-style`
Начальное значение	`n/a (required)`
Вычисленное значение	как указано

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

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

В этом примере system: additive вместе со значениями дескриптора additive-symbols определяют, как числа должны быть представлены в виде римских цифр. Значение каждого элемента <li> в списке преобразуется в римскую цифру в соответствии с правилами, определёнными в @counter-style.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li value="109">109</li>
  <li>110</li>
</ul>

CSS

@counter-style uppercase-roman {
  system: additive;
  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;
}

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

Результат

Для элемента списка со значением 109, цифра C представляет 100, а IX представляет 9. Это создаёт счётчик CIX для элемента списка 109. Следующий элемент списка автоматически получает значение 110. Римская цифра CX получается из C для 100 и X для 10.

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

Спецификация
CSS Counter Styles Level 3 # counter-style-symbols

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`additive-symbols`	91	91	33	77	17	91	33	64	17	16.0	91

См. также

@counter-style дескрипторы: system, symbols, negative, prefix, suffix, range, pad, speak-as, fallback
Свойства стиля списка: list-style, list-style-image, list-style-position
symbols() функция для создания анонимных стилей счётчика
Модуль CSS counter styles

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols