symbols() - Fonction CSS
Résumé des caractéristiques de la 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. Reportez-vous aux syntaxes décrites ci-après.
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(
)
- 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.t
indique le type de numérotation, à choisir parmi les valeursnumeric
,alphabetic
,cyclic
,fixed
,symbolic
. Si aucun type de numérotation n'est indiqué, il sera fixé àsymbolic
par défaut.- 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🔴⭕
SeptSimulation
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⭕
SeptSimulation
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🔵
Trois4
Quatre5
Cinq6
Six7
SeptSimulation
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.
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
.
symbols()
utilisée comme valeur pour la propriété list-style-type
.
symbols
utilisé dans une directive @counter-style
.
symbols()
/list-style-type
symbols
/@counter-style
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.