Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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 : CSS1
2
3
4 | /* Rajoutera "Titre :" avant la balise <h1> */
h1:before {
content : "Titre :";
}
|
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 ! 
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 : HTML1 | <h1><span class="chapitre">Chapitre 8 :</span> Vive le fromage</h1>
|
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 : HTML1
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>
|
Bon, c'est parti, on va commencer !
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 : CSS1
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 : CSS1
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 : CSS1
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 : CSS1
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 : CSS1
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.
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 : CSS1
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 : CSS1
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.
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) ". ";
}
|
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).
De petites améliorations pour notre compteur
counter-reset
La propriété
counter-reset
permet d'initialiser plusieurs compteurs à la fois.
Code : CSS1 | 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 : CSS1
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 possible | Action | Exemple |
|---|
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. |
Les compteurs imbriqués
Mais que nous apportent de plus les compteurs imbriqués ?
Les conteurs imbriqués seront utiles pour les listes. Vous pouvez-voir une exemple d'emploi de ceux-ci à gauche de l'écran.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
385 Zéros connectés |
7 requêtes |
0.4556s (0.4428s)
