Krypton Solid

Construir consultas de cantidad de CSS sobre la marcha

Construir consultas de cantidad de CSS sobre la marcha

A menudo, dentro de un proyecto, la presentación de nuestro contenido cambia en función de ciertas necesidades. Vemos esto cuando usamos consultas de medios para cambiar nuestros estilos según el dispositivo del usuario. Las consultas de cantidad de CSS siguen el mismo concepto de cambiar los estilos en función de una condición: la condición dentro de una consulta de cantidad es el número de elementos hermanos.

Un ejemplo sería la navegación donde los elementos tienen un 25% de ancho cuando hay cuatro elementos disponibles; sin embargo, cuando hay cinco elementos disponibles, el ancho de los elementos de navegación cambia al 20%. Este es un problema común con los marcos de sitios dinámicos como WordPress o Ghost.

Otras lecturas en SmashingMag:

Es posible que un cliente no se dé cuenta de las complicaciones que podrían surgir, por ejemplo, al agregar un elemento de menú más cuando el CSS no está configurado para encajarlo. Ahora, podría resolver fácilmente este problema con Flexbox (y muchos otros problemas), pero ¿qué pasa con una alternativa inteligente para los navegadores que no son compatibles con Flexbox, preferiblemente con CSS solo, sin JavaScript por completo? Idealmente, podríamos usar @supports – pero probablemente pueda adivinar qué navegadores no admiten la propiedad.

Debe haberse encontrado con este problema en el pasado: tiene un número dinámico de hermanos y necesita diseñarlos de manera diferente, según el recuento total de hermanos. Se puede resolver fácilmente con consultas de cantidad de CSS. Fuente de imagen: Consultas de cantidad en ALA.

Sin embargo, a veces Flexbox no es suficiente. ¿Qué pasa si está diseñando una galería con un número impar de elementos y le gustaría resaltar la imagen en el centro sin rastrear con JavaScript cuántos elementos caben en la pantalla? ¿O qué pasa con una tabla en la que algunas columnas pueden necesitar un estilo diferente en función de la cantidad de elementos que se pueden mostrar con una resolución determinada, por ejemplo, en la selección de un vuelo de una aerolínea o en la reserva de entradas de cine?

Lo mismo ocurre con casi todos los módulos que podrían sufrir alguna suma o resta dinámica de elementos. Puedes evitar demasiadas consultas de medios y soluciones alternativas de JavaScript?

Sí tu puedes. Aquí es donde se utilizan mejor las consultas de cantidad. Al ser creativos con los selectores de CSS, podemos contar el número de artículos hermanos y aplicar estilos si cumplen con las condiciones. Con estas consultas, podemos preparar nuestros diseños y proyectos para el futuro, y permitirles escalar sin problemas.

Un ejemplo de una consulta de cantidad

Usando selectores CSS como nth-last-child(), last-child y ~, podemos crear selectores que se ajusten a nuestros requisitos. Si está interesado en leer más sobre cómo funcionan, Lea Verou, Heydon Pickering y yo tengo escrito artículos sobre el tema.

A continuación, se muestra un ejemplo de una consulta de cantidad que aplicará estilos si hay por lo menos cinco elementos hermanos:


ul li:nth-last-child(n+5), ul li:nth-last-child(n+5) ~ li {
  // styles go here
}

Podemos llevar esto más lejos y cambiar la consulta para seleccionar todos los elementos hermanos hasta una cierta cantidad:


ul li:nth-last-child(-n+5):first-child, ul li:nth-last-child(-n+5):first-child ~ li {
  // styles go here 
}

Extendiéndonos aún más, podemos establecer límites y aplicar estilos si los elementos hermanos están dentro de un cierto rango.


ul li:nth-last-child(n+5):nth-last-child(-n+10):first-child, ul li:nth-last-child(-n+5):nth-last-child(-n+10):first-child ~ li {
  // styles go here
}

Una solución para escribir consultas de cantidad

Como puede ver, estas consultas pueden ser un poco detalladas y difíciles de escribir. Es por eso que creé CantidadQueries.com: una herramienta que necesitaba para ayudar a construir y demostrar consultas de cantidad para mis propios proyectos.

CantidadQueries.com
Construyendo consultas de cantidad en CantidadQueries.com (Ver captura de pantalla más grande)

Escrito como un experimento con Reaccionar, el proyecto se convirtió en una herramienta dinámica para que nuestra comunidad de diseño web la use y comprenda la mejor manera de aplicar estas consultas de cantidad.

La aplicación permite construir una consulta a través de tres preguntas: los elementos a contar, el tipo de consulta y la cantidad de elementos a contar. A partir de las preguntas, se crea un selector de CSS que se puede utilizar dentro de su proyecto, así como una pequeña demostración que reaccionará a su consulta.

Dentro de la demostración, a medida que se agregan o eliminan elementos, el color de los elementos cambiará a rosa para reflejar la consulta que se aplica a la demostración.

qq_demoImage-opt-small
Una demostración en acción. (Ver versión grande)

«Pero tengo que admitir el navegador X …»

Las consultas de cantidad se construyen utilizando propiedades CSS modernas para realizar la selección. Funcionarán en todos los navegadores modernos (tanto de escritorio como móviles, incluido Opera Mini 8), de regreso a IE9. Selectores como nth-last-child(), ~ y last-child se introdujeron en CSS3, y first-child fue introducido por CSS2.1. Obviamente, puede tratarlos como una mejora progresiva, pero si es absolutamente necesario que sea compatible con navegadores heredados, puede usar Selectivizr y Modernizr.

Usándolo hoy

Siéntase libre de marcar el sitio como favorito y tenerlo a mano en su cinturón de herramientas. Cada proyecto tiene requisitos diferentes y deberá adaptarse a las necesidades del cliente, pero la herramienta puede resultar útil cuando necesite un selector bastante complejo y no quiera pasar horas averiguando los cálculos. También puede utilizar Lea Verou’s Probador selector de pseudoclase estructural CSS3, Trucos CSS ‘ : enésimo probador y n-ésima prueba para las pruebas.

Si desea ayudar a mejorar la herramienta o descubre algún error, puede ayuda a mejorar la aplicación, o informar de cualquier asuntos. ¡Espero que el proyecto sea útil para sus proyectos!

Deja un comentario