web-dev-qa-db-fra.com

Créer des numéros de ligne sur pré avec CSS uniquement

J'essaye de styler une boîte de code avec des numéros de ligne devant chaque ligne. Je préfère le faire avec CSS uniquement. C'est ce que j'ai fait

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;
}
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>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum,\ </span>
  <span>lorem ipsum.</span>
  <span>&gt;&gt; lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
  <span>lorem ipsum</span>
</pre>

Cependant, toutes les lignes ont le numéro 1. L'incrément ne fonctionne pas. Voici un jsfiddle

  1. Qu'est ce que je fais mal?
  2. Quelle est la compatibilité du navigateur avec cette solution uniquement CSS?
htmlcsscss-counter
56
Tasos

Pourquoi le compteur n'augmente-t-il pas?

Vous ne réinitialisez ni ne créez le compteur au niveau de la balise parent. Si vous ajoutez la ligne suivante au sélecteur pre, le code fonctionnera correctement. Lorsque vous ne créez pas le compteur (à l'aide d'un counter-reset) au niveau parent, chaque élément crée son propre compteur, puis l'incrémente.

counter-reset: line;

Quand un compteur est-il créé?

De la Spec. 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. Ils ne créent de nouveaux compteurs que s'il n'y a pas encore de compteur du nom donné sur l'élément.

Dans ce cas, nous n'avons pas créé de compteur en utilisant la propriété counter-reset. La propriété counter-increment dans le sélecteur de pseudo-éléments span:before créerait un compteur du nom donné et l'incrémenterait. 

Comment le compteur apprend-il à connaître la valeur actuelle?

Encore une fois de la Specs du W3C :

Si un élément a un frère précédent, il doit hériter de tous les compteurs du frère. 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 then hérite des valeurs de compteur de l'élément immédiatement précédent dans l'ordre du document. 

Ici, comme le compteur est créé uniquement dans le pseudo-élément, son parent (le span) n'est pas au courant de sa création et les frères et sœurs de cette span n'héritent donc pas du compteur. Comme il n’hérite même pas de compteur, il n’obtient pas non plus la valeur actuelle de l’élément précédent.

Pourquoi créer le compteur sur le travail des parents?

Lorsque le compteur est créé au niveau de la balise pre, il est ensuite transmis à chacun de ses éléments enfants (autrement dit, chaque span et chaque span:before connaît ou hérite de ce compteur) et maintenant les instructions d'incrémentation du span:before incrémenterait seulement la valeur du compteur qu’elle aurait reçu du parent. 

Maintenant, puisque chaque span hérite du compteur 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 ainsi à passer de 1 à 2, 3, etc.

Pourquoi utilise-t-on des incréments de compteur ou des travaux préalables?

Comme vous l'avez deviné, la propriété counter-increment crée un nouveau compteur lorsqu'il n'y en a pas et l'ajout de counter-increment: line à la span créera un compteur sur la première étendue rencontrée. Maintenant, puisque chaque frère de la span hérite de ce compteur, il n'en crée pas un nouveau à chaque fois, mais hérite simplement de la valeur de l'élément précédent. Ainsi, cette approche fonctionnera, mais il est toujours préférable de créer le compteur explicitement en utilisant une instruction counter-reset.

Comment le navigateur est-il supporté?

La prise en charge du navigateur pour les compteurs CSS est incroyablement bonne. Ce n'est pas une nouveauté en CSS et son support est disponible même dans IE8 .

Démo:

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>&gt;&gt; lorem ipsum</span>
<span>lorem ipsum,\ </span>
<span>lorem ipsum.</span>
<span>&gt;&gt; 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>

69
Harry

Vous devez incrémenter line dans votre étendue:

pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}

Jetez un coup d'oeil à cette mise à jour jsfiddle .

1
Huelfe

Bonjour, vous devez réinitialiser le compteur d’un élément précédemment chargé, consultez https://jsfiddle.net/n2xkgt7s/2/pre { counter-reset: line; }

0
Marius Brits