aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/counter()/index.html
blob: 2558f46df8e44c72231790e448d5998f7b1c35a8 (plain)
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
---
title: counter()
slug: Web/CSS/counter()
tags:
  - CSS
  - Compteur CSS
  - Fonction
  - Reference
translation_of: Web/CSS/counter()
---
<div>{{CSSRef}}</div>

<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("&lt;string&gt;")}} est attendue.</p>

<pre class="notranslate">/* Usage simple */
counter(nomcompteur);

/* Modifier le type d'affichage du compteur */
counter(nomcompteur, upper-roman)</pre>

<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p>

<div class="blockIndicator note">
<p><strong>Note  :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p>

<p>Veillez à consulter <a href="#Browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p>
</div>

<h2 id="Syntaxe">Syntaxe</h2>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
 <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
 <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
 <dd>Un nom de style de compteur ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd>
 <dt><code>none</code></dt>
 <dd>Représente la chaîne de caractère vide.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{CSSSyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules">Comparaison entre compteur par défaut et chiffres romains majuscules</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html; notranslate">&lt;ol&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css; highlight[2] notranslate">ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
               counter(listCounter, upper-roman) "]";
}</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}</p>

<h3 id="Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule">Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;ol&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">ol {
  counter-reset: count;
}

li {
  counter-increment: count;
}

li::after {
  content: "[" counter(count, decimal-leading-zero) "] == ["
               counter(count, lower-alpha) "]";
}</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "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#counters", "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.counter")}}</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/counters">counters()</a></code></li>
</ul>