1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
---
title: additive-symbols
slug: Web/CSS/@counter-style/additive-symbols
tags:
- CSS
- Descripteur
- Reference
translation_of: Web/CSS/@counter-style/additive-symbols
---
{{CSSRef}}
Le descripteur **`additive-symbols`**, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur `additive`. Le descripteur `additive-symbols` définit des _tuples additifs_. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes [de notation additive](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) tels que les nombres romains.
```css
additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "\2E\20";
additive-symbols: 3 "0", 2 url(symbol.png);
```
Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`, c'est le descripteur `symbols` qui est utilisé à la place de `additive-symbols` afin de définir les symboles utilisés pour le compteur.
## Syntaxe
### Syntaxe formelle
{{csssyntax}}
## Exemples
### CSS
```css
@counter-style additive-symbols-example {
system: additive;
additive-symbols: V 5, IV 4, I 1;
}
.exemple {
list-style: additive-symbols-example;
}
```
### HTML
```html
<ul class="exemple">
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
<li>Quatre</li>
<li>Cinq</li>
</ul>
```
### Résultat
{{EmbedLiveSample('Exemples')}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
| {{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.at-rules.counter-style.additive-symbols")}}
## Voir aussi
- {{cssxref("list-style")}},
- {{cssxref("list-style-image")}},
- {{cssxref("list-style-position")}}
- {{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
|
