CSS
Compteurs
Recherche…
Syntaxe
Contre-ensemble: [<counter-name> <integer>? ] + | aucun
counter-reset: [<counter-name> <integer>? ] + | aucun
contre-incrémentation: [<counter-name> <integer>? ] + | aucun
counter (<counter-name> [, <counter-style>]?)
counters (<counter-name>, <connector-string> [, <counter-style>]?)
Paramètres
| Paramètre | Détails |
|---|---|
| nom du compteur | C'est le nom du compteur qui doit être créé, incrémenté ou imprimé. Il peut s'agir de n'importe quel nom personnalisé selon les souhaits du développeur. |
| entier | Cet entier est une valeur facultative qui, lorsqu'elle est fournie à côté du nom du compteur, représente la valeur initiale du compteur (dans le counter-set , les propriétés de counter-reset ) ou la valeur à laquelle le compteur doit être incrémenté (en counter-increment ). |
| aucun | C'est la valeur initiale pour les trois propriétés du counter-* . Lorsque cette valeur est utilisée pour un counter-increment de counter-increment , la valeur d'aucun des compteurs n'est affectée. Lorsque ceci est utilisé pour les deux autres, aucun compteur n'est créé. |
| contre-style | Ceci spécifie le style dans lequel la valeur du compteur doit être affichée. Il prend en charge toutes les valeurs prises en charge par la propriété list-style-type . Si none n'est utilisé, la valeur du compteur n'est pas imprimée du tout. |
| chaîne de connexion | Cela représente la chaîne qui doit être placée entre les valeurs de deux niveaux de compteur différents (comme le "." Dans "2.1.1"). |
Remarques
Les compteurs ne sont pas un nouveau sujet en CSS. Cela faisait partie des spécifications de niveau CSS 2 (révision 1 pour être précis) et a donc un support de navigateur très élevé.
Tous les navigateurs sauf IE6 et IE7 prennent en charge les compteurs CSS.
Application de chiffres romains à la sortie du compteur
CSS
body {
counter-reset: item-counter;
}
.item {
counter-increment: item-counter;
}
.item:before {
content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}
HTML
<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>
Dans l'exemple ci-dessus, la sortie du compteur serait affichée en tant que I, II, III (chiffres romains) au lieu des 1, 2, 3 habituels, car le développeur a explicitement spécifié le style du compteur.
Numéroter chaque article en utilisant le compteur CSS
CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}
HTML
<div class='item'>
<div class='item-header'>Item 1 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 2 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
<div class='item-header'>Item 3 Header</div>
<div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
L'exemple ci-dessus numérote chaque "élément" de la page et ajoute le numéro de l'élément avant son en-tête (en utilisant content propriété content de l'élément .item-header :before pseudo). Une démonstration en direct de ce code est disponible ici .
Implémentation de la numérotation multi-niveaux à l'aide des compteurs CSS
CSS
ul {
list-style: none;
counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
counter-increment: list-item-number;
}
li:before {
content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}
HTML
<ul>
<li>Level 1
<ul>
<li>Level 1.1
<ul>
<li>Level 1.1.1</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 2.1
<ul>
<li>Level 2.1.1</li>
<li>Level 2.1.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 3</li>
</ul>
Ce qui précède est un exemple de numérotation à plusieurs niveaux utilisant des compteurs CSS. Il utilise le concept d' auto-imbrication des compteurs. L'imbrication automatique est un concept où si un élément a déjà un compteur avec le nom donné mais doit en créer un autre, il le crée en tant qu'enfant du compteur existant. Ici, le deuxième niveau ul hérite déjà du compteur list-item-number de son parent, mais doit ensuite créer son propre list-item-number (pour ses enfants li ) et créer ainsi list-item-number[1] (counter for deuxième niveau) et le niche sous le list-item-number[0] (compteur pour le premier niveau). Ainsi, la numérotation à plusieurs niveaux est atteinte.
La sortie est imprimée à l'aide de la fonction counters() au lieu de la fonction counter() car la fonction counters() est conçue pour préfixer la valeur de tous les compteurs de niveau supérieur (parent) lors de l'impression de la sortie.