Sugerencia rápida uso de contadores CSS para diseñar elementos incrementales

Aprender CSS: la guía completa

Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..

En este consejo rápido, cubriremos los conceptos básicos de los contadores de CSS; Una característica de CSS útil, pero no tan conocida. Cuando hayamos terminado de construir nuestra demostración, echaremos un vistazo a algunos ejemplos reales de sitios que aprovechan los contadores de CSS..

El objetivo: diseñar una lista ordenada

Como primer paso, veamos el diseño que vamos a construir:

Nada lujoso, ¿verdad? Sin embargo, aquí está el desafío: usaremos el marcado semántico, evitando la tentación de usar lo innecesario. div y lapso Elementos para construir esos marcadores contrarios..

Vamos a discutir una solución limpia y flexible.!

Contadores de CSS

Todo lo que se necesita para generar el diseño mencionado es definir una lista ordenada. En este punto, puede que se esté preguntando si podríamos haber usado otro elemento o incluso una lista desordenada. La respuesta corta es "sí", pero tenga en cuenta que una lista ordenada es el único elemento que describe con precisión la estructura de nuestra página.. 

Es probable que luego pregunte si es posible personalizar completamente el aspecto de los números de lista ordenados, creando el diseño deseado de esa manera. Estilizar los números de lista ordenados sería realmente complicado. Afortunadamente, sin embargo, hay un enfoque alternativo entre navegadores, así que vamos a esconder Los números de lista predeterminados y aprovechar los contadores de CSS en su lugar.

Sintaxis

Los contadores de CSS nos permiten generar números basados ​​en elementos repetidos, y diseñarlos en consecuencia. Piense en los contadores de CSS como variables cuyos valores pueden incrementarse. Veamos la sintaxis básica:

Crear un nuevo contador

Aquí creamos un nuevo contador en una lista ordenada y definimos su alcance. Usamos el contrarrestar propiedad.

1. El primer valor es el nombre del contador.
2. seguido de un parámetro opcional que define el valor de inicio del contador (predeterminado: 0). Tenga en cuenta que el contador siempre comenzará a contar hacia arriba, por lo que el primer generado El valor en nuestro caso será 1..

Estilo del elemento hijo

En este segundo diagrama podemos ver que estamos diseñando el ::antes de pseudo-elemento de la li en nuestra lista.

1. Aquí hemos añadido el valor del contador a la contenido de nuestro ::antes de. Vale la pena mencionar que al usar contadores de CSS con la propiedad de contenido, podemos concatenar (unir) los números generados con cadenas.
2. Nos referimos al nombre de nuestro contador.
3. y define el estilo del contador como "decimal". Los valores posibles aquí son similares a los utilizados para el tipo de estilo de lista propiedad.
4. En el contra-incremento Regla volvemos a referirnos al nombre de nuestro contador.
5. luego use un parámetro opcional para indicar cuánto se incrementa el contador. El valor predeterminado aquí es 1.

Margen

Basado en lo que acabamos de discutir, aquí está nuestro marcado:

 
 
Elemento de lista
 
Algun texto aqui.
 
 
 
Elemento de lista
 
Algun texto aqui.
 
 <-- more list items here --> 

Y el CSS relacionado:

ol counter-reset: sección;  li tipo de estilo de lista: ninguno; tamaño de letra: 1.5rem; relleno: 30px; margen inferior: 15px; fondo: # 0e0fee; color: #fff;  li :: antes contenido: contador (sección); contra-incremento: sección; pantalla: bloque en línea; posición: absoluta; izquierda: -75px; superior: 50%; transformar: traducirY (-50%); relleno: 12px; tamaño de letra: 2rem; ancho: 25px; altura: 25px; text-align: center; color: # 000; radio del borde: 50%; borde: 3px sólido # 000; 

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

Limitaciones

En este punto, es importante tener en cuenta que los pseudo-elementos no son 100% accesibles. Para probar esto hice una prueba rápida. Instalé NVDA y utilicé Chrome 50, Firefox 45 e Internet Explorer 11 para obtener una vista previa de la página de demostración. 

Lo que descubrí es que cuando se usó Internet Explorer, el lector de pantalla no anunció el contenido generado. Estos dias los mayoria La mayoría de los lectores de pantalla reconocen el contenido generado de este tipo, sin embargo, debe conocer las posibles limitaciones y, por lo tanto, decidir qué contenido es lo suficientemente seguro para generar mediante pseudo-elementos..

Contadores de CSS en la naturaleza

Ahora que conocemos los conceptos básicos de los contadores de CSS, estamos listos para mostrar algunos ejemplos que demuestran sus posibles casos de uso.. 

En primer lugar, los contadores de CSS se utilizan comúnmente en los periódicos en línea. La mayoría de las veces, las encontrarás en las barras laterales: 

Wall Street JournalHandelsblatt

Los contadores de CSS también se pueden usar dentro de las secciones que describen los pasos o dan instrucciones. Aquí hay un ejemplo:

SpikeNode  

Ejemplos de HTML hinchado

En la sección anterior, vimos dos periódicos en línea que aprovechan los contadores de CSS. Ahora, veamos otros dos periódicos que usan un marcado hinchado (aunque con contenido accesible) en lugar de contadores de CSS:

El Correo de Washingtonguardián  

Conclusión

En este consejo rápido, aprendimos cómo podemos usar los contadores de CSS para diseñar los elementos de la lista ordenada. Resumamos brevemente lo que hemos cubierto:

• Los contadores CSS son una gran solución para cada proyecto que requiere un ordenamiento dinámico con estilos personalizados. Por otro lado, esta no es una solución totalmente accesible, por lo que debe tener en cuenta sus limitaciones y utilizarla correctamente..
• Para configurar los contadores, tenemos que especificar dos propiedades (es decir,. contrarrestar,contra-incremento) y una función (mostrador() o contadores ()).
• Los pseudo-elementos son responsables de mostrar los contadores. Recuerda que eso está pasando a través de contenido Propiedad, que solo está disponible para pseudo-elementos..

¿Alguna vez has usado contadores de CSS en tus proyectos? Si es así, asegúrate de compartir con nosotros tu trabajo.!