additive-symbols

Описание

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

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

Синтаксис

additive-symbols: 3 "0";
additive-symbols:
 3 "0",
 2 "2円E20円";
additive-symbols:
 3 "0",
 2 url(symbol.png);

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

additive-symbols = 
 [ <integer [0,∞]> && <symbol> ] # 

<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;
}

Результат

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

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

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

• list-style, list-style-image, list-style-position
• symbols(), функциональная запись, создающая анонимные стили счётчиков.