CSS - Fonction symbols()

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.

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.

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).

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.

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.

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.

  1. t indique le type de numérotation, à choisir parmi les valeurs décrites plus haut : numeric, alphabetic, cyclic, fixed, symbolic.
  2. 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.

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.