diff options
Diffstat (limited to 'files/fr/web/css/@counter-style/negative/index.md')
| -rw-r--r-- | files/fr/web/css/@counter-style/negative/index.md | 118 |
1 files changed, 53 insertions, 65 deletions
diff --git a/files/fr/web/css/@counter-style/negative/index.md b/files/fr/web/css/@counter-style/negative/index.md index 673163de4e..93821f1fd6 100644 --- a/files/fr/web/css/@counter-style/negative/index.md +++ b/files/fr/web/css/@counter-style/negative/index.md @@ -7,89 +7,77 @@ tags: - Reference translation_of: Web/CSS/@counter-style/negative --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Le descripteur <strong><code>negative</code></strong>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.</p> +Le descripteur **`negative`**, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative. -<pre class="brush: css no-line-numbers">/* Valeurs représentant les symboles */ +```css +/* Valeurs représentant les symboles */ negative: "-"; /* Préfixe '-' si la valeur est négative */ negative: "(" ")"; /* Entoure la valeur avec '(' et ')' si elle est négative */ -</pre> +``` -<p>Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur <code>negative</code> n'a d'effet que si la valeur du descripteur <code>system</code> est <code>symbolic</code>, <code>alphabetic</code>, <code>numeric</code>, <code>additive</code> ou <code>extends</code> et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur <code>negative</code> est fourni, il est ignoré.</p> +Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur `negative` n'a d'effet que si la valeur du descripteur `system` est `symbolic`, `alphabetic`, `numeric`, `additive` ou `extends` et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur `negative` est fourni, il est ignoré. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<dl> - <dt>Premier symbole</dt> - <dd>Le préfixe (type {{cssxref("<symbol>")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.</dd> - <dt>Deuxième symbole {{optional_inline}}</dt> - <dd>Si cette valeur (type {{cssxref("<symbol>")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.</dd> -</dl> +- Premier symbole + - : Le préfixe (type {{cssxref("<symbol>")}}) à ajouter à la représentation lorsque la valeur du compteur est négative. +- Deuxième symbole {{optional_inline}} + - : Si cette valeur (type {{cssxref("<symbol>")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative. -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">@counter-style neg { +```css +@counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .exemple { list-style: neg; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><ul class="exemple" start="-3"> - <li>Un</li> - <li>Deux</li> - <li>Trois</li> - <li>Quatre</li> - <li>Cinq</li> -</ul></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemples')}}</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 Counter Styles', '#counter-style-system', 'system')}}</td> - <td>{{Spec2('CSS3 Counter Styles')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.at-rules.counter-style.negative")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{cssxref("list-style")}},</li> - <li>{{cssxref("list-style-image")}},</li> - <li>{{cssxref("list-style-position")}},</li> - <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.</li> +} +``` + +### HTML + +```html +<ul class="exemple" start="-3"> + <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-system', 'system')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.at-rules.counter-style.negative")}} + +## Voir aussi + +- {{cssxref("list-style")}}, +- {{cssxref("list-style-image")}}, +- {{cssxref("list-style-position")}}, +- {{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes. |