Consejo Rápido: Usando Contadores CSS para incrementar elementos.

En éste consejo rápido, cubriremos lo más elemental de los contadores CSS; una útil pero, todavía, no bien conocida función CSS. Cuando hayamos construido nuestra demostración, echaremos un vistazo a algunos ejemplos del mundo real de sitios que han aprovechado al máximo la función; contadores CSS.

La meta: dar estilo a una lista ordenada.

Como primer paso, vamos a ver la composición que construiremos:

Nada interesante, ¿cierto? Sin embargo, acá está el desafío: usaremos marcado semántico para evitar la tentación de usar div innecesarios y elementos span para construir esos contadores de marcadores.

¡Analicemos una solución nítida y flexible!

Contadores CSS

Todo lo que hace falta para generar la composición mencionada anteriormente es definir una lista ordenada. En este punto, podría estarse preguntando si podríamos haber utilizado otro elemento o incluso una lista sin ordenar. La respuesta corta es “si”, pero tenga en menta que una lista ordenada es el único elemento que describe con exactitud la estructura de nuestra página.

Entonces, es probable que usted se pregunte si es posible personalizar por completo la apariencia de los números de la lista ordenada, creando la composición deseada de esa forma. Aplicar estilos a los números de la lista sería algo complicado. Aunque por fortuna, hay un método alternativo; cross-browser, así que ocultemos los números por defecto de la lista y en lugar de eso aprovechemos la función de contadores de CSS.

Síntaxis 

Los contadores CSS, nos permiten generar números basado en elementos repetidos y, por consiguiente, darles estilos. Piense en los contadores CSS como variables cuyos calores puede ser incrementados. Echemos un vistazo a la sintaxis fundamental:

Aquí creamos un contador nuevo en una lista ordenada y definimos su alcance. Usamos la propiedad counter-reset.

1. El primer valor es el nombre del contador
2. seguido por un parámetro opcional que define el valor de inicio del contador (por defecto: 0). Note que el contador siempre empezará contando hacia arriba, así que el primer valor generado en nuestro caso será 1.

En este segundo diagrama, podemos ver que hemos dado estilo a los pseudo-elementos ::before del li de nuestra lista.

1. Aquí añadimos el valor del contador para el content de nuestro ::before. Vale la pena mencionar que cuando utilizamos los contadores CSS con la propiedad del contenido, podemos concantenar (unir) los números generados con cadenas.
2. Nos referiremos al nombre de nuestro contador.
3. y definiremos el estilo del contador como “decimal”. Los valores posible acá son similares a esos utilizados para la propiedad list-style-type.
4. En la regla counter-increment, otra vez nos referimos al nombre de nuestro contador.
5. luego, usamos un parámetro opcional para indicar cuánto es incrementado el contador. Aquí, el valor por defecto es 1.

Marcado

Basado en lo que ya hemos discutido, aquí está nuestro marcado:

1

<ol>

2

  <li>

3

    <h4>List Item</h4>

4

    <p>Some text here.</p>

5

  </li>

6

  <li>

7

    <h4>List Item</h4>

8

    <p>Some text here.</p>

9

  </li>

10

11

  <-- more list items here -->

12

</ol>

Y el CSS relacionado:

1

ol {

2

  counter-reset: section;

3

}

4

5

li { 

6

  list-style-type: none;

7

  font-size: 1.5rem;

8

  padding: 30px;

9

  margin-bottom: 15px;

10

  background: #0e0fee;

11

  color: #fff;

12

}

13

14

li::before {

15

  content: counter(section);

16

  counter-increment: section;

17

  display: inline-block;

18

  position: absolute;

19

  left: -75px;

20

  top: 50%;

21

  transform: translateY(-50%);

22

  padding: 12px;

23

  font-size: 2rem;

24

  width: 25px;

25

  height: 25px;

26

  text-align: center;

27

  color: #000;

28

  border-radius: 50%;

29

  border: 3px solid #000;

30

}

Esto nos da el resultado como se muestra a continuación:

Limitaciones

En éste punto, es importante anotar que los pseudo-elementos no son 100% accesibles. Para probar esto, hice una prueba rápida. Instale una tarjeta NVDA y uso Chrome 50, Firefox 45 e Internet Explorer 11 para previsualizar la página de muestra.

Lo que encontré es que cuando Internet Explorer fue utilizado, el lector de pantalla no anunció el contenido generado. En estos días la mayoría de los lectores de pantalla reconocen el contenido generado de este tipo, así que usted debería estar consciente de las posibles limitaciones, y además, decidir cual contenido es suficiente seguro para generar usando pseudo-elementos.

Los Contadores CSS en 

Ahora que conocemos los principios básicos de los contadores CSS, estamos listo para mostrar algunos ejemplos que demuestran su potencial de uso.

En primer lugar, los contadores CSS son comúnmente utilizado en periódicos en línea. La mayor parte del tiempo, los encontrará en la barra lateral:

Los contadores CSS, también, pueden ser utilizados dentro de secciones que describen pasos, o direcciones dadas. Aquí está un ejemplo:

Ejemplos exagerados de HTML

En la sección anterior, vimos dos periódicos en línea que aprovecha al máximo la ventaja de los contadores CSS. Ahora, vamos a ver otros dos periódicos que usan una marcado excesivo (aunque con contenido accesible) en vez de contadores CSS:

Conclusión

En éste consejo rápido, aprendimos como podemos usar los contadores CSS para dar estilo a los elementos de una lista ordenada. Así que vamos hacer un breve resumen de lo que hemos cubierto aquí:

• Los contadores CSS son una excelente solución para cada proyecto que requiere un orden dinámico con estilos personalizados. Por otro lado, esto no es una solución completamente accesible, así que debe estar consciente de sus limitaciones y usarlo adecuadamente.
• Para ajustar los contadores, tenemos que especificar dos propiedades (ejemplo, counter-reset, counter-increment) y una función (counter() o counter()). 
• Los pseudo-elementos son responsables de mostrar los contadores. Recuerde lo que pasa a través de la propiedad content, la cual solamente está disponible para los pseudo-elementos.

¿Alguna vez ha usado los contadores CSS en sus proyectos? Si la respuesta es si, ¡entonces asegúrese de compartir con nosotros su trabajo!