Pourquoi le compteur ne s'incrémente-t-il pas ?
Vous ne réinitialisez pas ou ne créez pas le compteur au niveau de la balise parent. Si vous ajoutez la ligne suivante à la balise pre le code fonctionnera correctement. Si vous ne créez pas le compteur (en utilisant un sélecteur counter-reset ) au niveau du parent, chaque élément crée son propre compteur et l'incrémente.
counter-reset: line;
Quand un compteur est-il créé ?
A partir de la Spécifications du W3C :
La propriété counter-reset crée de nouveaux compteurs sur un élément.
Les propriétés counter-set et counter-increment manipulent la valeur des compteurs existants. Elles ne crée de nouveaux compteurs que s'il n'y a pas encore de compteur du nom donné sur l'élément .
Dans ce cas, ce qui se passe, c'est que nous n'avons pas créé de compteur en utilisant la fonction counter-reset et donc la propriété counter-increment dans la propriété span:before créerait un compteur du nom donné et l'incrémenterait.
Comment le compteur peut-il connaître la valeur actuelle ?
Toujours d'après le Spécifications du W3C :
Si un élément a un frère ou une sœur précédent(e), il/elle doit hériter de tous les compteurs de la fratrie . Sinon, si l'élément a un parent, il doit hériter de tous les compteurs du parent . Sinon, l'élément doit avoir un ensemble vide de compteurs.
L'élément est alors hérite des valeurs de compteur de l'élément immédiatement précédent dans l'ordre du document .
Ici, comme le compteur n'est créé que dans le pseudo-élément, son parent (l'élément span ) n'est pas conscient de sa création et donc les frères et sœurs de ce span n'hérite pas du compteur. Comme il n'hérite d'aucun compteur, il n'obtient pas non plus la valeur courante de l'élément précédent.
Pourquoi la création du compteur sur le parent fonctionne-t-elle ?
Lorsque le compteur est créé au pre le compteur est ensuite transmis à chacun de ses éléments enfants (c'est-à-dire à chaque span et à son tour chaque span:before connaîtrait ou hériterait de ce compteur) et maintenant les déclarations d'incrémentation dans le span:before ne ferait qu'incrémenter la valeur du compteur qu'il a reçu du parent.
Or, puisque chaque span hérite de la line de son frère précédent, ils hériteront également de la valeur actuelle de l'élément précédent dans l'ordre du document et continueront donc d'augmenter de 1 à 2, 3, etc.
Pourquoi l'utilisation de la contre-incrémentation sur l'étendue ou la pré fonctionne-t-elle ?
Comme vous l'avez deviné, la propriété de contre-incrément crée un nouveau compteur lorsqu'il n'y a pas de compteur existant et ainsi ajouter counter-increment: line sur le span créera un compteur sur la première travée rencontrée. Maintenant, puisque chaque frère de l'élément span hérite de ce compteur, il n'en crée pas un nouveau à chaque fois et se contente d'hériter de la valeur de l'élément précédent. Cette approche fonctionne donc, mais il est toujours préférable de créer le compteur explicitement à l'aide d'un élément counter-reset déclaration.
Quelle est la compatibilité avec le navigateur ?
La prise en charge des compteurs CSS par les navigateurs est incroyablement bonne. Ce n'est pas une nouveauté en CSS et la prise en charge est disponible même dans IE8 .
Démonstration :
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
border-top: 4px solid #00aeef;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line;
}
pre span {
display: block;
line-height: 1.5rem;
}
pre span:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888
}
<pre><span>lorem ipsum</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>>> lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
<span>lorem ipsum</span>
</pre>
