Cómo revertir los contadores personalizados de CSS

Necesitaba una lista numerada de publicaciones de blog que aparecieran con la última/alta primero y bajando desde allí. Como esto:

5. Post Title4. Post Title3. Post Title2. Post Title1. Post Title

Pero lo anterior es sólo texto. Quería hacer esto con un olelemento semántico.

La manera fácil

Esto se puede hacer usando la propiedad de HTML reverseden ol:

ol reversed  liThis/li  liList/li  liWill Be/li  liNumbered In/li  liReverse/li/ol 

Para la mayoría de la gente, esto sería suficiente. Trabajo hecho.

Pero necesitaba estilos personalizados para los mostradores.

Tenga en cuenta que se pueden crear estilos de números de lista personalizados con el ::markerpseudoelemento, pero Chrome aún no lo admite (aunque escuché que estará disponible pronto).

Como quería estilos de números personalizados totalmente compatibles con todos los navegadores, elegí contadores personalizados.

Agregar y diseñar un contador personalizado

Diseñar los contadores de una lista ordenada de manera diferente al resto de la lista requiere deshabilitar los contadores predeterminados y crear y mostrar los nuestros propios usando CSS Counters. Chris compartió algunas recetas hace un tiempo que vale la pena consultar.

Suponiendo que tenemos el siguiente HTML:

ol  liItem 1/li  liItem 2/li  liItem 3/li/ol

…primero necesitamos deshabilitar los contadores predeterminados que vienen con todas las listas ordenadas configurando la propiedad CSS list-style-typeasí none:

ol.fancy-numbered {  list-style-type: none;}

Eso elimina toda la numeración predeterminada. A continuación, creamos un contador en CSS para rastrear la cantidad de elementos en la lista.

ol.fancy-numbered {  list-style-type: none;  counter-reset: a;}

Esto nos da un contador llamado “a” pero se le puede llamar como quieras. Mostremos nuestro contador usando el ::beforepseudoelemento en el elemento de la lista ( li).

ol.fancy-numbered li::before {  content: counter(a)'.';}

Esto establecerá el contenido del pseudoelemento al valor de nuestro contador. En este momento, eso imprimirá 1 al lado del elemento de su lista.

Necesitamos decirle al contador CSS cómo incrementar.

ol.fancy-numbered li::before {  content: counter(a)'.';  counter-increment: a;}

El valor inicial de “a” es cero, lo que parece extraño, pero el incremento predeterminado es 1, lo que significa que se convierte en el punto de partida real. Incrementar en 1 resultado será el valor predeterminado, pero podemos cambiarlo como veremos pronto.

Ahora podemos proceder a aplicar cualquier estilo personalizado que queramos al contador, porque el contador es solo un pseudoelemento de texto que está ampliamente abierto al estilo:

ol.fancy-numbered li::before {  content: counter(a)'.';  counter-increment: a;     position: absolute;     left: 0;     color: blue;     font-size: 4rem;}

Por ejemplo, aquí hemos hecho que el color del contador sea azul y hemos aumentado el tamaño de la fuente. Estas son cosas que no podríamos hacer usando el contador predeterminado.

Invertir contadores personalizados

Si agregamos la reversedpropiedad al olelemento como lo hicimos antes, no observaremos ningún efecto porque deshabilitamos la numeración predeterminada. Eso es exactamente lo que hace esta propiedad.

ol reversed  liItem 1/li  liItem 2/li  liItem 3/li/ol

El código anterior no tiene ningún efecto en nuestra numeración personalizada. Probablemente sea una buena idea dejarlo ahí, ya que nuestra intención es invertir la lista. Esto mantiene las cosas semánticamente precisas.

Para invertir el orden visual de nuestra numeración basada en contadores, necesitamos saber el número total de elementos en la lista e indicarle al contador que comience desde ese número y luego disminuya desde allí.

ol.fancy-numbered {  counter-reset: a 4;  list-style-type: none;}

Aquí, lo configuramos counter-reseten 4. En otras palabras, le decimos al navegador que comienza el conteo en 4 en lugar de 1. Usamos 4 en lugar de 3, nuevamente, porque la counter()regla se aplica al primer elemento de la lista. , que es 0. Pero, en el caso de que estemos contando hacia atrás, 4 se convierte en nuestro 0. Si comenzamos desde 3 y lo reducimos, terminamos en 0 en lugar de 1.

A continuación, modificamos nuestra counter-incrementregla para disminuir en 1 en lugar de aumentar, convirtiéndola en un entero negativo.

ol.fancy-numbered li:before {  content: counter(a)'.';  counter-increment: a -1;  position: absolute;     left: 0;     color: blue;     font-size: 4rem;} 

¡Y eso es! Ahora el mundo está a tu alcance para cosas como los rastreadores de pasos:

¿O qué tal una línea de tiempo?

¿Quizás un plan de negocios?