Escondido en las profundidades de la especificación CSS encontrará contadores CSS. Como su nombre lo indica, le permiten contar una cosa en su página con CSS incrementando el valor cada vez que aparece en el documento.
Esto es principalmente útil si tiene un sitio web de tutoriales, ya sea sobre cocina o desarrollo web, todos tienen pasos a seguir, y lo más probable es que tenga que escribir el número de paso antes del contenido real. Los contadores de CSS pueden ayudar haciéndolo automáticamente, incluso puede usarlo para contar las imágenes en su archivo y agregar números de figura antes de los subtítulos.
En este ejemplo, demostraré cómo lograr esto creando una receta simple para panqueques y haciendo una búsqueda CSS para el comienzo de cada párrafo y agregando el número del paso anterior.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
El objetivo en este HTML es que cada párrafo sea un paso diferente y con CSS podemos agregarlos dinámicamente escribiendo tan solo 3 líneas de código.
Los contadores de CSS usan el incremento de contador de propiedad . Ha existido desde hace un tiempo que en realidad se implementó en CSS 2.1, para usarlo primero debemos restablecer el valor predeterminado del contador a 0 antes de que todo lo que queremos contar aparezca en la página, por lo que es una buena idea definir esto en el Estilos de cuerpo, como así:
body {counter-reset: steps;}Esta línea simplemente restablece el contador a 0 y también lo nombra, lo que nos permite llamarlo más tarde y también nos permite tener más de un contador en la página.
El siguiente paso es usar el pseudo elemento : antes de apuntar a todos los párrafos y agregar el número de paso antes de que comience todo el texto. Para hacer eso, necesitamos usar un incremento en el contador y luego especificar el contenido. Podemos simplemente usar el número o podemos agregar o anteponer un poco de texto, en este caso vamos a anteponer "Paso" antes del valor del contador, así:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}También deberíamos hacer que este contenido se destaque un poco y para hacerlo le daremos un tamaño de letra más grande que los párrafos y lo pondremos en negrita:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Si quieres ver esta idea en acción, puedes ver la pluma que creé
Una preocupación constante al trabajar con CSS es el soporte del navegador, pero como se trata de una implementación de CSS 2.1, la compatibilidad con el navegador es excelente: es compatible con todos los navegadores principales, de escritorio y móviles, el único navegador importante que no lo admite es IE7. y según mi contador de estadísticas, IE7 solo lo usa el 0,61% de las personas, así que creo que podemos decir que IE7 se irá pronto. Si necesita o no soportar IE7 depende de las estadísticas de su propio sitio.
Contadores de CSS no es algo que va a utilizar en cada proyecto, pero es algo que debe tener en cuenta, porque algún día puede ser útil.
¿Has usado contadores de CSS en un proyecto? ¿Qué usos puedes ver para ellos? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de conteo a través de Shutterstock.