Generació de contingut automàtic
Una de les novetats del CSS 2 va ser la possibilitat de generar codi automàticament (al CSS 3 es milloraran molt més aquests elements, propietats i atributs), la llàstima és que no tots els navegadors ho interpreten igual, una limitació important és que no genera codi HTML.
- Mozilla 1.3 - El contador no el fa ni tampoc el
contentperò no te cap tipus de problema per als pseudo-elementsafteribefore - Opera 6.05 - Fa el contador i el content a la perfecció, no té cap tipus de problema amb els pseudo-elements
afteribefore. No interpreta la propietatattr(X). - Internet Explorer 6 - Interpretació nul·la.
La generació de codi es fa totalment des de fulles d’estils, per exemple, si volem numerar tot un seguit de H3 el que haurem de fer serà.
Codi en fulles d’estils:
h3:before{
content: counter(songnumber, decimal) ".- ";
counter-increment: songnumber;}
El resultat en un navegador que ho interpretés hauria de ser aquest:
1.- títol
2.- títol
3.- títol
Així amb tots els h3 que hi hagi al codi HTML.
El content permet els següents valors: [ string | uri | counter | attr(X) | open-quote | close-quote | no-open- quote | no-close-quote ]+ | inherit.
Parlaré dels valors que estan en negreta només. Si volem posar un contingut que aparegui sempre només caldrà que escrivim el contingut i el posem entre cometes tal i com es pot observar a l’exemple.
El valor attr(X) és més complex, aquesta funció retorna com una variable el valor de l’atribut X, amb la limitació que l’atribut X no pot fer referència a altres elements que no tinguin aquest estil.
Exemple:
IMG:before { content: attr(alt) }
,o també,
blockquote:after{ content:attr(alt)}
El counter és més curiós, no funciona per si sol. Aquest valor pot tenir diferents formes, counter(name), counter(name,style), counter(name, string), counter(name,string,style). En l’exemple del principi s’utilitza counter(name,style).
El nom pots posar el que vulguis sempre i quan a counter-increment o counter-reset facis referència a aquest nom, i style fa referència als estils de la numeració, són els mateixos estils que els de les llistes.