Propriété CSS3 : counters

css3 counter

Counter est une propriété applicable à tout élément parent, la propriété counters sert à la numérotation des titres et des listes. Inexploitée, cette propriété intégrant CSS3 est négligée par de nombreux navigateurs comme IE même dans sa dernière version, la version 10. Même les navigateurs Firefox et Webkit doivent être préfixé pour pouvoir utiliser la propriété counters.

La propriété counter-reset

Cette propriété CSS offre la possibilité d’activer des compteurs avec un identifiant ainsi qu’un numéro d’initialisation facultatif. Par défaut, ce numéro est égal à 0.

Dans l’exemple sur la ligne 1, un compteur titre1 est créé.
Dans l’exemple sur la ligne 2, quatres compteurs sont créés.
Dans l’exemple sur la ligne 3, un compteur titre1 qui débutera à 3 et un compteur titre2 qui débutera à 0 sont créés.

La propriété counter-increment

Cette propriété CSS permet l’incrémentation du compteur défini avec la propriété counter-reset. Pour incrémenter un élément, il ne suffit que de nommer le compteur à incrémenter ainsi que d’indiquer l’augmentation de la valeur de l’élément.

Dans l’exemple sur la ligne 1, le compteur titre1 est incrémenté de 1.
Dans l’exemple sur la ligne 2, le compteur titre1 est incrémenté de 5.
Dans l’exemple sur la ligne 3, les compteurs titre1 et titre2 sont incrémentés de 1.

L’affichage des compteurs

Pour pouvoir apparaitre comme une liste, il est important que les compteurs soient représentés comme tels. Pour cette représentation, les pseudo-éléments comme ::after, ::before ou d’autres sont détournés pour être associés à la fonction counter.

Dans l’exemple sur la ligne 1, tous les h1 utilise le compteur titre1.
Dans l’exemple sur la ligne 2, tous les h1 utilise le compteur titre1 lequel est suivi d’un tiret.
Dans l’exemple sur la ligne 3, tous les h2 utilisent le compteur titre1, suivi d’un point, suivi du compteur titre2, suivi d’un tiret.

Les styles de compteurs

Par défaut, le style des compteurs est de type décimal. Toutefois, il existe d’autres styles de numérotation pouvant être utilisés :

  • decimal-leading-zero:01,02,03…
  • lower-roman : i,ii,iii,iv,v…
  • upper-roman : I,II,III,IV…
  • lower-latin ou lower-alpha : a,b,c…
  • upper-latin ou upper-alpha : A,B,C…
  • lower-greek : α, β, γ…

Un exemple pratique

Liste exemple par la propriété CSS count

Liste exemple par la propriété CSS count

Liste exemple par la propriété CSS count

Liste exemple par la propriété CSS counte

Liste exemple par la propriété CSS count

Liste exemple par la propriété CSS count

Liste exemple par la propriété CSS count

Répondre