Aller au contenu | Aller au menu | Aller à la recherche

Précisions sur les compteurs CSS

Par Laurentj le vendredi, juillet 29 2005, 11:45 - Technologies Web - Lien permanent

Hier, dans mon billet sur des tests dans deerpark alpha2, j'écrivais que les compteurs CSS étaient buggés. En fait, c'est moi qui avait mal fait ma feuille de style et donc mon test était faux.

Pour rappel, counter-increment permet d'incrémenter un compteur, et counter-reset permet de remettre à zéro un compteur. En fait, c'est une mauvaise interprétation de ma part. Ce n'est pas à proprement parlé d'une remise à zéro. Selon la spécification, il s'agit de la création d'une nouvelle instance d'un compteur. Ce compteur est visible au niveau des balises indiquées par le sélecteur, et de leurs balises filles, mais pas dans le reste du document. Ainsi dans l'exemple :

h2:before { 
   content: counter(chapter) ".";
   counter-increment: chapter;
}
h2 {    counter-reset: section; }
h3:before { 
   content: counter(chapter) "." counter(section) ".";
   counter-increment: section;
}

Je n'ai pas indiqué de counter-reset pour le compteur chapter. Du coup il est crée implicitement à chaque fois que j'y fais appel, donc dans chaque H2. Du coup la numérotation de mes H2 ne se fait pas, et j'ai toujours 1. Pour régler ce problème, il a fallu que je fasse un reset du compteur sur la balise mère de mes h2, qui est dans mon exemple body :

 body { counter-reset: chapter; }

Ainsi le compteur chapter est crée au niveau de la balise body. Il est donc disponible dans les balises filles, et sera donc incrémenté à chaque fois qu'un counter-increment sera indiqué dans les styles des balises filles. Mon exemple s'affiche alors parfaitement dans DeerPark. À noter aussi qu'apparement le reset ne peut être fait dans un selecteur :before, :after etc..

On pourra conclure par :

  1. l'exemple donnée dans les specs du w3c est faux, il manque le reset du compteur chapter
  2. Opera 8 est buggé puisque dans ce navigateur, on n'a pas besoin de faire un reset du compteur chapter alors que c'est contraire à la spec.

Commentaires

1. Le samedi, juillet 30 2005, 12:54 par Nathanael

Merci pour cette explication, j'ignorais l'existence de cette balise qui pourra m'être utile.

2. Le mardi, août 2 2005, 07:52 par Laurent Denis

Petite typo : "pour régler ce problème, il a fallu que je fasse un reset du compteur sur la balise **fille** de mes h2" -> balise "mère", plutôt ;)

Cela dit, c'était bien ta première hypothèse qui était la bonne : en l'absence d'un counter-reset explicite, chaque occurence de l'élément concerné doit ramener le compteur à zéro :

"If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset', implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.

L'implémentation d'Opera ne respecte effectivement pas ce point précis de la spec.

3. Le mardi, août 2 2005, 09:09 par Laurentj

Petite typo

Corrigé, merci :-)

4. Le mardi, août 2 2005, 10:04 par Roby

Génial, merci pour la démo et les explications. Je cherchais justement une ressource de ce type mais appliquée aux listes... le principe, il me semble devrait être le même.

5. Le mardi, août 2 2005, 22:20 par shad

C'est amusant, j'ai fait le même test ce matin et ai trouvé la même solution du reset dans le body. Opera 8 n'est pas le seul à avoir le comportement hors spec: le dernier Konqueror compte aussi sans avoir besoin de créer une instance du compteur.