aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/symbols/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/css/symbols/index.md')
-rw-r--r--files/fr/web/css/symbols/index.md62
1 files changed, 62 insertions, 0 deletions
diff --git a/files/fr/web/css/symbols/index.md b/files/fr/web/css/symbols/index.md
new file mode 100644
index 0000000000..73d62466d7
--- /dev/null
+++ b/files/fr/web/css/symbols/index.md
@@ -0,0 +1,62 @@
+---
+title: symbols()
+slug: Web/CSS/symbols
+tags:
+ - CSS
+ - Fonction
+ - Reference
+translation_of: Web/CSS/symbols()
+original_slug: Web/CSS/symbols()
+---
+{{CSSRef}}
+
+La fonction **`symbols()`** permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction `symbols()` ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.
+
+## Syntaxe
+
+ symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
+
+`<symbols-type>` est l'un des mots-clés suivants :
+
+- `cyclic` : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.
+- `numeric` : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.
+- `alphabetic` : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.
+- `symbolic` : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.
+- `fixed` : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.
+
+## Exemples
+
+### HTML
+
+```html
+<ol>
+ <li>Un</li>
+ <li>Deux</li>
+ <li>Trois</li>
+ <li>Quatre</li>
+ <li>Cinq</li>
+</ol>
+```
+
+### CSS
+
+```css
+ol {
+ list-style: symbols(alphabetic "*" "\2020" "\2021");
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification | Statut | Commentaires |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. |
+
+## Voir aussi
+
+- {{cssxref("@counter-style")}}
+- {{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.