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) |
Обработка значения | как указано |
Синтаксис
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
<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 |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
list-style
,list-style-image
,list-style-position
symbols()
, функциональная запись, создающая анонимные стили счётчиков.