diff options
Diffstat (limited to 'files/fr/web/css/counter-set/index.md')
| -rw-r--r-- | files/fr/web/css/counter-set/index.md | 105 |
1 files changed, 43 insertions, 62 deletions
diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md index 2059dc4ad1..a2c2cbe72b 100644 --- a/files/fr/web/css/counter-set/index.md +++ b/files/fr/web/css/counter-set/index.md @@ -7,17 +7,16 @@ tags: - Reference translation_of: Web/CSS/counter-set --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété CSS <strong><code>counter-set</code></strong> définit un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur CSS</a> avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.</p> +La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. -<div class="note"> -<p><strong>Note :</strong> La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.</p> -</div> +> **Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css no-line-numbers">/* Définir "mon-compteur" avec la valeur 0 */ +```css +/* Définir "mon-compteur" avec la valeur 0 */ counter-set: mon-compteur; /* Définir "mon-compteur" avec la valeur -1 */ @@ -34,72 +33,54 @@ counter-set: none; counter-set: inherit; counter-set: initial; counter-set: unset; -</pre> +``` -<p>La propriété <code>counter-set</code> est définit avec l'une de ces deux valeurs :</p> +La propriété `counter-set` est définit avec l'une de ces deux valeurs : -<ul> - <li>Une valeur de type <code><custom-ident></code> qui fournit le nom du compteur, éventuellement suivie d'un entier (<code><integer></code>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.</li> - <li>Le mot-clé <code>none</code>.</li> -</ul> +- Une valeur de type `<custom-ident>` qui fournit le nom du compteur, éventuellement suivie d'un entier (`<integer>`). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace. +- Le mot-clé `none`. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> - <dd>Le nom du compteur à définir ou à modifier.</dd> - <dt>{{cssxref("<integer>")}}</dt> - <dd>La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera <code>0</code>. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.</dd> - <dt><code>none</code></dt> - <dd>Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration <code>counter-set</code> d'une règle moins spécifique.</dd> -</dl> +- {{cssxref("custom-ident", "<custom-ident>")}} + - : Le nom du compteur à définir ou à modifier. +- {{cssxref("<integer>")}} + - : La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera `0`. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur. +- `none` + - : Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration `counter-set` d'une règle moins spécifique. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush:css">h1 { +```css +h1 { counter-set: chapitre section 1 page; /* Les compteurs "chapitre" et "page" sont définis à 0, et le compteur "section" est défini à 1. */ } -</pre> - -<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-set', 'counter-set')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.properties.counter-set")}}</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-increment")}}</li> - <li>{{cssxref("counter-reset")}}</li> - <li>{{cssxref("@counter-style")}}</li> - <li>Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}</li> - <li>{{cssxref("content")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}} | {{Spec2('CSS3 Lists')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.counter-set")}} + +## Voir aussi + +- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) +- {{cssxref("counter-increment")}} +- {{cssxref("counter-reset")}} +- {{cssxref("@counter-style")}} +- Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}} +- {{cssxref("content")}} |