diff options
Diffstat (limited to 'files/fr/web/css/counter()')
| -rw-r--r-- | files/fr/web/css/counter()/index.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html new file mode 100644 index 0000000000..a53c715337 --- /dev/null +++ b/files/fr/web/css/counter()/index.html @@ -0,0 +1,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("<string>")}} 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("<custom-ident>")}}</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;"><counter-style></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> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<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"><ol> + <li></li> + <li></li> + <li></li> +</ol></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"><ol> + <li></li> + <li></li> + <li></li> +</ol></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> |