[pillola] contatori e contenuto generato in Firefox e Opera

[thomas_anderson]

FF e Op, perchè IE 6 (ed inferiori) non supporta il contenuto generato.
Si immagini di avere una serie di titoli <h2> in questa sequenza:

1. Titolo n° 1
2. Titolo n° 2
3. Titolo n° 3

Vogliamo che il browser aggiunga il numero progressivo e il puntino prima di ogni elemento <h2>.
Questo può essere fatto con lo pseudo-elemento :before e la proprietà 'content', unita alle proprietà 'counter-increment' e 'counter-reset'. Quindi si avrà:

#pagina {
...
}

#pagina h2:before {
  counter-reset: voce;
  counter-increment: voce;
  content: counter(voce) ". ";
}

Con la prima proprietà diciamo al browser di azzerare il contatore, con la seconda di incrementarlo di tante unità pari al numero dell'identificatore ("voce", si può scegliere un nome qualsiasi), ossia in questo caso di 1. Ed infine, con 'content' inseriamo il tutto prima (:before) di ogni elemento <h2> in #pagina. Si noti che la stringa di 'content' è sensibile agli spazi: fra 'counter' e '(voce)' non ci sono spazi, mentre fra "." e la seconda virgoletta che lo racchiude si.

Qualcuno di voi si chiederà: perchè lo hai inserito in un contenitore come #pagina? perchè c'è un'importante differenza fra FF e Op: per Opera la dichiarazione precedente funziona bene, e produrrà l'effetto desiderato. FF invece interpreterà così:

1. Titolo n° 1
1. Titolo n° 2
1. Titolo n° 3

ossia non incrementerà il contatore. per far funzionare tutto in modo cross-browser dobbiamo cambiare la dichiarazione precedente per l'elemento genitore di <h2>:

#pagina {
counter-reset: voce;
}

#pagina h2:before {
  counter-increment: voce;
  content: counter(voce) ". ";
}

ossia azzerare il contatore nell'elemento genitore. le specifiche dicono che si può farlo anche come fa Opera: http://www.w3.org/TR/CSS21/generate.html ma i browser sono liberi di scegliere. ciao

[fcaldera]

ottimo approfondimento

[thomas_anderson]

grazie Fabrizio.
una precisazione: ai contatori è possibile attribuire gli stessi stili delle liste, ossia gli stessi valori di 'list-style-type'. quindi:

#pagina h2:before {
  counter-reset: voce;
  counter-increment: voce;
  content: counter(voce, lower-roman) ". ";
}

che farà visualizzare:

i. Titolo n° 1
ii. Titolo n° 2
iii. Titolo n° 3

ps. a David Baron si deve l'implementazione dei contatori su FF e Mozilla:
http://dbaron.org/css/test/sec1202