Compteurs et numérotage automatiques - Cours feuille de style en cascade

En CSS2, le numérotage automatique est régi par deux propriétés, 'counter−increment' et 'counter−reset'. Les compteurs définis par celles−ci sont employés par les fonctions counter() et counters() de la propriété 'content'.

'counter−reset'

Valeur : [ <identifiant> <entier>? ]+ | none | inherit Initiale : none

S'applique à : tous les éléments

Héritée : non Pourcentage : sans objet

Médias : tous

'counter−increment'

Valeur : [ <identifiant> <entier>? ]+ | none | inherit Initiale : none

S'applique à : tous les éléments

Héritée : non

Pourcentage : sans objet

Médias : tous

La propriété 'counter−increment' accepte un ou plusieurs noms de compteurs (des identifiants), chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur de l'incrémentation du compteur à chaque fois que survient l'élément. L'incrémentation par défaut est d'une unité. Les entiers nuls ou négatifs sont admis.

La propriété 'counter−reset' contient aussi une liste de noms de compteurs, un ou plusieurs, chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur que prend un compteur à chaque fois que survient l'élément. Par défaut, celui−ci a une valeur nulle.

Quand la propriété 'counter−increment' se réfère à un compteur qui est hors de portée (voir plus loin) de la propriété 'counter−reset', le compteur est considéré avoir été mis à zéro par l'élément racine.

Exemple(s) :

Voici une manière de numéroter des chapitres et leurs sections, tel que "Chapitre 1", "1.1", "1.2", etc. :

H1:before {

content: "Chapitre " counter(chapitre) ". ";

counter−increment: chapitre; /* Ajoute 1 au chapitre */

counter−reset: section; /* Remet la section à zéro */

}

H2:before {

content: counter(chapitre) "." counter(section) " ";

counter−increment: section;

}

Quand un élément incrémente, ou remet à zéro, un compteur, et dans le même temps, l'utilise (au travers de la propriété 'content' du pseudo−élément :before ou :after qui lui est attaché), le compteur n'est utilisé qu'après avoir été incrémenté, ou remis à zéro.

Quand un élément, à la fois, remet à zéro et incrémente un compteur, la remise à zéro intervient avant l'incrémentation.

La propriété 'counter−reset' suit les règles de cascade, ainsi la feuille de style :

H1 { counter−reset: section −1 } H1 { counter−reset: imagenum 99 }

celle−ci va seulement remettre à zéro le compteur 'imagenum'. Pour que les deux compteurs le soient, il faut les réunir :

H1 { counter−reset: section −1 imagenum 99 }

12.5.1 Les compteurs imbriqués et leur portée

Les compteurs sont "auto−imbriquants", dans le sens oû la réutilisation d'un compteur dans un élément enfant crée automatiquement une nouvelle instance de celui−ci. Ceci a son importance dans des cas comme les listes en HTML, où les éléments peuvent être imbriqués dans eux−mêmes à des profondeurs arbitraires. Il serait sinon impossible de définir des noms de compteurs uniques pour chaque niveau d'imbrication.

Exemple(s) :

Ainsi, ce qui suit suffit pour numéroter des items de liste imbriqués. Le résultat est très semblable à celui qui serait obtenu en appliquant 'display:list−item' et 'list−style:inside' sur l'élément LI :

OL { counter−reset: item }

LI { display: block }

LI:before { content: counter(item) ". "; counter−increment: item }

L'auto−imbrication se base sur le principe que chaque élément, ayant une propriété 'counter−reset' pour un compteur X, crée un nouveau compteur X, dont la portée va s'étendre à l'élément en question, aux descendants de celui−ci, et à ceux des éléments précédents de même parenté et leurs descendants.

Dans l'exemple précédent, un élément OL va créer un compteur et tous les enfants de cet élément vont se référer à ce dernier.

Si on note par item[n] la n^eme instance du compteur "item", par "(" et ")" le début et la fin d'une portée, l'extrait HTML suivant utilisant ce compteur (et la feuille de style précédente associée à celui−ci :

</OL> <!−− ) −−>

</OL> <!−− ) −−>

</OL> <!−− ) −−>

</OL> <!−− ) −−>

</OL> <!−− ) −−>

La fonction 'counters()' génère une chaîne composée des valeurs de tous les compteurs de même nom, celles−ci séparées par une chaîne donnée.

Exemple(s) :

Cette feuille de style numérote les articles d'une liste imbriquée, tel que "1", "1.1", "1.1.1", etc. :

OL { counter−reset: item } LI { display: block }

LI:before { content: counters(item, "."); counter−increment: item }

12.5.2 Les styles des compteurs

Par défaut, les compteurs sont mis en forme avec des nombres décimaux, mais chacun des styles disponibles pour la propriété 'list−style−type' peuvent leur être appliqués.

Voici la notation correspondant au style par défaut :

counter(nom)

et celle correspondant à un style donné :

counter(nom, 'list−style−type')

Tous les styles sont admis, y compris 'disc', 'circle', 'square' et 'none'.

Exemple(s) :

H1:before { content: counter(chno, upper−latin) ". " } H2:before { content: counter(section, upper−roman) " − " } BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }

DIV.note:before { content: counter(notecntr, disc) " " } P:before { content: counter(p, none) }

12.5.3 Les compteurs dans les éléments avec 'display: none'

Un élément qui n'est pas affiché (sa propriété 'display' ayant la valeur 'none'), ne peut ni incrémenter un compteur ni le remettre à zéro.

Exemple(s) :

Dans cet exemple, les éléments H2 ayant une classe "secret" n'incrémente pas 'count2' :

H2.secret {counter−increment: count2; display: none}

Par contre, les éléments dont la valeur de la propriété 'visibility' est 'hidden', incrémentent les compteurs.

Dans le document Cours feuille de style en cascade – Cours et formation gratuit (Page 118-121)