Aller au menu - Aller au contenu

Icône [CSS] Les compteurs

Avatar
Par Avatar Itello
Mise à jour : 22/08/2008
Difficulté : Facile Facile Durée d'étude : 2 heures Creative Commons BY-NC
136 visites depuis 7 jours, classé 496/786
Il est possible grâce aux feuilles de style (CSS) d’insérer des compteurs sur une page web. Ceux-ci permettent de numéroter chapitres, paragraphes ou toute autre balise sans avoir à toucher au code HTML.

Ils vous permettront donc de réaliser une numérotation cohérente et automatisée de vos différentes pages web en modifiant simplement votre feuille de style. Vous pourrez ainsi insérer les fameuses numérotations devant vos titres (I., A), 1 - ou encore a.).

NavigateurCompatibilité
Mozilla Firefox 1.0 et supérieur
Internet Explorer 8.0 et supérieur
Safari 3.0 et supérieur
Opera 8.0 et supérieur


Dans ce tutoriel, je vous expliquerai le fonctionnement des compteurs et vous donnerai diverses idées d’utilisation de ceux-ci. Bonne chance ! :)
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 assez basiques.

Mais pour ceux qui ne les connaissent pas (ou bien qui veulent une petite révision ^^ ), les voici :
  • :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, voire des compteurs.
  • La propriété content permet d'insérer du texte avant (:before) ou après (:after) une balise.

Exemple


Code : CSS
1
2
3
4
/* Rajoutera "Titre :" avant la balise <h1> */
h1:before {
    content : "Titre :";
}
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 plein de titres <h1> .
Vous souhaitez réaliser une présentation semblable à celle des 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.
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 que tout est automatique. 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.
Une petite idée pour la route : utiliser les compteurs pour la feuille de style d’impression de la page. Cela donne un rendu structuré et pro.

Alors, convaincu ?

Partie HTML



La partie HTML vous est offerte car elle ne sera pas à modifier. En effet, nous n’utiliserons que les CSS durant tout le tutoriel.

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 drôle comme coïncidence, mais c'est ce sur quoi va porter la suite de ce tutoriel. :-°

Les compteurs 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



Il faut d'abord donner un nom au compteur. 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 ça :
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 les recommandations 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.
Cela ne fonctionnera donc pas correctement.


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.
Ça aussi, on peut le changer :
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'œil. :lol:

Insertion du compteur



En fait, nous n'avons encore rien changé au niveau de l'apparence du site.
Le plus important reste à faire : l'insertion de notre compteur sur la 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 réaliser cet effet :

1 . Vive le fromage

Ce 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 HTML 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
Eh bien, c’est fini ! :D
Je souhaite remercier les personnes suivantes :
  • les créateurs du premier MC sur le HTML / CSS qui m’ont fait découvrir cette fonction en recherchant sur la Toile ;
  • 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’article de Laurent Denis « Faire des statistiques à l’aide des compteurs CSS ». Il y donne une idée originale concernant l’utilisation des compteurs.
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Des techniques modernes pour l'agencement en colonnes
Icône
Customisons notre diaporama… (1/2)
Icône
Préambule
Icône
L'art de l'impression
Retour en haut
19 commentaires pour "[CSS] Les compteurs"
Note moyenne : 4.00 / 4 (8 votes)
Pseudo Commentaire
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.
Image utilisateur Suivez-moi également sur Twitter ! J’y parle de langue française, entre autres.
 
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
Image utilisateur Suivez-moi également sur Twitter ! J’y parle de langue française, entre autres.
 
Hors ligne jonglebel # Posté le 12/04/2012 à 15:02:52

mr6 bcp

Voir tous les commentaires