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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: counters()
slug: Web/CSS/counters()
tags:
- CSS
- Fonction
- Reference
translation_of: Web/CSS/counters()
---
<div>{{CSSRef}}</div>
<p>La fonction CSS <code><strong>counters()</strong></code> permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction <code>counters()</code> peut s'utiliser sous deux formes :</p>
<ul>
<li><code>counters(<var>name</var>, <var>string</var>)</code></li>
<li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li>
</ul>
<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string"><string></a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p>
<pre class="notranslate">/* Utilisation simple - style decimal par défaut */
counters(countername, '-');
/* Changement du style d'affichage */
counters(countername, '.', upper-roman)</pre>
<p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p>
<div class="blockIndicator note">
<p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p>
<p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt>{{cssxref("<custom-ident>")}}</dt>
<dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
<dt><code style="white-space: nowrap;"><counter-style></code></dt>
<dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd>
<dt>{{cssxref("<string>")}}</dt>
<dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd>
<dt><code>none</code></dt>
<dd>Représente la chaîne vide.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Style_par_défaut_et_chiffres_romains">Style par défaut et chiffres romains</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content: counters(listCounter, '.', upper-roman) ') ';
}
li::before {
content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
}</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}</p>
<h3 id="Numérotation_décimale_avec_zéro_et_indices_alphabétiques"><dfn>Numérotation décimale (avec zéro) et indices alphabétiques</dfn></h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html; notranslate"><ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; highlight[2] notranslate">ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content: counters(count, '.', upper-alpha) ') ';
}
li::before {
content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(count, ".", lower-alpha);
}</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
<td>{{Spec2("CSS3 Lists")}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.types.counters")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
<li>{{cssxref("counter-reset")}}</li>
<li>{{cssxref("counter-increment")}}</li>
<li>{{cssxref("@counter-style")}}</li>
<li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code></li>
<li>{{cssxref("::marker")}}</li>
</ul>
|
