Compteurs CSS

[calimo]

http://extensions.geckozone.org/compteurs.htm

Je teste en ce moment un moyen de mettre des compteurs CSS sur les items de FAQ. J'ai donc :

Code : Tout sélectionner

	h3.titrefaq:before {
		counter-increment:titrefaq;
		content: counter(titrefaq) ".\00A0";
		counter-reset:faq;
	}

pour numéroter les titres h3 de la FAQ (titrefaq) et remettre à 0 les sous-numérotations (faq) que j'affiche sur les dt :

Code : Tout sélectionner

	dl.faq dt:before {
		content: counter(titrefaq) "." counter(faq) "\00A0";
		counter-increment: faq;
	}

Ça fonctionne bien dans Opera
Par contre dans DeerPark alpha 1... C'est la cata ! Tous mes dt sont préfixés par "0.1" (il n'y a aucune incrémentation) et tous les h3 sont préfixés par "1".

Quelqu'un sait pourquoi ? C'est que l'implémentation n'est pas encore totalement terminée ? Ou c'est moi qui ait fait une erreur quelque part ?

[PsyDk]

- une déclaration CSS pour créer le compteur (avec le :before) ;
- une déclaration CSS pour l'incrémenter (sans le :before).

Code : Tout sélectionner

	h3.titrefaq:before
	{
		content: counter(titrefaq) ".\00A0";
	}

	h3.titrefaq
	{
		counter-increment: titrefaq;
	}

Et voilà ! ^^

Pareil pour le sous-niveau :

Code : Tout sélectionner

	dl.faq dt:before
	{
		content: "Q " counter(titrefaq) "." counter(faq) "\00A0: ";
		font-style:italic;
	}

	dl.faq dt
	{
		counter-increment: faq;
	}

[calimo]

Ah oui ça marche !
Il y a le moindre début d'explication rationnelle sur cette bizarrerie ? J'ai beau relire la spec je vois même un exemple qui fait bel et bien ce que j'ai fait... En tous cas ça marche bien dans Opera (ce n'est peut-être pas une référence absolue mais tout de même... )

Edit : même l'exemple de la spec CSS 2 ne passe pas en fait...

[Bobe]

L'implémentation a été faite en tenant compte des changements à venir pour les compteurs dans CSS3.

[calimo]

Pourtant dans la spec CSS3 je vois exactement le même exemple :

Code : Tout sélectionner

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

dans lequel le content et le counter-increment sont dans la même déclaration...

Je dois avouer que je ne saisi pas trop la différence, d'où elle vient et encore moins son but (à part compliquer les choses ce qui me semble plutôt pas logique)...

[PsyDk]

Ils ont l'air de dire que la spec va changer et que ça sera comme ce qu'implémente Gecko :

https://bugzilla.mozilla.org/show_bug.cgi?id=3247#c109

[Benoit]

Je traduis l'explication de Boris Zbarsky :

Bien sûr on peut [spécifier le reset dans le pseudo-élément :before]. Il prendra effet dans le domaine de visibilité du reset : les enfants de before: (il n'y en a aucun) et ses voisins suivants (les enfants du <h1>).

Mais le <h2> n'est pas un enfant de <h1>, il n'est donc pas couvert par le domaine de visibilité du :before. [...] on peut espérer que le prochain draft de CSS2.1 expliquera cela mieux (et corrigera les exemples).

[calimo]

Mouais, admettons. Mais

• Quel avantage à cette limitation ?
• Ça veut dire qu'un

  Code : Tout sélectionner

  html:after {
  	content:counter(moncompteur);
  }
  p {
  	counter-increment:moncompteur;
  }

  ne pourra pas compter le nombre de paragraphes d'une page vu que le html n'est pas un enfant de p ?
  Si j'ai bien compris on ne pourra afficher les compteurs que sur les enfants du bloc qui incrémente ? C'est nul !

[Benoit]

Je doute que tu puisses ajouter un nœud après HTML de toute façon (il est censé n'y avoir qu'une racine à la page). Après body à la limite, peut-être.

J'imagine que tu pourrais mettre le compteur sur body justement, comme ça :

Code : Tout sélectionner

body { counter-reset:machin; }
p { counter-increment:machin; }
body:after { content:counter(machin); }

(la première ligne est même implicite je pense, puisqu'ils disent qu'un compteur non déclaré précédemment est supposé initialisé par la racine)

[calimo]

Effectivement, mettre un noeud après le html racine n'est peut-être pas une bonne idée (même si ça marche ).

Admettons, je mettais ça comme ça. Donc je le mets sur body... ça ne marche pas !

Exemple

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<style type="text/css">
	p {
		counter-increment:machin;
	}
	body:after {
		display:block;
		content:counter(machin);
	}
	</style>
</head>


<body>
	<p>Paragraphe 1</p>
	<p>Paragraphe 2</p>
</body>
</html>

Ça affiche toujours 1. Même avec 10 paragraphes.

En fait, ça affiche 1 (et même 0 si les <p> ne sont pas des enfants directs, p.ex s'ils sont inclus dans un div - donc dans le html c'est toujours 0).

Conclusion, on est bien obligé de le mettre sur le <p> ou un de ses enfants. Cela veut dire qu'il est impossible d'utiliser ce mécanisme pour sommer quoi que ce soit. Ça ne fait que me confirmer : c'est nul !
Ça s'appelle une régression. Ça sera incompatible avec l'implémentation d'Opera (qui existe déjà depuis un bout de temps), et peut-être avec celle de KHTML ? donc on ne peut pas dire que la spec en l'état n'est pas implémentable (vu que c'est déjà fait) ni qu'ils le font dans un but de compatibilité (vu que ça va la casser). Je ne comprend pas la logique qui fait qu'un "1" s'affiche malgré tout... J'espère que le CSS3 rétablira les choses

Edit : avec un "counter-reset: machin 5;" sur body j'ai un comportement des plus étranges : ça affiche 6 mais il arrive que ça affiche 5 ou d'autres nombres plus exotiques si on recharge la page (il y a un "9" qui apparaît parfois). Pour moi ça a tout du bug, laissons donc le temps de rectifier la chose

[Benoit]

Il y a effectivement un autre bug lié en bas du premier sur des comportements aléatoires.

Je crois aussi qu'il est urgent d'attendre

[calimo]

La nouvelle version de CSS 2.1 est sortie... ils ont supprimé l'exemple mais ça ne me paraît pas plus clair

[arno.]

Dans ton exemple, c'est ptet parceque tu fais un body:after que ça marche pas. Moi ça me parait pas très logique de vouloir afficher qqc après le body et ptet que Firefox il pense comme moi.

En tout cas si je prends ton exemple et que je fais :

Code : Tout sélectionner

<div>
      <p>Paragraphe 1</p>
      <p>Paragraphe 2</p>
     <p>Paragraphe 3</p>
</div>

et que je remplace body:after par div:after, ça a l'air de marcher.

[calimo]

Oui, parce que pour une raison inconnue (de mes services) ça ne marche que sur le bloc directement parent. Pas au-dessus.

Cela dit il affiche très bien tout ce que tu veux en html:after De même il ne t'affichera pas un compteur sur div:after/before s'il y a un autre élément entre le bloc et l'incrémenteur...

[arno.]

Je comprends pas ton problème.
Après, il suffit de jouer sur l'endroit où tu places counter-reset : machin

http://ffsearchplugins.free.fr/counter/index.html