html - sola - Crear números de línea en pre solo con CSS
salto de linea html5 (3)
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; }
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>>> 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>
Sin embargo, todas las líneas tienen el número 1. El incremento no funciona. Aquí hay un jsfiddle
- ¿Que estoy haciendo mal?
- ¿Cuál es la compatibilidad del navegador con esta única solución CSS?
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.
¿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>>> 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>