Cómo invertir contadores personalizados CSS »Wiki Ùtil Programar Plus

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

5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title

Pero lo anterior es solo texto. Quería hacer esto con una semántica. <ol> elemento.

La manera fácil

Esto se puede hacer usando HTML reversed propiedad en el <ol>:

<ol reversed>
  <li>This</li>
  <li>List</li>
  <li>Will Be</li>
  <li>Numbered In</li>
  <li>Reverse</li>
</ol>

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

Pero necesitaba estilos personalizados para los contadores.

Hágale saber que los estilos de números de lista personalizados se pueden hacer con el ::marker pseudo-elemento, pero que aún no es compatible con Chrome (aunque escuché que llegará pronto).

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

Agregar y diseñar un mostrador 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 usando Contadores CSS. Chris compartió algunas recetas hace un tiempo que vale la pena echarle un vistazo.

Suponiendo que tengamos el siguiente HTML:

<ol class="fancy-numbered">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

… primero necesitamos deshabilitar los contadores predeterminados que vienen con todas las listas ordenadas configurando la propiedad CSS list-style-type a none al igual que:

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

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

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

Esto nos da un contador llamado “a” pero se puede llamar como quieras. Muestremos nuestro contador usando el ::before pseudoelemento en el elemento de la lista (<li>).

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

Esto establecerá el contenido del pseudo-elemento en el valor de nuestro contador. En este momento, eso imprimirá unos al lado de su elemento de 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 inicial real. Incrementar hacia arriba en 1 resulta ser el valor predeterminado, pero podemos cambiar eso 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á 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í, hicimos que el color del contador fuera azul y aumentamos el tamaño de la fuente. Estas son cosas que no podríamos hacer con el contador predeterminado.

Inversión de contadores personalizados

Si sumamos el reversed propiedad a la <ol> elemento como lo hicimos antes, no observaremos ningún efecto porque deshabilitamos la numeración predeterminada. Eso es exactamente lo que hace esta propiedad.

<ol class="fancy-numbered" reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 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 revertir 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í, estamos estableciendo counter-reset a 4. En otras palabras, le estamos diciendo al navegador que comience la cuenta en 4 en lugar de 1. Usamos 4 en lugar de 3, nuevamente, porque el counter() La regla se aplica al primer elemento de la lista, que es 0. Pero, en el caso en el que contamos hacia atrás, 4 se convierte en nuestro 0. Si comenzamos desde 3 y disminuimos, terminamos en 0 en lugar de 1.

A continuación, modificamos nuestro counter-increment regla para disminuir en 1 en lugar de aumentar, convirtiéndolo en un número 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 es su ostra para cosas como rastreadores de pasos:

O qué tal una línea de tiempo:

¿Quizás un plan de negocios?