Los contadores CSS son variables que podemos incrementar o disminuir con la propiedad específica. Con la ayuda de esto, podemos lograr una iteración genérica, al igual que en un lenguaje de programación como JavaScript. En el artículo de hoy vamos a ver los aspectos esenciales, qué propiedades podemos usar y algunos ejemplos.
Este método se puede utilizar para dar soluciones creativas que incluyan un contador para alguna parte repetitiva de tu código.
Para controlarlos, utilizamos las propiedades counter-reset y counter-increment, además de las funciones counter() y counters(). Esta metodología no sería de utilidad si no mostráramos el valor del contador, por lo que, para ello, podemos usar la propiedad content.
El funcionamiento es sencillo. Por ejemplo, si tenemos una lista desordenada y queremos contar sus elementos li, especificamos un contador en el elemento ul, y lo incrementamos en los li.
Propiedad counter-reset
Podemos definir nuestra variable contador con la propiedad counter-reset. Para esto, indicaremos un nombre y, opcionalmente, un valor de inicio. Por defecto, el valor de inicio será cero. Esta es la propiedad que iría en el elemento contenedor.
Propiedad counter-increment
Gracias al uso de counter-increment, podemos aumentar o disminuir el valor del contador. Esta propiedad también tiene un segundo valor opcional que determina el volumen de incremento/decremento.
Función counter()
La función counter() es la responsable del volcado de datos. Se realizará en la propiedad content, porque es donde podemos devolver datos al HTML a través de CSS. Esta función tiene dos parámetros: el primero corresponde al nombre de la variable, y el segundo al tipo de contador (opcional).
Función counters()
Esta función realiza el mismo trabajo que counter(). La principal diferencia es que con counters() podemos insertar iteraciones dentro, como una lista ul de varios niveles. Tiene tres parámetros: el primero es el nombre del contador, el segundo el separador y el tercero el tipo de contador (también es opcional).
Veamos a continuación algunos ejemplos para comprender el funcionamiento de los contadores.
Ejemplo 1: contar automáticamente las secciones de un documento
Esta solución es útil cuando tenemos algún documento repetitivo y queremos contar determinadas secciones.
Crearemos un counter-reset en el contenedor con la clase container. A continuación, establecemos el counter-increment en los elementos cuya clase sea nota. Al final, mostraremos el contador con la ayuda de la propiedad content en los elementos .nota: before.
See the Pen Contador CSS Ejemplo 1 by Sonia Ruiz (@yune) on CodePen.
Ejemplo 2: contar checkboxes seleccionados
Utilizando la pseudo clase :checked podemos comprobar si una casilla está marcada y, si es así, incrementar el contador.
See the Pen Contador CSS Ejemplo 2 by Sonia Ruiz (@yune) on CodePen.
Conclusiones
Como hemos visto, el uso de contadores puede resultarnos de utilidad en muchas ocasiones, por lo que es aconsejable conocer cómo funciona y cuáles son sus posibilidades. ¿Alguien se anima a experimentar? ¡Estaré encantada de ver vuestros trabajos!
Además, si queréis ampliar información sobre otras propiedades de CSS, os recomiendo artículos como la guía de Flexbox y 6 propiedades de CSS3 que deberías conocer.
Etiquetas: contador, counter, counter-increment, counter-reset, css, funciones, propiedades, tutorial, variables