Symbols() - Fonction CSS

Schéma syntaxique de symbols().

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• char est une chaîne de caractères, mais le plus souvent un caractère unique.
• url est une URL vers un fichier image.

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. Elle définit également le type de numérotation : numérique classique, alphabétique, etc.

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. Reportez-vous aux syntaxes décrites ci-après.

La valeur symbols() peut être utilisée avec les propriétés suivantes :

• @counter-style : Création d'un compteur personnalisé pouvant être utilisé dans les listes numérotées.
• list-style : Résumé des caractéristiques de listes à puces ou à numéros.
• list-style-type : Définit le type des puces ou de la numérotation.

Syntaxes de la fonction symbols().

• list-style-type: symbols(numeric '⓵' '⓶' '⓷' ...); t c1 c2 c3

  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. Tous ces paramètres sont séparés par des espaces.

  1. t indique le type de numérotation, à choisir parmi les valeurs numeric, alphabetic, cyclic, fixed, symbolic. Si aucun type de numérotation n'est indiqué, il sera fixé à symbolic par défaut.
  2. Les valeurs c1, c2 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 Ê.
     
     

  Une autre solution est de copier-coller le caractère lui-même dans le code CSS. Reportez-vous à la page sur les codes des caractères UTF pour trouver les codes et copier les caractères.

• list-style-type: symbols(symbolic '⭕' '🔴' '🔵' ...);

  Le type de numérotation symbolic parcourt tous les symboles fournis, le premier symbole correspondant au numéro 1, le deuxième symbole au numéro 2, etc. 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é (cas tout de même assez rare), le nombre de symboles affichés correspondra au numéro de l'élément.

  Le premier échantillon ci-après est une simulation, car beaucoup de navigateurs ne traitent pas encore correctement la fonction symbols(). Le deuxième échantillon doit s'afficher à l'identique si votre navigateur est compatible.

  ⭕
  Un

  🔴
  Deux

  🔵
  Trois

  ⭕⭕
  Quatre

  🔴🔴
  Cinq

  🔵🔵
  Six

  ⭕⭕⭕
  Sept
  Simulation
  • 
    Un
  • 
    Deux
  • 
    Trois
  • 
    Quatre
  • 
    Cinq
  • 
    Six
  • 
    Sept
  Numérotation réelle
• list-style-type: symbols(numeric '⭕' '🔴' '🔵' ...);

  Le type de numérotation numeric est le plus classique. 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.

  Le premier échantillon ci-dessous est une simulation. Le deuxième échantillon doit s'afficher à l'identique si le navigateur que vous utilisez est compatible.

  🔴
  Un

  🔵
  Deux

  🔴⭕
  Trois

  🔴🔴
  Quatre

  🔴🔵
  Cinq

  🔵⭕
  Six

  🔵🔴
  Sept
  Simulation
  • 
    Un
  • 
    Deux
  • 
    Trois
  • 
    Quatre
  • 
    Cinq
  • 
    Six
  • 
    Sept
  Numérotation réelle
• list-style-type: symbols(alphabetic '⭕' '🔴' '🔵' ...);

  Comme son nom l'indique, le type de numérotation alphabetic este souvent utilisé avec des lettres. Aucun des symboles n'a la valeur zéro. La numérotation commence donc avec le premier symbole, puis se poursuit avec le deuxième symbole, etc. Quand le dernier symbole est atteint on continue en juxtaposant deux symboles. Etc.
  Deux symboles au minimum doivent être précisés.

  Si votre navigateur traite correctement la fonction symbols() la numérotation dite "réelle" ci-dessous doit être identique à la simulation.

  ⭕
  Un

  🔴
  Deux

  🔵
  Trois

  ⭕⭕
  Quatre

  ⭕🔴
  Cinq

  ⭕🔵
  Six

  🔴⭕
  Sept
  Simulation
   
  • 
    Un
  • 
    Deux
  • 
    Trois
  • 
    Quatre
  • 
    Cinq
  • 
    Six
  • 
    Sept
  Numérotation réelle
• list-style-type: symbols(cyclic '⭕' '🔴' '🔵' ...);

  La numérotation cyclic explore dans un premier temps tous les symboles fournis, puis, lorsque le dernier symbole est atteint, elle recommence à l'identique à partir du premier symbole. Dans ce type de numérotation, il est possible de ne préciser qu'un seul symbole, qui sera utilisé à chaque occurrence (cela revient à définir une puce).

  Si votre navigateur traite correctement la fonction symbols() la numérotation dite "réelle" ci-dessous doit être identique à la simulation.

  ⭕
  Un

  🔴
  Deux

  🔵
  Trois

  ⭕
  Quatre

  🔴
  Cinq

  🔵
  Six

  ⭕
  Sept
  Simulation
   
  • 
    Un
  • 
    Deux
  • 
    Trois
  • 
    Quatre
  • 
    Cinq
  • 
    Six
  • 
    Sept
  Numérotation réelle
• list-style-type: symbols(fixed '⭕' '🔴' '🔵' ...);

  La numérotation fixed explore tous les symboles fournis, et 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.

  Si votre navigateur traite correctement la fonction symbols() la numérotation dite "réelle" ci-dessous doit être identique à la simulation.

  ⭕
  Un

  🔴
  Deux

  🔵
  Trois

  4
  Quatre

  5
  Cinq

  6
  Six

  7
  Sept
  Simulation
   
  • 
    Un
  • 
    Deux
  • 
    Trois
  • 
    Quatre
  • 
    Cinq
  • 
    Six
  • 
    Sept
  Numérotation réelle
• 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 avec le fonction symbols().

Voici quelques exemples de numérotation personnalisées.

Simulateur avec la fonction symbols().

Support de la fonction symbols().

Encore peu de navigateurs traitent correctement la fonction symbols(). Il faut distinguer la fonction symbols() utilisée avec la propriété list-style-type ou list-style et le descripteur symbols utilisé avec la directive @counter-style.

Remarques :

(1) N'accepte pas une image en tant que valeur pour les symboles.

1

Fonction
symbols()
utilisée avec
list-style-type

2

Descripteur
symbols()
utilisé avec
@counter-style

Estimation de la prise en charge globale.

2%

14%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

1

Firefox

1

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

Androïd Brower

1

Firefox pour Androïd

1

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction symbols().

• Module CSS -Stylisation des compteurs - Niveau 3

  Introduction de la fonction symbols() conjointement à la propriété list-style-type.
  

  09 Octobre 2012

  Document de travail.

  

  03 Février 2015

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des numérotations personnalisées.

La fonction symbols() est décrite dans la spécification "Module CSS - Styles de compteurs" (CSS Counter Styles).
Ces autres définitions sont également présentées dans ce même module.

Directives :

Descripteurs :