diff options
Diffstat (limited to 'files/fr/web/css/@counter-style')
| -rw-r--r-- | files/fr/web/css/@counter-style/additive-symbols/index.html | 87 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/fallback/index.html | 90 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/index.html | 171 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/negative/index.html | 99 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/pad/index.html | 98 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/prefix/index.html | 95 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/range/index.html | 122 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/speak-as/index.html | 129 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/suffix/index.html | 93 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/symbols/index.html | 108 | ||||
| -rw-r--r-- | files/fr/web/css/@counter-style/system/index.html | 340 |
11 files changed, 1432 insertions, 0 deletions
diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.html b/files/fr/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..51c9cb0094 --- /dev/null +++ b/files/fr/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,87 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/additive-symbols +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>additive-symbols</code></strong>, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur <code>additive</code>. Le descripteur <code>additive-symbols</code> définit des <em>tuples additifs</em>. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">de notation additive</a> tels que les nombres romains.</p> + +<pre class="brush: css no-line-numbers">additive-symbols: 3 "0"; +additive-symbols: 3 "0", 2 "\2E\20"; +additive-symbols: 3 "0", 2 url(symbol.png); +</pre> + +<p>Lorsque la valeur du descripteur <code>system</code> est <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>, c'est le descripteur <code>symbols</code> qui est utilisé à la place de <code>additive-symbols</code> afin de définir les symboles utilisés pour le compteur.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style additive-symbols-example { + system: additive; + additive-symbols: V 5, IV 4, I 1; +} +.exemple { + list-style: additive-symbols-example; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <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-symbols', 'additive-symbols')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html new file mode 100644 index 0000000000..cf00348402 --- /dev/null +++ b/files/fr/web/css/@counter-style/fallback/index.html @@ -0,0 +1,90 @@ +--- +title: fallback +slug: Web/CSS/@counter-style/fallback +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/fallback +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>fallback</code></strong>, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur <code>decimal</code> qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :</p> + +<ul> + <li>Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.</li> + <li>Lorsque le descripteur {{cssxref('system')}} vaut <code>fixed</code> et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.</li> +</ul> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Valeurs avec un mot-clé */ +fallback: lower-alpha; +fallback: custom-gangnam-style; +</pre> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style fallback-example { + system: fixed; symbols: "\24B6" "\24B7" "\24B8"; + fallback: upper-alpha; +} +.exemple { + list-style: fallback-example; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html" id="htmlOutput"><ul class="exemple"> + <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-fallback', 'fallback')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.fallback")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html new file mode 100644 index 0000000000..12dd1653c3 --- /dev/null +++ b/files/fr/web/css/@counter-style/index.html @@ -0,0 +1,171 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/@counter-style +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> CSS<strong> <code>@counter-style</code></strong> permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle <code>@counter-style</code> explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.</p> + +<pre class="brush: css no-line-numbers">@counter-style thumbs { + system: cyclic; + symbols: "\1F44D"; + suffix: " "; +} + +ul { + list-style: thumbs; +}</pre> + +<p>La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle <code>@counter-style</code> permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Descripteurs">Descripteurs</h3> + +<p>Chaque <code>@counter-style</code> est identifié par un nom et possède un ensemble de descripteurs.</p> + +<dl> + <dt>{{cssxref("@counter-style/system", "system")}}</dt> + <dd>Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/negative", "negative")}}</dt> + <dd>Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt> + <dd>Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt> + <dd>Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/range", "range")}}</dt> + <dd>Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/pad", "pad")}}</dt> + <dd>Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt> + <dd>Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt> + <dd>Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur <code>system</code>. Ainsi, si <code>system</code> vaut <code>fixed</code>, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.<br> + <br> + Cet exemple de règle <code>@counter-style</code> utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.<br> + + <pre class="brush: css">@counter-style winners-list { + system: fixed; + symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); + suffix: " "; +}</pre> + </dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt> + <dd>Certains symboles définis via le descripteurs <code>symbols</code> sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des <em>tuples additifs</em> décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt> + <dd>Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style circled-alpha { + system: fixed; + symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; + suffix: " "; +}</pre> + +<pre class="brush: css">.exemple { + list-style: circled-alpha; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> + <li>Six</li> +</ul></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<div class="note"> +<p><strong>Note :</strong> Une page d'exemple avec plus de variables est disponible ici : <a href="https://mdn.github.io/css-examples/counter-style-demo/">https://mdn.github.io/css-examples/counter-style-demo/</a>.</p> +</div> + +<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', '#the-counter-style-rule', 'counter-style')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style")}}</p> + +<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> + +<ul> + <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li> +</ul> + +<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("list-style-type")}}</li> + <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes</li> + <li>Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}</li> + <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">Démonstration pour les styles de compteur</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">code</a>)</li> +</ul> diff --git a/files/fr/web/css/@counter-style/negative/index.html b/files/fr/web/css/@counter-style/negative/index.html new file mode 100644 index 0000000000..375fafa8fb --- /dev/null +++ b/files/fr/web/css/@counter-style/negative/index.html @@ -0,0 +1,99 @@ +--- +title: negative +slug: Web/CSS/@counter-style/negative +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/negative +--- +<div>{{CSSRef}}</div> + +<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> + +<pre class="brush: css no-line-numbers">/* 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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<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> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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>{{CompatibilityTable}}</p> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<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> +</ul> diff --git a/files/fr/web/css/@counter-style/pad/index.html b/files/fr/web/css/@counter-style/pad/index.html new file mode 100644 index 0000000000..ce73abaeca --- /dev/null +++ b/files/fr/web/css/@counter-style/pad/index.html @@ -0,0 +1,98 @@ +--- +title: pad +slug: Web/CSS/@counter-style/pad +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/pad +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>pad</code></strong>, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.</p> + +<p>Le descripteur <code>pad</code> utilise deux paramètres :</p> + +<ul> + <li>un entier indiquant la longueur minimale de la représentation du marqueur</li> + <li>Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.</li> +</ul> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">pad: 3 "0"; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><integer> && <symbol></code></dt> + <dd>La composante <code><integer></code> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <code><symbol></code>.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style pad-example { + system: numeric; + symbols: "0" "1" "2" "3" "4" "5"; + pad: 2 "0"; +} +.exemple { + list-style: pad-example; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <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', '#descdef-counter-style-pad', 'pad')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.pad")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/prefix/index.html b/files/fr/web/css/@counter-style/prefix/index.html new file mode 100644 index 0000000000..25de1edd1c --- /dev/null +++ b/files/fr/web/css/@counter-style/prefix/index.html @@ -0,0 +1,95 @@ +--- +title: prefix +slug: Web/CSS/@counter-style/prefix +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/prefix +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>prefix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Valeurs de symbole */ +prefix: "»"; +prefix: "Page"; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><symbol></code></dt> + <dd>Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style chapitres { + system: numeric; + symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; + prefix: 'Chapitre '; +} + +.exemple { + list-style: chapitres; + padding-left: 15ch; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <li>Au fond du terrier</li> + <li>La mare aux larmes</li> + <li>La course cocasse</li> + <li>L'habitation du lapin blanc</li> + <li>Conseils d'une chenille</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', '#descdef-counter-style-prefix', 'prefix')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.prefix")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html new file mode 100644 index 0000000000..92043910dc --- /dev/null +++ b/files/fr/web/css/@counter-style/range/index.html @@ -0,0 +1,122 @@ +--- +title: range +slug: Web/CSS/@counter-style/range +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/range +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>range</strong></code>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de <code>range</code> peut être <code>auto</code> ou une liste de majorants/minorants, séparés par des virgules.</p> + +<p>Si <code>range</code> vaut <code>auto</code> :</p> + +<ul> + <li>Lorsque le descripteur <code>system</code> vaut <code>cyclic</code>, <code>numeric</code> ou <code>fixed</code>, l'intervalle considéré sera entre moins l'infini et plus l'infini.</li> + <li>Si <code>system</code> vaut <code>alphabetic</code> ou <code>symbolic</code>, l'intervalle considéré s'étendra entre 1 et l'infini.</li> + <li>Si <code>system</code> vaut <code>additive</code>, l'intervalle considéré ira de 0 à l'infini.</li> + <li>Enfin, lorsque <code>system</code> vaut <code>extends</code>, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.</li> +</ul> + +<p>Si <code>range</code> est défini par des entiers, on peut utiliser le mot-clé <code>infinite</code> pour indiquer l'infini. Lorsque <code>infinite</code> est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +range: auto; + +/* Valeurs encadrant un intervalle */ +range: 2 5; +range: infinite 10; +range: 6 infinite; +range: infinite infinite; + +/* Valeurs indiquant plusieurs intervalles */ +range: 2 5, 8 10; +range: infinite 6, 10 infinite; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd> + <dt><code>[ [ | infinite ]{2} ]#</code></dt> + <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.</dd> + <dd>Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style range-multi-example { + system: cyclic; + symbols: "\25A0" "\25A1"; + range: 2 4, 7 9; +} + +.exemple { + list-style: range-multi-example; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> + <li>Six</li> + <li>Sept</li> + <li>Huit</li> + <li>Neuf</li> + <li>Dix</li> +</ul></pre> + +<p>Résultat</p> + +<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-range", "range")}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.range")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/speak-as/index.html b/files/fr/web/css/@counter-style/speak-as/index.html new file mode 100644 index 0000000000..d3a7631b4e --- /dev/null +++ b/files/fr/web/css/@counter-style/speak-as/index.html @@ -0,0 +1,129 @@ +--- +title: speak-as +slug: Web/CSS/@counter-style/speak-as +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/speak-as +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>speak-as</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.</p> + +<p>Ce descripteur pourra prendre les valeurs <code>auto</code>, <code>bullets</code>, <code>numbers</code>, <code>words</code>, <code>spell-out</code> ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Valeurs avec un mot-clé */ +speak-as: auto; +speak-as: bullets; +speak-as: numbers; +speak-as: words; +speak-as: spell-out; + +/* Nom d'un autre style @counter-style */ +speak-as: <counter-style-name>; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Dans ce cas, la valeur réelle de <code>speak-as</code> sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} : + <ul> + <li>Si <code>system</code> vaut <code>alphabetic</code>, <code>speak-as</code> sera alors synonyme de <code>spell-out</code>.</li> + <li>Si <code>system</code> vaut <code>cyclic</code>, <code>speak-as</code> sera alors synonyme de <code>bullets</code>.</li> + <li>Si <code>system</code> vaut <code>extends</code>, la valeur de <code><em>speak-as</em></code> sera la même que celle correspondante à <code>auto</code> dans le style étendu.</li> + <li>Dans les autres cas, le comportement de <code>numbers</code> sera utilisé.</li> + </ul> + </dd> + <dt><code>bullets</code></dt> + <dd>Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.</dd> + <dt><code>numbers</code></dt> + <dd>La valeur numérique du compteur sera énoncée dans la langue du document.</dd> + <dt><code>words</code></dt> + <dd>L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.</dd> + <dt><code>spell-out</code></dt> + <dd>L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur <code>numbers</code>.</dd> + <dt><code><counter-style-name></code></dt> + <dd>Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de <code>speak-as</code> de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de <code>auto</code>.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style speak-as-exemple { + system: fixed; + symbols: ; + suffix: " "; + speak-as: numbers; +} + + +.exemple { + list-style: speak-as-exemple; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <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="Accessibilité">Accessibilité</h2> + +<p>La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.</p> + +<ul> + <li><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS, CSS Tricks</a></li> +</ul> + +<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-speak-as', 'speak-as')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.speak-as")}}</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 qui permet de créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/suffix/index.html b/files/fr/web/css/@counter-style/suffix/index.html new file mode 100644 index 0000000000..a39b699c0d --- /dev/null +++ b/files/fr/web/css/@counter-style/suffix/index.html @@ -0,0 +1,93 @@ +--- +title: suffix +slug: Web/CSS/@counter-style/suffix +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/suffix +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>suffix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera <code>"\2E\20"</code> (un point « . » suivi par un espace).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Une valeur de type <symbol> */ +suffix: ""; +suffix: ") "; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<dl> + <dt><code><symbol></code></dt> + <dd>Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("<string>")}}, {{cssxref("<image>")}} ou {{cssxref("<custom-ident>")}}.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style options { + system: fixed; + symbols: A B C D; + suffix: ") "; +} + +.exemple { + list-style: options; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Autre</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', '#descdef-counter-style-suffix', 'suffix')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.suffix")}}</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 utilisée pour créer des styles de compteur anonymes.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/symbols/index.html b/files/fr/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..2440d1a430 --- /dev/null +++ b/files/fr/web/css/@counter-style/symbols/index.html @@ -0,0 +1,108 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/symbols +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>symbols</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.</p> + +<pre class="brush: css no-line-numbers">symbols: A B C D E; +symbols: "\24B6" "\24B7" "\24B8" D E; +symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; +symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg'); +symbols: indic-numbers; +</pre> + +<p>Le descripteur <code>symbols</code> doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>. Lorsque <code>system</code> vaut <code>additive</code>, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.</p> + +<ul> +</ul> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<ul> + <li>Des chaînes de caractères ({{cssxref("<string>")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon <code>"\24B6"</code>.</li> + <li>Des images ({{cssxref("<image>")}}) en utilisant la notation fonctionnelle <code>url(chemin-vers-image.png)</code>. <strong>Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.</strong></li> + <li>Des identifiants ({{cssxref("<custom-ident>")}})</li> +</ul> + +<dl> + <dt><code><symbol></code></dt> + <dd>Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur <code>symbols</code> peut être :</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style symbols-exemple { + system: fixed; + symbols: A "1" "\24B7" D E; +} + +.exemple { + list-style: symbols-exemple; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="exemple"> + <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-symbols', 'symbols')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.symbols")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("@counter-style")}},</li> + <li>{{cssxref("list-style")}},</li> + <li>{{cssxref("list-style-image")}},</li> + <li>{{cssxref("list-style-position")}},</li> + <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,</li> + <li>{{cssxref("url()", "url()")}}.</li> +</ul> diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html new file mode 100644 index 0000000000..378154364d --- /dev/null +++ b/files/fr/web/css/@counter-style/system/index.html @@ -0,0 +1,340 @@ +--- +title: system +slug: Web/CSS/@counter-style/system +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@counter-style/system +--- +<div>{{CSSRef}}</div> + +<p>La descripteur <strong><code>system</code></strong>, utilisé avec <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">la règle @</a> {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.</p> + +<pre class="brush: css">/* Valeurs avec un mot-clé */ +system: cyclic; +system: numeric; +system: alphabetic; +system: symbolic; +system: additive; +system: fixed; + +/* Combinaison de valeurs */ +system: fixed 3; +system: extends decimal; +</pre> + +<p>Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Ce descripteur peut prendre l'une de ces trois formes :</p> + +<ul> + <li>Un des mots-clés parmi <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code>, <code>additive</code>, <code>fixed</code></li> + <li>Le mot-clé <code>fixed</code> avec un entier</li> + <li>Le mot-clé <code>extends</code> avec un nom correspondant à un {{cssxref("@counter-style")}}.</li> +</ul> + +<dl> + <dt><code>cyclic</code></dt> + <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.</dd> + <dt><code>fixed</code></dt> + <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd> + <dt><code>symbolic</code></dt> + <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd> + <dt><code>alphabetic</code></dt> + <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.<br> + <br> + Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd> + <dt><code>numeric</code></dt> + <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc.<br> + <br> + Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd> + <dt><code>additive</code></dt> + <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.<br> + <br> + Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.</dd> + <dd> + <p>On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.</p> + </dd> + <dt><code>extends</code></dt> + <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.<br> + <br> + Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.</dd> + <dd>Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_cyclic">Utilisation de <code>cyclic</code></h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">@counter-style fisheye { + system: cyclic; + symbols: ◉; + suffix: " "; +} + +.list { + list-style: fisheye; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_cyclic')}}</p> + +<h3 id="Utilisation_de_fixed">Utilisation de <code>fixed</code></h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">@counter-style circled-digits { + system: fixed; + symbols: ➀ ➁ ➂; + suffix: ' '; +} + +.list { + list-style: circled-digits; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_fixed')}}</p> + +<h3 id="Utilisation_de_symbolic">Utilisation de <code>symbolic</code></h3> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">@counter-style abc { + system: symbolic; + symbols: a b c; + suffix: ". "; +} + +.list { + list-style: abc; +} +</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul></pre> + +<h4 id="Résultat_3">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_symbolic')}}</p> + +<h3 id="Utilisation_de_alphabetic">Utilisation de <code>alphabetic</code></h3> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css">@counter-style abc { + system: alphabetic; + symbols: a b c; + suffix: ". "; +} + +.list { + list-style: abc; +} +</pre> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul> +</pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_alphabetic')}}</p> + +<h3 id="Utilisation_de_numeric_avec_des_lettres">Utilisation de <code>numeric</code> avec des lettres</h3> + +<h4 id="CSS_5">CSS</h4> + +<pre class="brush: css">@counter-style abc { + system: numeric; + symbols: a b c; + suffix: ". "; +} + +.list { + list-style: abc; +}</pre> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul></pre> + +<h4 id="Résultat_5">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}</p> + +<h3 id="Utilisation_de_numeric_avec_des_chiffres">Utilisation de <code>numeric</code> avec des chiffres</h3> + +<h4 id="CSS_6">CSS</h4> + +<pre class="brush: css">@counter-style numbers { + system: numeric; + symbols: 0 1 2 3 4 5 6 7 8 9; + suffix: ". "; +} + +.list { + list-style: numbers; +} +</pre> + +<h4 id="HTML_6">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul></pre> + +<p>{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}</p> + +<h3 id="Utilisation_de_additive">Utilisation de <code>additive</code></h3> + +<h4 id="CSS_7">CSS</h4> + +<pre class="brush: css">@counter-style upper-roman { + system: additive; + range: 1 3999; + additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; +} + +.list { + list-style: upper-roman; +} +</pre> + +<h4 id="HTML_7">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul> +</pre> + +<h4 id="Résultat_6">Résultat</h4> + +<p>{{EmbedLiveSample('Utilisation_de_additive')}}</p> + +<h3 id="Combinaison_avec_extends">Combinaison avec <code>extends</code></h3> + +<h4 id="CSS_8">CSS</h4> + +<pre class="brush: css">@counter-style alpha-modified { + system: extends lower-alpha; + prefix: "("; + suffix: ") "; +} + +.list { + list-style: alpha-modified; +} +</pre> + +<h4 id="HTML_8">HTML</h4> + +<pre class="brush: html"><ul class="list"> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> + <li>Quatre</li> + <li>Cinq</li> +</ul> +</pre> + +<h4 id="Résultat_7">Résultat</h4> + +<p>{{EmbedLiveSample('Combinaison_avec_extends')}}</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> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.counter-style.system")}}</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 utilisée pour créer des styles de compteur anonymes.</li> +</ul> |