CSS - Fonction symbols()
symbols()
est une fonction du langage CSS. Elle définit une numérotation, c'est à dire la
logique du comptage (alphabétique, numérique, etc) et les symboles à utiliser.
Cette numérotation pourra ensuite être employée pour une liste à numéros.
Description de la fonction symbols()
.
La fonction symbols()
définit une numérotation, qui pourra être utilisée par exemple avec
une propriété list-style-type
pour numéroter une série de balises li.
La directive @counter-style
permet également de définir une numérotation
tout en offrant encore plus de possibilités de paramétrage.
En particulier les numérotations définies par @counter-style
sont nommées et peuvent donc
être ré-utilisées à plusieurs endroits.
Principe.
Toutes les numérotations se construisent à partir de symboles qui peuvent être des caractères ou des
images.
Par exemple, la numérotation classique utilise les chiffres comme symboles : 0,1,2,3,4,5,6,7,8,9.
Le nombre de symboles peut être quelconque mais il faut en général qu'il y en ai au moins deux.
Il faut ensuite définir comment se poursuit la numérotation lorsque le dernier symbole est atteint.
Plusieurs possibilités sont proposées. Le mieux est de les étudier sur un exemple.
Imaginons une numérotation basée sur les trois symboles suivant : ⭕ 🔴 🔵.
Voici comment se construit la numérotation dans chacun des modes.
Remarque : à l'heure actuelle peu de navigateurs traitent la fonction symbols()
.
Les exemples ci-dessous sont des simulations, afin d'être lisibles sur tous les navigateurs.
numeric
: le premier symbole est considéré comme valant zéro.
La numérotation commence donc par le deuxième symbole (considéré comme valant 1).
Lorsque le dernier symbole est atteint on continue avec deux symboles.
Ce type de numérotation est couramment employé avec des chiffres.
Deux symboles au minimum doivent être précisés.
Un
Deux
Trois
Quatre
Cinq
Six
Sept
alphabetic
: le premier symbole est considéré comme la première valeur.
Quand le dernier symbole est atteint on continue avec deux symboles. Etc.
Deux symboles au minimum doivent être précisés.
Un
Deux
Trois
Quatre
Cinq
Six
Sept
cyclic
: lorsque le dernier symbole est atteint, on recommence
tout simplement au premier symbole.
Dans ce type de numérotation, il est possible de ne préciser qu'un seul
symbole, qui sera utilisé à chaque occurence (cela revient à définir une puce).
Un
Deux
Trois
Quatre
Cinq
Six
Sept
fixed
: lorsque le dernier symbole est atteint, la numérotation
se poursuit en numérique classique.
Il n'y a pas de limites minimale ou maximale sur le nombre de symboles mais en
principe on en indique au moins autant qu'il y a d'éléments à numéroter.
Un
Deux
Trois
Quatre
Cinq
Six
Sept
symbolic
: lorsque la liste des symboles a été entièrement
explorée, on reprend en doublant les symboles, puis en les triplant, etc.
Si un seul symbole est précisé, le nombre de symboles affichés correspondra
au numéro de l'élément.
Un
Deux
Trois
Quatre
Cinq
Six
Sept
La fonction symbols() peut être utilisée avec :
list-style
: Résumé des caractéristiques de listes à puces ou numérotées.list-style-type
: Définit le type des puces ou de la numérotation.
Syntaxe de la fonction symbols()
.
- list-style-type: symbols(decimal '⓵' '⓶' '⓷'...); t s1 s2 s3
La syntaxe de
symbols()
est composée d'un premier paramètre indiquant le type de numérotation, suivi d'une série de symboles.t
indique le type de numérotation, à choisir parmi les valeurs décrites plus haut :numeric
,alphabetic
,cyclic
,fixed
,symbolic
.- Les valeurs
s1
,s2
etc. sont les symboles à utiliser pour la numérotation. Ce sont en principe des caractères uniques mais on peut envisager de courts textes.
Il s'agit souvent de caractères spéciaux qui ne figurent pas sur les claviers, on utilisera leur code hexadécimal avec la syntaxe :
/'\a9'
pour le caractère © ou
'\ca'
pour le caractère Ê.
Des problèmes se posent lorsque le code hexadécimal des symboles comporte plus de 2 digits. La solution est de copier-coller le caractère lui-même dans le code CSS. Reportez-vous à notre Outil de recherche de caractères pour trouver les codes ou copier les caractères.
- list-style-type: symbols(decimal url(...) url(...) url(...)...); ⚠ t i1 i2 i3
Les valeurs
i1
,i2
, etc. sont des images qui seront utilisées à la place des symboles. Cette fonctionnalité ne semble pour le moment gérée par aucun navigateur.
Exemples.
Cliquez sur les exemples pour afficher leur code CSS.
- Janvier
- Février
- Mars
- Avril
- Mai
- Juin
- Juillet
- Août
- Septembre
- Octobre
- Novembre
- Décembre
- Janvier
- Février
- Mars
- Avril
- Mai
- Juin
- Juillet
- Août
- Septembre
- Octobre
- Novembre
- Décembre
- Janvier
- Février
- Mars
- Avril
- Mai
- Juin
- Juillet
- Août
- Septembre
- Octobre
- Novembre
- Décembre
Compatibilité et prise en charge par les navigateurs.
Encore peu de navigateurs traitent correctement la fonction symbols()
Notez que la directive @counter-style
est bien mieux reconnue.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Listes à puces ou à numéros - Propriétés.
list-style
: Résumé des caractéristiques de listes à puces ou numérotées.list-style-image
: Définit une image à utiliser à la place des puces.list-style-position
: Définit l'emplacement des marqueurs de listes (puces ou numéros).list-style-type
: Définit le type des puces ou de la numérotation.
Listes à puces ou à numéros - Directives.
@counter-style
: Définition d'un compteur personnalisé.
Listes à puces ou à numéros - Fonctions.
counter()
: Renvoie la valeur actuelle d'un compteur.counters()
: Renvoie la valeur d'un compteur hiérarchique.