¡Resuelto con CSS! Estilo lógico basado en el número de elementos dados

Esta publicación es la tercera de una serie sobre el poder de CSS.

Serie de artículos:

1. Fondos SVG para colorear
2. Menús desplegables
3. Diseño lógico basado en el número de elementos dados (esta publicación)

¿Sabías que CSS es Turing completo? ¿Sabías que puedes usarlo para realizar un estilo lógico bastante serio? ¡Bien tú puedes! No es necesario que establezcas todas las reglas de estilo basadas en lógica en JavaScript, ni siquiera tienes que usar JavaScript para configurar las clases con las que estás diseñando. En muchos casos, CSS puede manejar esto por sí mismo. Sigo descubriendo nuevos trucos de CSS todos los días y eso hace que me guste aún más.

Este año comencé a trabajar en Bustle Digital Group. En los medios, como ocurre con muchos productos, el equipo de ingeniería crea una plataforma que debería admitir todos los casos de uso. Nuestro CMS proporciona capacidades para que los autores y editores creen artículos, seleccionen páginas y controlen la inyección de anuncios.

A diferencia de trabajar con un sitio estático, el equipo de ingeniería no tiene control total sobre los datos que ingresan del usuario, por lo que se deben tomar decisiones de diseño y reglas rectoras para una buena experiencia de usuario. Algunos de estos escenarios que hemos enfrentado en el espacio de los medios digitales realmente me han inspirado a buscar formas de usar CSS para resolver esos desafíos de la interfaz de usuario, y fue entonces cuando las soluciones que involucraban esta idea realmente pasaron a mi periferia.

¡Veamos algunos ejemplos!

Ejemplo 1: Estados binarios

Un selector muy útil ya menudo olvidado es el :emptypseudoselector. Le permite diseñar elementos en función de si contienen algún contenido o no. ¡Hola estados vacíos! Los estados vacíos son una excelente manera de llegar a tus usuarios y mostrar personalidad en tu aplicación, y puedes inyectar esa personalidad directamente desde tu CSS.

En este ejemplo, tenemos cualquier lista de un usuario. Podrían ser publicaciones que el usuario haya publicado (como autor) o artículos marcados como favoritos que un usuario haya guardado (como editor). Los casos de uso aquí son realmente infinitos. En lugar de inyectar JavaScript, podemos usar pseudoelementos para inyectar imágenes, estilos y texto:

Nuestra solución aquí son solo tres líneas de código:

pseudo elemento para inyectar imágenes o cualquier otro contenido que desees. Alternativamente, el :notpseudo selector se puede usar en combinación con :emptypara crear una :not(:empty)regla y aplicar estilo a todos los elementos que no están vacíos y, por lo tanto, contienen elementos secundarios.

Nota: Esta demostración es sólo para fines de visualización. No se recomienda incluir contenido en pseudoelementos por motivos de accesibilidad. Puede utilizar la misma técnica de orientación :emptyo :not(:empty)elementos para aplicar estilos a elementos secundarios que sean más accesibles para los lectores de pantalla.

Selección numérica avanzada

Ese fue un buen ejemplo de pelota suave, pero podemos volvernos mucho más complejos que esta elección binaria de elementos secundarios en CSS, y para hacer esto, ¡usaremos el :nth-childpseudo selector! tiene una gran herramienta para ayudarte a probar y jugar con la :nth-childselección, y puede resultar muy útil, como te mostrarán algunos de los ejemplos.

Pero antes de entrar en detalles, ¿cómo funciona esto exactamente?

El meollo del código es este, divreemplazando cualquier elemento hermano determinado y xreemplazando el número que estamos usando para determinar las rupturas de estilo:

{ content: ';'; margin: 0 0.5em 0 -0.75em;}

:nth-first-child:nth-last-child(n + 5)nos permite decir: “comenzar con el primer hijo y aplicar estilo a ese hijo y a cada hermano posterior si el hijo original coincide con tener cinco o más hermanos”. ¿Es eso confuso? Bueno, funciona.

li:first-child:nth-last-child(n + 5)selecciona el primer elemento de la lista y li:first-child:nth-last-child(n + 5) ~ liselecciona cada elemento de la lista después del inicial.

Ejemplo 3: Carrusel condicional

Usando esta técnica, diseñemos un carrusel para que responda. En un tamaño grande, querrás que esté centrado en el medio de la página cuando tenga tres elementos dentro. Pero cuando tenga suficientes elementos para llenar la pantalla horizontalmente, déjelo alineado a la izquierda para que el usuario pueda deslizarlo.

Lo que podemos hacer aquí es estirar los elementos para que se ajusten a la pantalla, a menos que tengamos demasiados elementos y requieran un desbordamiento. En ese punto, hagamos todo lo posible en este desbordamiento y realmente mostremos las capacidades del carrusel señalando la capacidad de desplazamiento con flechas y aumentando el margen entre elementos. Además de eso, agreguemos un botón de flecha adhesiva para mostrar que podemos desplazarnos por los elementos y vincular eventos de JavaScript para hacer que el carrusel se desplace.

Podemos hacer lo mismo que arriba en términos de técnica, pero también usaremos solo para first-childdetectar un arrowdiv y mostrarlo en la interfaz de usuario. El HTML se vería así:

ul  li    div1/div  /li  li    div2/div  /li  ...  button——/button/ul

No es ideal tener elementos vacíos en el DOM, pero trabajen conmigo. Aun así, es un truco inteligente. Diseñaremos el .arrowbotón para que sea invisible para el DOM y para los lectores de pantalla a visibility: hiddenmenos que se cumplan las condiciones (en este caso, si hay cuatro o más elementos presentes). En ese punto, le daremos una visualización visible ( display: block), le daremos estilo y lo posicionaremos de manera apropiada:

li:first-child:nth-last-child(n + 5) ~ .arrow {  display: block;  position: sticky;  ...}

¡Más información!

En mi investigación para esta publicación, descubrí una excelente publicación de Heydon Pickering sobre esta técnica, llamada Consultas de cantidad, ¡y otro ejemplo de Lea Verou! En el hilo de comentarios de la publicación de Heydon, Paul Irish señala que esta es una forma más lenta de seleccionar elementos, así que úsela con precaución.