html - sola - Crear números de línea en pre solo con CSS

salto de linea html5

Question

Intento diseñar un cuadro de código previo con números de línea delante de cada línea. Prefiero hacerlo solo con CSS. Esto es lo que he hecho

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>

Sin embargo, todas las líneas tienen el número 1. El incremento no funciona. Aquí hay un jsfiddle

1. ¿Que estoy haciendo mal?
2. ¿Cuál es la compatibilidad del navegador con esta única solución CSS?

Answer 1

Hola, debe restablecer el contador en un elemento cargado anterior / superior, consulte https://jsfiddle.net/n2xkgt7s/2/ pre { counter-reset: line; } pre { counter-reset: line; }

Answer 2

Tienes que incrementar la line en tu lapso:

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

Echa un vistazo a este jsfiddle actualizado.

Answer 3

¿Por qué el contador no se incrementa?

No está restableciendo o creando el contador en el nivel de etiqueta principal. Si agrega la siguiente línea al pre selector, el código funcionará bien. Cuando no crea el contador (usando un counter-reset ) en el nivel primario, cada elemento crearía su propio contador y luego lo incrementaría.

counter-reset: line;

¿Cuándo se crea un contador?

De las especificaciones del W3C :

La propiedad de reinicio del contador crea nuevos contadores en un elemento.

Las propiedades counter-set y counter-increment manipulan el valor de los contadores existentes. Solo crean nuevos contadores si aún no hay un contador del nombre dado en el elemento .

En este caso, lo que sucede es que no hemos creado un contador utilizando la propiedad de counter-reset del counter-reset y, por lo tanto, la propiedad de counter-increment en el span:before del selector de pseudoelementos crearía un contador del nombre dado y lo incrementaría.

¿Cómo llega el contador a conocer el valor actual?

De nuevo de las especificaciones del W3C :

Si un elemento tiene un hermano anterior, debe heredar todos los contadores del hermano . De lo contrario, si el elemento tiene un elemento primario, debe heredar todos los contadores del elemento primario . De lo contrario, el elemento debe tener un conjunto vacío de contadores.

El elemento luego hereda los valores del contador del elemento inmediatamente anterior en el orden del documento .

Aquí, dado que el contador solo se crea en el pseudo-elemento, su padre (el span ) no es consciente de su creación y, por lo tanto, los hermanos de este span no heredan el contador. Como ni siquiera hereda ningún contador, tampoco obtiene el valor actual del elemento anterior.

¿Por qué funciona la creación del contador en los padres?

Cuando el contador se crea en el nivel de etiqueta pre , el contador se pasa a cada uno de sus elementos secundarios (es decir, cada span y, a su vez, cada span:before conocería o heredaría este contador) y ahora las declaraciones de incremento en el span:before solo incrementaría el valor del contador que recibió del padre.

Ahora, dado que cada span hereda el contador de line de su hermano anterior, también heredarán el valor actual del elemento anterior en el orden del documento y, por lo tanto, seguirá subiendo de 1 a 2, 3, etc.

¿Por qué el uso de contra-incremento en span o pre-trabajo?

Como ha adivinado, la propiedad de incremento de contador crea un nuevo contador cuando no hay un contador existente y, por lo tanto, al agregar counter-increment: line en el span creará un contador en el primer intervalo que se encuentre. Ahora, dado que cada hermano del span hereda este contador, no crea uno nuevo cada vez y simplemente hereda el valor del elemento anterior. Por lo tanto, este enfoque funcionará, pero siempre es mejor crear el contador explícitamente utilizando una instrucción de counter-reset .

¿Cómo es el soporte del navegador?

El soporte del navegador para contadores CSS es increíblemente bueno. No es algo nuevo en CSS y el soporte está disponible incluso en IE8 .

Manifestación:

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>