Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

symbols() - Fonction CSS

symbols()

Résumé des caractéristiques de la fonction symbols()

Description rapide
Définit tous les paramètres d'une numérotation
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Module W3C
Module CSS - Styles de compteurs

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

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.

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

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

symbols(
Schéma syntaxique de la fonction symbols()Syntaxe de la fonction symbols(), utilisable pour définir des numérotation personnalisées en CSS. cyclic cyclic numeric numeric alphabetic alphabetic symbolic symbolic fixed fixed 'c' 'c' url(urlurl(url)
)
  • 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. Tus 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 Ê.

    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 à la page sur les Object pour trouver les codes ou copier les caractères.

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

    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

    • Un

    • Deux

    • Trois

    • Quatre

    • Cinq

    • Six

    • Sept
  • list-style-type: symbols(numeric '⭕' '🔴' '🔵'...); t c1 c2 c3

    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

    • Un

    • Deux

    • Trois

    • Quatre

    • Cinq

    • Six

    • Sept
  • list-style-type: symbols(alphabetic '⭕' '🔴' '🔵'...); t c1 c2 c3

    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 '⭕' '🔴' '🔵'...); t c1 c2 c3

    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 '⭕' '🔴' '🔵'...); t c1 c2 c3

    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.

Voici quelques exemples de numérotation personnalisées faisant appel à des symboles graphiques.

  • 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

Simulateur.

list-style-type :

Compatibilité et prise en charge par les navigateurs.

Encore peu de navigateurs traitent correctement la fonction symbols(). Il faut distinguer son usage avec la propriété list-style-type et son usage avec la règle @counter-style.

Colonne 1
Prise en charge de la fonction symbols() utilisée comme valeur pour la propriété list-style-type.
Colonne 2
Prise en charge du descripteur symbols utilisé dans une directive @counter-style.
1
symbols() /
list-style-type
2
symbols /
@counter-style
Estimation de la prise en charge en pourcentage du parc actuel.
3%
10%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que symbols().

Les spécifications CSS éditées par le W3C sont organisées en modules. symbols() fait partie du Module CSS - Styles de compteurs (CSS Counter Styles). Les définitions suivantes sont également décrites dans ce même module.

Directives.

Définition d'un compteur personnalisé.