64 votes

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

J'essaie de style d'un code de pré boîte avec les numéros de ligne en face de chaque ligne. Je préfère le faire avec CSS. 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. Ce que je fais de mal?
  2. Quelle est la compatibilité de votre navigateur avec ce CSS seule solution?

79voto

Harry Points 10265

Pourquoi le compteur s'incrémente pas?

Vous n'êtes pas la réinitialisation ou la création du compteur à la balise parent. Si vous ajoutez la ligne suivante à l' pre sélecteur, le code fonctionne bien. Lorsque vous ne créez pas le compteur (à l'aide d'un counter-reset) au niveau du parent, chaque élément de créer son propre compteur et puis l'incrémente.

counter-reset: line;

Quand un compteur créés?

À partir du W3C Spécifications:

Le counter-reset de la propriété crée de nouveaux compteurs sur un élément.

La contre-définir et counter-increment propriétés de manipuler la valeur des compteurs existants. Ils seulement créer de nouveaux compteurs si il n'y a pas de compteur du nom donné à l'élément encore.

Dans ce cas ce qui se passe, c'est que nous n'avons pas créé un compteur en utilisant l' counter-reset de la propriété et donc le counter-increment propriété dans l' span:before pseudo-sélecteur d'élément serait de créer un compteur du prénom et de l'incrémenter.


Comment fonctionne le compteur de connaître la valeur actuelle?

Nouveau à partir du W3C Spécifications:

Si un élément a un frère précédent, il doit hériter de tous les frères de compteurs. Sinon, si l'élément a un parent, il doit hériter de tous les parents des compteurs. Sinon, l'élément doit avoir un ensemble vide de compteurs.

L'élément est alors hérite des valeurs de compteur de la précède immédiatement l'élément dans l'ordre du document.

Ici depuis le compteur n'est créé que dans le pseudo-élément, son parent ( span) n'est pas conscient de sa création et donc les frères et sœurs de cette span n'a pas hérité de la contre. Depuis il n'a même pas hériter d'un compteur, il n'a pas d'obtenir la valeur actuelle de l'élément précédent.


Pourquoi la création du comptoir de travail parent?

Lorsque le compteur est créé à l' pre balise de niveau, le compteur est alors transmis à chacun de ses enfants éléments (qui est, chaque span et tour à tour, chaque span:before connaissent le sujet, ou d'hériter de ce compteur) et maintenant l'incrément des déclarations à l' span:before serait seulement incrémenter la valeur de compteur reçue de la part du parent.

Maintenant, étant donné que chaque span hérite de l' line compteur de son frère précédent, ils seront également hériter valeur actuelle de l'élément précédent dans l'ordre du document, et donc il continue à aller de 1 à 2, 3 etc.


Pourquoi l'utilisation de counter-increment sur la durée de pré travail?

Comme vous l'avez deviné, le compteur d'incrémentation de la propriété crée un nouveau compteur quand il n'y a pas de comptoir existant et l'ajout d' counter-increment: line sur le span permettra de créer un compteur sur la première travée est rencontré. Maintenant, étant donné que chaque frère de l' span hérite de ce compteur, il n'est pas en créer un nouveau à chaque fois et plutôt juste hérite de la valeur de l'élément précédent. Ainsi, cette approche fonctionne, mais il est toujours préférable de créer le compteur explicitement à l'aide d'un counter-reset déclaration.


Comment est la prise en charge du navigateur?

Prise en charge du navigateur pour CSS compteurs est incroyablement bon. Ce n'est pas une chose nouvelle dans le CSS et le 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>

1voto

Huelfe Points 1312

Vous devez incrémenter line dans votre étendue:

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

Jetez un oeil à cette mise à jour jsfiddle .

0voto

Marius Brits Points 154

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X