additive-symbols
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2023 г..
Описание
Дескриптор аддитивных символов аналогичен дескриптору symbols() и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора system аддитивное. Дескриптор additive-symbols определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.
Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор symbols используется вместо аддитивных символов для указания символов счётчика.
| Связано с @-правила | @counter-style |
|---|---|
| Начальное значение | n/a (required) |
| Обработка значения | как указано |
Синтаксис
additive-symbols: 3 "0";
additive-symbols:
3 "0",
2 "\2E\20";
additive-symbols:
3 "0",
2 url(symbol.png);
Формальный синтаксис
additive-symbols =
[ <integer [0,∞]> && <symbol> ]#
<integer> =
<number-token>
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Пример
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
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 |
Совместимость с браузерами
Смотрите также
list-style,list-style-image,list-style-positionsymbols(), функциональная запись, создающая анонимные стили счётчиков.