Contar es una tarea omnipresente en las aplicaciones web. ¿Cuántos correos no leídos tienes? ¿Cuántas tareas quedan sin marcar en tu lista de pendientes? ¿Cuántos sabores de donuts hay embolsados en el carrito de la compra? Todas son preguntas cruciales para las que los usuarios merecen respuestas.
Por lo tanto, este post te mostrará cómo contar elementos bi-estado, que constituyen la mayoría de los controles de usuario como casillas de verificación y entradas de texto, utilizando contadores CSS.
Para ello, primero tienes que apuntar a esos estados con CSS, lo que es posible mediante pseudoclases y atributos HTML que nos permiten hacer precisamente eso. Adelante, experimenta con la idea y explora las diferentes pseudo-clases que pueden indicar el cambio de estado de un elemento, dinámicamente.
Empezaremos con la más sencilla, las casillas de verificación.
Checkboxes o Casillas de Verificación
Las casillas de verificación pasan al estado “checked” cuando se marcan. La pseudo-clase :checked indica el estado marcado.
<input type=checkbox> checkbox #1<br>
<input type=checkbox> checkbox #2<br>
<input type=checkbox> checkbox #3<br>
<br>Checked: <b id=tickedBoxCount></b>
<br>Unchecked: <b id=unTickedBoxCount></b>::root{
counter-reset: tickedBoxCount, unTickedBoxCount;
}
input[type='checkbox']{
counter-increment: unTickedBoxCount;
}
input[type='checkbox']:checked{
counter-increment: tickedBoxCount;
}
#tickedBoxCount::before{
content: counter(tickedBoxCount);
}
#unTickedBoxCount::before{
content: counter(unTickedBoxCount);
}Como he dicho antes, este caso es muy sencillo. Establecemos dos contadores en el elemento raíz (root) e incrementamos cada uno para cada casilla de verificación para sus dos estados, respectivamente. Los valores de los contadores se muestran entonces en un lugar designado usando la propiedad content.
A continuación, puedes ver el resultado final. Al marcar y desmarcar las casillas de verificación, los valores de los contadores “Marcado” (Checked) y “Desmarcado” (Unchecked) se modifican en tiempo real.
Entradas de Texto (Text inputs)
También podemos contar cuántas entradas de texto han sido rellenadas y cuántas han sido dejadas vacías por el usuario. Esta solución no será tan sencilla como la anterior porque, a diferencia de las casillas de verificación, las entradas de texto no tienen pseudoclases que indiquen cuándo se rellenan.
Así que tenemos que encontrar una ruta alternativa. Hay una pseudo-clase que indica cuando un elemento tiene texto de marcador de posición; se llama :placeholder-shown.
Si utilizamos marcadores de posición en nuestra entrada de texto, podemos saber cuándo el campo de entrada está vacío. Esto ocurre cuando el usuario todavía no ha escrito nada en él, porque el marcador de posición desaparecerá cuando eso ocurra.
<input type=text placeholder='placeholder text'><br>
<input type=text placeholder='placeholder text'><br>
<input type=text placeholder='placeholder text'><br>
<br> Rellenado: <b id=filledInputCount></b>
<br> Vacío: <b id=emptyInputCount></b>::root{
counter-reset: filledInputCount, emptyInputCount;
}
input[type='text']{
counter-increment: filledInputCount;
}
input[type='text']:placeholder-shown{
counter-increment: emptyInputCount;
}
#filledInputCount::before{
content: counter(filledInputCount);
}
#emptyInputCount::before{
content: counter(emptyInputCount);
}El resultado es similar al anterior: los dos contadores se incrementan y disminuyen automáticamente a medida que añadimos o eliminamos texto de los campos de entrada.
Elemento details
Los estados alternativos de un elemento no siempre tienen que indicarse sólo mediante pseudoclases. Puede haber atributos HTML que hagan ese trabajo, como en el caso del elemento <details>.
El elemento <details> muestra el contenido de su elemento hijo summary>. Cuando el usuario hace clic en él, se muestran otros contenidos del elemento <details>. Ten en cuenta que el elemento <summary> siempre tiene que ser el primero entre los hijos de <details>.
Por lo tanto, <details> tiene dos estados: abierto y cerrado. El estado abierto se indica mediante la presencia del atributo HTML open en el elemento. Este atributo se puede seleccionar en CSS mediante su selector de atributo.
<details>
<summary>Q1: pregunta #1</summary>
<p>respuesta #1</p>
</details>
<details>
<summary>Q2: pregunta #2</summary>
<p>respuesta #2</p>
</details>
<details>
<summary>Q3: pregunta #3</summary>
<p>respuesta #3</p>
</details>
<br>
<br> Abierto: <b id=openDetailCount></b>
<br> Cerrado: <b id=closedDetailCount></b>::root{
counter-reset: openDetailCount, closedDetailCount;
}
details{
counter-increment: closedDetailCount;
}
details[open]{
counter-increment: openDetailCount;
}
#closedDetailCount::before{
content: counter(closedDetailCount);
}
#openDetailCount::before{
content: counter(openDetailCount);
}El resultado son de nuevo dos contadores CSS en tiempo real: Abierto y Cerrado.
Botones Radio (Radio buttons)
Contar los botones de radio requiere una técnica diferente. Podríamos utilizar la pseudo-clase :checked que utilizamos para las casillas de verificación. Sin embargo, los botones de radio se utilizan de forma diferente a las casillas de verificación.
Los botones de radio están pensados para estar en grupos. El usuario sólo puede seleccionar uno dentro de un grupo. Cada grupo actúa como una sola unidad. Los dos estados que puede tener un grupo de botones de radio es que uno de los botones esté seleccionado o que ninguno de ellos esté seleccionado.
Por lo tanto, no debemos contar los botones de radio por botones individuales, sino por grupos de botones. Para ello, utilizamos el selector :nth-of-type. Lo explicaré más adelante; veamos primero el código.
<input type=radio name='radio-1'>radio-1.1
<input type=radio name='radio-1'>radio-1.2
<input type=radio name='radio-1'>radio-1.3
<br>
<input type=radio name='radio-2'>radio-2.1
<input type=radio name='radio-2'>radio-2.2
<input type=radio name='radio-2'>radio-2.3
<br>
<input type=radio name='radio-3'>radio-2.1
<input type=radio name='radio-3'>radio-2.2
<input type=radio name='radio-3'>radio-2.3
<br>
<br> Seleccionado: <b id=selectedRadioCount></b>
<br> No-seleccionado: <b id=unSelectedRadioCount></b>Necesitamos asignar el mismo nombre a los botones de radio del mismo grupo. Cada grupo en el código anterior tiene tres botones de radio en su interior.
::root{
counter-reset: selectedRadioCount, unSelectedRadioCount;
}
input[type='radio']:nth-of-type(3n){
counter-increment: unSelectedRadioCount;
}
input[type='radio']:nth-of-type(3n):checked{
counter-increment: selectedRadioCount;
}
input[type='radio']:not(:nth-of-type(3n)):checked{
counter-increment: unSelectedRadioCount -1 selectedRadioCount;
}
#selectedRadioCount::before{
content: counter(selectedRadioCount);
}
#unSelectedRadioCount::before{
content: counter(unSelectedRadioCount);
}Las tres primeras reglas de estilo del fragmento anterior son las mismas que las que aplicamos a las casillas de verificación, salvo que, en lugar de centrarnos en todos los botones de opción, nos centramos en el último botón de opción de cada grupo, que es el tercero en nuestro caso (:n-ésimo-de-tipo(3n)). Así, no contamos todos los botones de opción, sino sólo uno por grupo.
Sin embargo, eso no nos dará un resultado correcto en tiempo real, ya que aún no hemos dado ninguna regla para contar los otros dos botones de opción del grupo. Si uno de ellos está marcado debería contarse y el resultado sin marcar debería disminuir al mismo tiempo.
Esta es la razón por la que añadimos un valor -1 después de unSelectedRadioCount en la última regla de estilo que tiene como objetivo los otros dos botones de radio de un grupo. Cuando uno de ellos está marcado, -1 disminuirá el resultado sin marcar.
La Colocación de los Recuentos
Sólo podrás ver el resultado correcto una vez finalizado el recuento, es decir, una vez procesados todos los elementos que se van a contar. Por eso necesitamos colocar el elemento dentro del cual mostraremos los contadores sólo después de los elementos a contar en el código fuente HTML.
Es posible que no quieras mostrar los contadores debajo de los elementos, sino en otro lugar de la página. En este caso, necesitas reposicionar los contadores usando propiedades CSS como translate, margin o position.
Pero, mi sugerencia sería utilizar CSS Grid para que puedas crear el diseño de tu página independientemente del orden de sus elementos en el código fuente HTML. Por ejemplo, puedes crear fácilmente una cuadrícula que coloque los contadores encima o al lado de los campos de entrada.
