CSS

Cuadrículas implícitas, patrones de diseño repetitivos y colgantes | trucos CSS

Dave Rupert con un poco de magia CSS moderna que se ocupa de uno de esos enigmas clásicos: ¿qué sucede cuando el CSS de un componente no puede manejar el contenido que le lanzamos?

La situación particular es cuando la cuadrícula de diseño espera un número par de elementos, pero en su lugar se entrega con un número impar. Nos quedamos con un elemento «colgante» al final que altera el diseño. Parece que lo que se necesita es poco CSS protegido y Dave lo logra.

él alcanza para :has() para escribir un selector elegante que detecte el último elemento en una matriz que contiene un número impar de elementos:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

Desglosándolo:

  • Tenemos un contenedor principal de .items.
  • Si el contenedor :has() un .item un niño que es el último de su especie,
  • …y esto .item pasa a ser un caso impar,
  • … luego seleccione el primero .item elemento de este tipo y darle estilo!

En este caso, este último .item se puede configurar en ancho completo para evitar agujeros en el diseño.

Si… entonces… ¡CSS tiene poderes lógicos condicionales! En este momento solo estamos hablando de soporte para Safari TP y Edge/Chrome Canary, pero eso es genial.

Coincidentemente, Temani Afif recientemente compartió trucos que aprendió mientras experimentaba con redes implícitas. Al aprovechar el algoritmo de colocación automática de CSS Grid, ni siquiera tenemos que declarar explícitamente un número fijo de columnas y filas para una cuadrícula: ¡CSS las creará para nosotros si es necesario!

No, las técnicas de Temani no son soluciones alternativas al dilema del «carroñero» de Dave. :has()terminamos con una red bastante poderosa y de apariencia compleja que es liviana y capaz de manejar cualquier cantidad de elementos mientras mantiene un patrón equilibrado y repetitivo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba