Introducción a los contadores CSS

Introducción

En programación, los contadores son variables que contienen un valor que se incrementa según reglas personalizables. Tienen muchas finalidades, como ayudar a controlar los bucles almacenando la cantidad de veces que se ha ejecutado el bucle. Aunque se utilizan de forma rutinaria en los lenguajes de programación, los contadores no se han incluido tradicionalmente en la sintaxis de las hojas de estilo en cascada (CSS). Antes de la era de las CSS modernas, el seguimiento de los elementos de la página con fines de estilo se hacía manualmente en el marcado o mediante JavaScript para contar los elementos. Pero ahora, CSS tiene una propiedad de contador bien compatible que puede realizar un seguimiento de los incrementos sin JavaScript.

En este tutorial, repasará los conceptos básicos de los contadores CSS y los utilizará para numerar sectionelementos en un documento de lenguaje de marcado de hipertexto (HTML) y contar la cantidad de filas de un tableelemento.

Prerrequisitos

• Un archivo HTML guardado en su equipo local al index.htmlque puede acceder desde el navegador web que elija. Para comenzar, consulte nuestro tutorial Cómo configurar su proyecto HTML y siga Cómo usar y comprender los elementos HTML para obtener instrucciones sobre cómo ver su HTML en su navegador. Si no tiene experiencia con HTML, pruebe la serie completa Cómo crear un sitio web en HTML.

Numeración de secciones de una página

Para demostrar cómo funcionan los contadores en CSS, primero utilizará una hoja de estilo para adjuntar un número a varios sectionelementos en su HTML. Con los contadores, hará que el número se incremente en uno para cada nueva sección.

En primer lugar, utilice el editor de texto que prefiera para abrir el index.htmlarchivo. En este tutorial, utilizará nano:

nano index.html

Una vez abierto el archivo, agrega el siguiente HTML para crear la estructura semántica de tu sitio web, que en nuestro ejemplo es una hoja informativa sobre reptiles:

índice.html

!DOCTYPE htmlhtml  head    meta charset="utf-8"    titleIntroduction to CSS Counters/title    link rel="stylesheet" type="text/css" href="counter.css"  /head  body    section      h2Ratings/h2      Insert a table with reptile ratings on it...    /section    section      h2Alligators/h2      Insert facts about alligators here...    /section    section      h2Turtles/h2      Insert facts about turtles here...    /section    section      h2Snakes/h2      Insert facts about snakes here...    /section  /body/html

En este código, usaste el sectionelemento para crear cuatro secciones de tu sitio, con títulos establecidos como h2encabezados. También agregaste un linkelemento en el headque se conecta al archivo CSS counter.css, que crearás pronto.

Guarde y cierre el archivo. Ábralo index.htmlen su navegador y encontrará lo siguiente:

Si quisiera numerar cada uno sectionen este HTML, podría anteponer a cada uno h2el número directamente en el marcado, de la siguiente manera:

...    section      h21. Ratings/h2      Insert a table with reptile ratings on it...    /section    section      h22. Alligators/h2      Insert facts about alligators here...    /section...

Si bien es una gran solución cuando se cuenta con una cantidad fija y pequeña de secciones, esto se torna tedioso y propenso a errores cuando se tienen decenas o incluso cientos de secciones. Además, la complejidad aumenta rápidamente en el momento en que se necesita reordenar las secciones.

Para automatizar esta numeración, puede utilizar contadores CSS.

Crea y abre tu counter.cssarchivo en el mismo directorio que index.html:

nano counter.css

Los contadores en CSS se comportan como variables en los lenguajes de programación tradicionales. El primer paso para usar contadores CSS es inicializar un contador, lo que le da un nombre y establece un valor inicial.

Añade el siguiente código a tu archivo:

contador.css

body {  counter-reset: sectionCounter;}

En este código, solía counter-resetinicializar un contador llamado sectionCounter. En este punto, sectionCounteres igual a 0.

Puede declarar el valor inicializado explícitamente al pasar un entero a la counter-resetpropiedad después del nombre del contador. Por ejemplo, counter-reset: sectionCounter 2inicializaría el sectionCountercontador con un valor de 2. Si no se especifica el valor entero, el valor del contador es 0el predeterminado.

Ahora que ha inicializado el contador, puede configurar cómo se incrementa. Para cada sección, deberá incrementar el contador en 1. Para ello, agregue el siguiente código resaltado:

contador.css

body {  counter-reset: sectionCounter;}section {  counter-increment: sectionCounter;}

En este código, seleccionaste todos sectionlos elementos para que tengan la counter-incrementpropiedad. Esto significa que cada vez que el CSS encuentre un sectionelemento, incrementará el contador. Al configurar la propiedad en , sectionCounterse elige incrementar el contador denominado sectionCounter. De manera predeterminada, el contador se incrementa en uno, pero si quisieras especificar el incremento, podrías agregar un número entero después, sectionCounterseparado por un espacio en blanco.

Una vez que el contador se haya inicializado y la lógica de incremento esté configurada, ya puede utilizar el contador. Para utilizar el valor del contador, utilice la contentpropiedad para anteponer el valor al encabezado h2:

contador.css

body {  counter-reset: sectionCounter;}section {  counter-increment: sectionCounter;}h2::before {  content: counter(sectionCounter) ". ";}

Utilizaste el ::beforepseudoelemento para agregar un elemento antes de cada h2encabezado. Para establecer el contenido del nuevo elemento, utilizaste la contentpropiedad, junto con la counter()función. Esta función devuelve el valor de sectionCountercomo una cadena. Si pasas una segunda cadena a, contentse concatenará la cadena, por lo que se imprime el valor de sectionCounterseguido de un .y un espacio.

Guarde y cierre el archivo. Actualice su navegador web y verá encabezados de sección como 1. Calificaciones y 2. Caimanes :

Eso no es todo; el contador es inmune a agregar y eliminar nuevas secciones, así como a reordenarlas, por lo que no tendrás que volver a numerar si cambias el orden.

Para probar esto, abra su archivo HTML:

nano index.html

Cambiar el orden de las secciones Turtlesy Snakes:

índice.html

...  body    section      h2Ratings/h2      Insert a table with reptile ratings on it...    /section    section      h2Alligators/h2      Insert facts about alligators here...    /section    section      h2Snakes/h2      Insert facts about snakes here...    /section    section      h2Turtles/h2      Insert facts about turtles here...    /section  /body...

Guarde y cierre el archivo. Vuelva a cargar el navegador y encontrará lo siguiente:

En esta sección, utilizó contadores CSS para automatizar secciones numeradas en un documento HTML. A continuación, ejecutará un ejemplo en el que se utiliza el tableelemento para ilustrar cómo utilizar contadores para realizar cálculos de totales.

Contar el número de filas en una tabla

Además de automatizar la numeración en un documento HTML, puede utilizar contadores CSS para cualquier tarea que implique un incremento periódico. Para demostrarlo, utilizará contadores para almacenar la cantidad de filas de un tableelemento y, luego, mostrará el total en la tabla.

Contar la cantidad de filas o trelementos de una tabla tablees similar a cómo se sumó un valor numérico a cada sectionelemento en la parte anterior del tutorial. La gran diferencia será que la parte importante es el valor total y no el valor de cada fila.

Antes de contar las filas de un table, necesitará un tablecon el que trabajar. Abra su archivo HTML:

nano index.html 

Ahora agregue las siguientes líneas resaltadas para crear su tabla en Calificaciones section :

índice.html

!DOCTYPE htmlhtml  head    meta charset="utf-8"    titleIntroduction to CSS Counters/title    link rel="stylesheet" type="text/css" href="counter.css"  /head  body    section      h2Ratings/h2      table cellpadding="5"        thead          tr            thReptile/th            thRating/th          /tr        /thead        tbody          tr            tdAlligator/td            td9001/td          /tr          tr            tdTurtle/td            td223/td          /tr          tr            tdSnake/td            td3.14/td          /tr        /tbody        tfoot          tr            thRows/th            th/th          /tr        /tfoot      /table    /section    section      h2Alligators/h2      Insert facts about alligators here...    /section...

Utilizaste el tableelemento para crear una tabla, junto con el trelemento para determinar las filas de la tabla y el tdelemento para llenar la fila con puntos de datos. Observa el uso de thead, tbodyy tfoot. Si bien no son necesarios, estos elementos agrupan las filas en secciones semánticas, que puedes usar para orientar mejor las filas en la tbodysección y omitir las filas del encabezado o pie de página. Por último, utilizaste los atributos bordery cellpaddingpara darle a tu tabla un estilo básico.

Guardar y salir index.html. Actualice la página en su navegador y verá lo siguiente:

Ahora, abre tu archivo CSS:

nano counter.css

Al igual que antes, querrá iniciar un contador con un valor cero. Pero esta vez, agregue un nuevo contador llamado rowCounter:

contador.css

body {  counter-reset: sectionCounter;  counter-reset: rowCounter;}section {  counter-increment: sectionCounter;}h2::before {  content: counter(sectionCounter) ". ";}

Para cada fila o trelemento, tbodyincremente el contador:

contador.css

body {  counter-reset: sectionCounter;  counter-reset: rowCounter;}section {  counter-increment: sectionCounter;}h2::before {  content: counter(sectionCounter) ". ";}table tbody tr {  counter-increment: rowCounter;}

Usaste el table tbody trselector para seleccionar todos los trelementos en tbody, luego usaste la counter-incrementpropiedad, pero esta vez con el rowCountercontador.

Finalmente, agregue el valor final del contador al pie de página en la columna con la clase de total:

contador.css

body {  counter-reset: sectionCounter;  counter-reset: rows;}section {  counter-increment: sectionCounter;}h2::before {  content: counter(sectionCounter) ". ";}table tbody tr {  counter-increment: rowCounter;}table .total::before {  content: counter(rowCounter);}

Como antes, usaste el ::beforepseudoelemento para agregar el valor de rowCountercomo una nueva cadena. Dado que esto se declara después de que se incrementó el recuento, informará la cantidad total de filas.

Guarde y salga del archivo CSS, luego vuelva a cargar la página en el navegador para mostrar lo siguiente:

Ahora tablesiempre se informará cuántas filas contiene. Si se agregan o eliminan filas al marcado, se obtendrá un total actualizado. Esto funciona incluso cuando se usa JavaScript para manipular el DOM.

Conclusión

Los contadores en CSS son útiles para mostrar un valor que aumenta con determinados elementos en el código HTML. En muchos casos, esto puede eliminar por completo la necesidad de introducir JavaScript en una página, lo que lo convierte en una solución ideal para proyectos web ligeros que no necesitan interactividad. Sin embargo, tenga en cuenta que el uso de CSS de esta manera difumina la línea entre el contenido y el diseño, y no separa los intereses de una manera que permita gestionar aplicaciones más grandes. Por este motivo, se recomienda evitar este método en aplicaciones JavaScript más complicadas.

Si desea obtener más información sobre el estilo de sitios web, consulte la serie Cómo crear un sitio web con HTML o nuestro tutorial sobre Cómo diseñar componentes de React.