Aller au menu - Aller au contenu

Icône [CSS] Les compteurs

Avatar
Par Avatar Itello
Mise à jour : 22/08/2008
Creative Commons BY-NC
133 visites depuis 7 jours , classé 509/777
Il est possible grâce aux feuilles de style (CSS) d'insérer des compteurs sur sa page.
Ceux-ci permettent de numéroter chapitres, paragraphes et bien d'autres choses encore de façon automatique sans même avoir à toucher au code HTML.
Dans ce tuto, je vous expliquerai le fonctionnement des compteurs et vous donnerai diverses idées d'utilisation de ceux-ci.

Utilisation à faire avec parcimonie. Incompatible avec Internet Explorer (y compris dans sa version 7.0).
Niveau : Initié
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Notions à avoir

Pour utiliser les compteurs, il faut connaître certaines notions CSS expliquées dans le cours de M@teo_21.

Mais pour ceux qui ne les connaissent pas (ou bien qui veulent une petite révision ^^ ), les voici.
  • L'utilisation de :before permet d'insérer des éléments avant le contenu de la balise.
    C'est-à-dire qu'on peut rajouter des images, des textes et des compteurs.
  • L'utilisation de la propriété content permet d'insérer du texte avant (:before ) ou après (:after ) notre balise.


Exemple


Code : CSS
1
2
3
4
/* Rajoutera "Titre :" avant la balise <h1> */
h1:before {
    content : "Titre :";
}

Pour plus de précisions : Les pseudo-formats :before et :after par M@teo_21.
Retour en haut

Problème à résoudre

Quoi de mieux qu'un bon exemple pour bien comprendre l'utilité d'un tutoriel ?

Vous avez écrit un super article mais assez long. Celui-ci contient pleins de titres <h1> .
Vous souhaitez faire comme dans les livres en rajoutant des Chapitre x avant vos titres, mais ça sera très très long de le faire pour chacune de vos balises. :(

Sauf en utilisant Super CSS ! :lol:

Pourquoi utiliser les CSS alors qu'on peut faire sans ?

Pour plusieurs raisons. :D
Tout d'abord, vous pourrez, grâce aux multiples feuilles de style faire des présentations différentes, avec ou sans Chapitre x.

Mais ceci marche aussi :
Code : HTML
1
<h1><span class="chapitre">Chapitre 8 :</span> Vive le fromage</h1>

Code : CSS
1
span.chapitre { display : none; }


L'avantage premier de l'utilisation des compteurs, c'est l'automatisme de ceux-ci. Plus rien à faire, les compteurs s'occupent de tout.
De plus, lors d'une longue création ou même d'un site entier, rajouter du code sur toutes les balises de titre est assez inimaginable.
Et tiens, une petite idée pour la route : utiliser les compteurs pour la feuille de style d'impression de la page. Ceci donne un rendu structuré et pro.

Alors, convaincus ?

Partie HTML



La partie HTML vous est offerte d'office car elle ne sera pas à modifier.
En effet, nous n'utiliserons que les CSS.

Code : HTML
1
2
3
4
5
6
7
8
9
<h1>Qualité des pamplemousses vendus</h1>
<p>Les pamplemousses vendus par l'Italie nordique ne sont pas juteux à souhait. Il est tout de même scandaleux qu'aujourd'hui, nous ayons encore à supporter des fruits qui ne sont pas juteux !</p>
 
<h1>Manifestation contre les pamplemousses</h1>
<h2>Cette semaine</h2>
<p>Il faut taper fort et manifester dès aujourd'hui ! Nous devons lutter contre les pamplemousses qui ne sont pas assez juteux !</p>
 
<h2>Plus tard !</h2>
<p>Il ne faudra pas se relâcher, je prévois une manifestation par semaine pendant 150 ans !</p>


Essayer !


Bon, c'est parti, on va commencer !
Retour en haut

Fonctionnement d'un compteur

Pour pouvoir résoudre notre problème, il faut savoir utiliser les compteurs.
C'est donc ce que nous allons apprendre.

On peut insérer des compteurs sur nos pages web.
Ceux-ci permettent de compter (logique ?) le nombre de balises identiques contenues dans notre page web.

Un compteur a besoins d'être :
  • initialisé avant sa première utilisation ;
  • incrémenté ;
  • inséré sur la page web.


Initialiser son compteur



Un compteur porte un nom. Dans notre cas précis, on l'appellera "chapitre".
Avant utilisation, on doit obligatoirement initialiser notre compteur. Pour ceci, nous utilisons la propriété counter-reset :
Code : CSS
1
2
3
body {
  counter-reset: chapitre;  /* Nous initialisons le compteur chapitre */
}

Le compteur a été initialisé sur la balise <body> .
C'est-à-dire que celui-ci est déclenché à partir de la balise <body> et commencera à compter après celle-ci.

Par défaut, le compteur est initialisé à 0 mais on peut changer ceci :
Code : CSS
1
2
body { counter-reset: section -1 } /* Nous initialisons le compteur section à -1 */
body { counter-reset: prout 99 } /* Nous initialisons le compteur prout à 99 */


Opera et Konqueror fonctionnent correctement sans que le compteur soit initialisé.
Mais ces deux navigateurs sont ainsi en contradiction avec la recommandation du w3c.


Sur Mozilla Firefox, un compteur doit être initialisé sur une balise.
Code : CSS
1
2
3
body:before {
  counter-reset: chapitre;
}

Dans le cas suivant, le compteur n'est pas initialisé sur la balise <body> mais avant celle-ci.
Ceci ne fonctionnera donc pas correctement sur Mozilla Firefox.


Incrémenter un nombre



Un code sera plus compréhensible qu'un long discours :
Code : CSS
1
2
3
h1:before {
  counter-increment: chapitre;  /* Ajoute 1 au compteur chapitre */
}

La propriété counter-increment ajoute 1 au compteur par défaut.
On peut évidemment changer ceci :
Code : CSS
1
2
3
h1:before {
  counter-increment: chapitre + 4;  /* Ajoute 4 au compteur chapitre */
}

Mais l'utilité n'est pas visible du premier coup d'oeil. :lol:

Insertion du compteur



Le plus important maintenant : l'insertion de son compteur sur notre page web.
Pour ceci, on utilisera la propriété content :
Code : CSS
1
2
3
h1:before {
  content: counter(chapitre) ".";
}

Vous ne devriez pas avoir de mal à comprendre ce code.
Counter() sert à afficher un compteur avec content , c'est comme url() qui affiche une image.
Les guillemets doubles "..." permettent quant à elles de signaler qu'on affiche du texte normal. Dans notre cas, on affiche un point après le nombre pour faire cet effet :

1 . Vive le fromage

Cr n'est pas compliqué ^^ ...

Un petit résumé



Un petit résumé pour bien tout se remettre en mémoire ?
Code : CSS
1
2
3
4
5
6
7
body {
  counter-reset: chapitre;  /* Nous initialisons le compteur chapitre */
}
h1:before {
  counter-increment: chapitre;  /* Ajoute 1 au compteur chapitre */
  content: counter(chapitre) ".";  /* Affiche notre compteur */
}


Ce sera tout pour le fonctionnement d'un compteur.
Relisez cette partie plusieurs fois si vous en avez besoin.
Nous allons maintenant essayer de résoudre notre problème.
Retour en haut

Résolution du problème

Maintenant que les compteurs n'ont plus le moindre secret pour vous, on peut essayer de résoudre notre petit problème.
Avec le code xHTML donné précédemment, voici le résultat que nous souhaitons obtenir.
C'est vrai que ça peut paraître dur au premier abord, mais avec un peu de réflexion, vous y arriverez.
N'hésitez évidemment pas à relire la partie "Fonctionnement d'un compteur".

Solution du problème



J'arrête de vous faire languir :) et je vous donne la solution que vous devriez avoir :

Secret (cliquez pour afficher)
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
body {
  counter-reset: chapitre;  /* Nous mettons à zéro le compteur chapitre */
}
h1:before {
  counter-increment: chapitre;  /* Ajoute 1 au compteur chapitre */
  content: "Chapitre " counter(chapitre) " : ";
}
h1 {
  counter-reset: section;
  /* On ré-initialise le compteur section à chaque fois qu'on tombe sur la
    balise <h1> */
}
h2:before {
  counter-increment: section;  /* Ajoute 1 au compteur section */
  content: counter(section) ". ";
}


Essayer !


Explication (pour ceux qui n'y sont pas arrivés)



  • Nous initialisons le compteur chapitre (à zéro) dès <body> (body ) grâce à counter-reset .
  • Avant chaque titre <h1> (h1:before ), nous rajoutons 1 au compteur chapitre (counter-increment ) puis nous affichons "Chapitre x :". La première fois, celui-ci affichera donc 1 (le compteur est à zéro et on rajoute 1).
  • Sur chaque titre <h1> , nous mettons à zéro le compteur section qui sert à numéroter les titres <h2> . On veut compter les titres <h2> après un titre <h1> .
  • Avant chaque titre <h2> (h2:before ), nous rajoutons 1 au compteur section (counter-increment ) puis nous affichons "x .". La première fois, celui-ci affichera donc 1 (le compteur est à zéro et on rajoute 1).
Retour en haut

Allez plus loin

De petites améliorations pour notre compteur



counter-reset


La propriété counter-reset permet d'initialiser plusieurs compteurs à la fois.
Code : CSS
1
h1 { counter-reset: section -1 imagenum 99; }

Dans le cas suivant, nous initialisons le compteur section à -1 et le compteur imagenum à 99 sur la balise <h1> .

counter()


Vous pouvez personnaliser le style du numéro pour votre compteur
Code : CSS
1
2
h1 { content : counter(chapitre, upper-roman); }
/* Compteur sous la forme I-II-III */


Et pour savoir quoi mettre à la place de upper-roman :
disc, circle, square, none sont possibles mais il est tout de même plus utile d'afficher des listes numérotées :

Valeurs possibles pour la propriété counter()
Valeur possibleActionExemple
Compatible Internet Explorer :
decimal Nombres décimaux. 1, 2, 3, etc.
lower-roman Chiffres romains minuscules. i, ii, iii, etc.
upper-roman Chiffres romains majuscules. I, II, III, etc.
lower-latin ou lower-alpha Numérotation alphabétique minuscule. a, b, c, etc.
upper-latin ou upper-alpha Numérotation alphabétique majuscule. A, B, C, etc.
Incompatible Internet Explorer :
decimal-leading-zero Nombre sur deux décimales. 01, 02, 03, etc.
lower-greek Numérotation avec l'alphabet grec. ...
Rarement compatible :
hebrew Numérotation hébraïque. ...
georgian Numérotation georgienne. an, ban, gan, etc.
armenian Numérotation arménienne. ...
cjk-ideographic Numérotation en cjk-ideographic. non-disponible
hiragana Numérotation en hiragana. a, i, u, etc.
katakana Numérotation en katakana. A, I, U, etc.
hiragana-iroha Numérotation en hiragana iroha. i, ro, ha, etc.

Source : http://www.laltruiste.com/courscss/listestyle.html


Les compteurs imbriqués


Mais que nous apportent de plus les compteurs imbriqués ?
Image utilisateur
Les conteurs imbriqués seront utiles pour les listes. Vous pouvez-voir une exemple d'emploi de ceux-ci à gauche de l'écran.
Retour en haut
:D Bah, c'est fini !
Je souhaite remercier les personnes suivantes :
  • les créateurs du premier MC sur le xHTML/CSS (voir leur site) qui m'ont fait découvrir cette fonction en recherchant sur le web ;
  • Laurent Jouanneau pour son article Précisions sur les compteurs CSS qui m'a appris qu'il fallait initialiser son compteur ;
  • et vous, pour avoir lu ce tuto jusqu'au bout.

N'hésitez pas à lire l'excellent article de Laurent Denis "Faire des statistiques à l'aide des compteurs CSS" qui donne une bonne idée d'utilisation des compteurs.
Retour en haut

Partager

Lire aussi

Icône
Comment fait-on pour créer des sites web ?
Icône
Customisons notre diaporama… (1/2)
Icône
Quelques notions de CSS
Icône
Mémento des propriétés CSS
Retour en haut
18 commentaires pour "[CSS] Les compteurs"
Note moyenne : 4.00 / 4 (8 votes)
Pseudo Commentaire
Hors ligne Varouj # Posté le 24/05/2008 à 12:13:46
Varouj'z
Avatar

Études : EFREI

 Merci pour ce tutoriel, je ne connaissais pas non plus les compteurs en CSS.
C'est assez pratique.
Sinon il y a une petite faute de frappe :
Citation : Tuto
1 . Vive le fromage

Ce n'est pas compliqué ^^ ...
Image utilisateur
La découpe, plus qu'une passion...
 
Hors ligne EMegamanu # Posté le 10/08/2008 à 23:45:04
Avatar

Études : Université de Lyon

 Héhé ! Merci pour ce tuto. C'es grâce à toi que j'ai enfin pu marcherun compteur CSS sous Firefox ! o/

Tu t'en doutras, j'ai quelques commentaires. Tout d'abord :
Citation : Pas de titre
  • cjk-ideographic Numérotation en cjk-ideographic. non-disponible
  • hiragana Numérotation en hiragana. a, i, u, etc.
  • katakana Numérotation en katakana. A, I, U, etc.
  • hiragana-iroha Numérotation en hiragana iroha. i, ro, ha, etc.


Ne me plait guère. > : (

CJK signifie Chinois Japon Corée. C'est la notation asiatique des nombres la plus courante je crois.
Pour hiragna et katakana il aurait été bien de mettre de vrai caractères japonais comme affichés et non leur retranscription en romanji.

Pour le dernier, je ne sais pas ce que c'est. ^^

En tout cas impec' sous FF3 et Safari chez moi. Opera es à la traine et ne m'affiche que ces chiffres arabes. ^^"

Allez 17/20 ! :)
Image utilisateur
Étudiant en M1 Informatique à l'Université Claude Bernard Lyon I
Diplômé de l'IUT A Informatique à l'Université Claude Bernard Lyon I
 
Hors ligne Itello # Posté le 26/08/2008 à 17:20:29
Ahhhh !
Avatar

Avis : Très bon
close

Ville : Paris
Pays : France métropolitaine

 Si tu souhaites refaire ce tableau, ça ne sera pas de refus.
Je regarderai quant à moi plus tard si je trouve une source plus intéressante.

Pour ce tuto, il faudra que je rajoute des informations sur les compteurs multiples et corrige les quelques erreurs qui m'ont été signalées.
Peut-être même un tableau de compatibilité. Mais plus tard, j'ai la flemme en ce moment.
zCorrecteurs.fr
Image utilisateur Suivez également les zCorrecteurs sur Twitter !
 
Hors ligne Doomsayer # Posté le 19/03/2009 à 21:05:22
Avatar

 Je viens de tester sur IE 8 qui est dispo depuis tout à l'heure, les compteurs semblent désormais fonctionner correctement.
Hors ligne Itello # Posté le 19/03/2009 à 21:17:31
Ahhhh !
Avatar

Avis : Très bon
close

Ville : Paris
Pays : France métropolitaine

 C'est en effet une très bonne nouvelle. Il faudrait vraiment que je modifie mon tuto. Ça attendra tout de même juillet :D
zCorrecteurs.fr
Image utilisateur Suivez également les zCorrecteurs sur Twitter !
 

Voir tous les commentaires