Paraíso Para Los Diseñadores Y Desarrolladores

Use consultas de cantidad para hacer que su CSS sea consciente de la cantidad

Las consultas de cantidad son selectores de CSS especialmente configurados que permiten a los desarrolladores hacer que su código sea consciente de la cantidad . En el diseño receptivo, generalmente usamos consultas de medios para adaptar nuestro diseño a diferentes ventanas gráficas. Sin embargo, en algunos casos, es posible que deseemos cambiar a un diseño diferente o usar otras dimensiones o estética después de que haya cierta cantidad del mismo tipo de contenido en la pantalla.

Es un problema frecuente con los sitios web dinámicos que no siempre sabemos de antemano cuántos elementos estarán en la pantalla . Piense en las etiquetas al final de las publicaciones de blog, en los filtros específicos del producto en la navegación de los sitios de comercio electrónico o en los resultados de búsqueda en el sitio. Aquí es cuando las consultas de cantidad pueden darnos una solución elegante, exclusiva de CSS, y ahorrarnos la molestia de usar JavaScript.

Cómo se compilan las consultas de cantidad

Podemos crear tres tipos de consultas de cantidad :

Consultas "al menos" cuando hay más de una cierta cantidad del mismo tipo de contenido en la pantalla.
Consultas "a lo sumo" cuando hay menos de una cierta cantidad del mismo tipo de contenido en la pantalla.
"Entre" consultas cuando hay más de una cierta cantidad, pero menos que otra cantidad del mismo tipo de contenido en la pantalla.

Los tres tipos de consultas de cantidad se generan utilizando la :nth-last-child CSS :nth-last-child y el selector general de hermanos ( ~ ), mientras que las consultas "at-most" y "between" también hacen uso de :first-child pseudo-clase .

La pseudo-clase :nth-last-child comporta de manera similar a :nth-child, sin embargo, comienza el recuento desde el último hijo, mientras que el selector de hermanos general ( ~ ) selecciona todos los elementos que vienen después de un determinado elemento de hermano .

Consultas "al menos"

Lo más importante para comprender es que las consultas de cantidad seleccionan todos los elementos que pertenecen al mismo elemento principal, ya que el objetivo es asignar el mismo diseño a todos los elementos que cumplen los criterios de cantidad .

En el fragmento de código a continuación, seleccionamos todos

elementos en una lista desordenada que contiene un mínimo de cinco elementos de lista .

 / * Consulta "al menos" * / ul li: n-last-child (n + 5), ul li: n-last-child (n + 5) ~ li {background-color: orange; }

Como puede ver, una consulta "al menos" se compone de dos selectores de CSS . El primer selector, ul li:nth-last-child(n+5) selecciona todo

elementos que están al menos cinco elementos lejos del último hijo . Sin embargo, esta regla de estilo por sí sola no es suficiente, ya que no hace que todos los elementos se vean iguales: los últimos cuatro elementos mantendrán su estilo original. Es por eso que necesitamos agregar el segundo selector, que selecciona todos los hermanos generales de los elementos previamente seleccionados.

Para volver a nuestro código de ejemplo, agrega un fondo naranja a todos los elementos de las listas desordenadas que tienen al menos cinco elementos, mientras que las listas desordenadas con menos de cinco

los elementos mantendrán su color predeterminado (azul) . Puede probar en vivo cómo funciona la consulta "al menos" en el lápiz Codepen a continuación.

Consultas "a lo sumo"

Las consultas "a lo sumo" también se componen de dos selectores, sin embargo, no solo se basan en la :nth-last-child, sino también en :first-child . El siguiente código de ejemplo selecciona todo

elementos que pertenecen a una lista desordenada que tienen un máximo de cinco elementos de lista .

 / * Consulta "a lo sumo" * / ul li: nth-last-child (-n + 5): primer hijo, ul li: nth-last-child (-n + 5): first-child ~ li { color de fondo: naranja; }

La primera parte del primer selector :nth-last-child(-n+5), usa un valor negativo que intercambia la dirección de la selección, todavía cuenta desde el último hijo (que es la naturaleza incorporada del :nth-last-child pseudo clase :nth-last-child ), sin embargo ahora seleccionará los últimos cinco elementos (es decir, los elementos que no están al menos cinco elementos lejos del último hijo). Este selector selecciona los últimos cinco elementos de cualquier lista desordenada, sin embargo, solo queremos seleccionar aquellos que tienen un máximo de cinco elementos (ya que de esta forma se seleccionarán todos los elementos).

Es por eso que debemos combinarlo con la :first-child que seleccionará los primeros elementos de los elementos de la lista previamente seleccionados, pero solo para aquellos que también sean el primer hijo de su

elementos.
Ahora no tenemos que hacer nada más que agregar el segundo selector, que seleccionará los hermanos generales de los elementos previamente seleccionados :first-child . Y eso es todo, nuestra consulta "a lo sumo" está hecha. Puedes ver el código CSS en la demostración en vivo a continuación para ver cómo funciona.
"Entre" consultas
La consulta "entre" combina el código que hemos utilizado para las consultas "at-least" y "at-most". El siguiente ejemplo de código selecciona todos los elementos de listas desordenadas que contienen un mínimo de cinco, pero un máximo de seis elementos de lista .
```
 / * "Entre" query * / ul li: nth-last-child (n + 5): nth-last-child (-n + 6): first-child, ul li: nth-last-child (n + 5 ): n-last-child (-n + 6): first-child ~ li {background-color: orange; } 
```
Para crear una "consulta intermedia", concatenamos los selectores CSS que pertenecen a las consultas apropiadas "al menos" y "a lo sumo". La consulta "al menos" en nuestro ejemplo es :nth-last-child(n+5), mientras que la consulta "at-most" es :nth-last-child(-n+6):first-child, we simplemente únelos con dos puntos .
Casos de uso
Las consultas de cantidad tienen muchos casos de uso interesantes, desde navegaciones con contenido orientado a sistemas de grillas automáticos, aquí hay una colección de algunos de los mejores:
- Una lista aparte: cómo construir una navegación consciente del contenido
- Tomango: una lista de etiquetas y un sistema de grilla flexible
- Blog de Charlotte Jackson: código de experimentos con consultas de cantidad
- Codepen: un sistema de grilla automático de Vincent Durand
- Codepen: una cuadrícula de imágenes que utiliza consultas de cantidad y Flexbox de Lucas Lemonnier
- Codepen: Una lista de enlaces colapsables por Craig Morey
Herramientas para generar consultas de cantidad
Existen algunas excelentes herramientas para desarrolladores que pueden ayudarlo a generar consultas de cantidad más fácilmente.
Generador de consultas de cantidad
Este útil generador de consultas por cantidad hace que la creación de consultas de cantidad sea fácil y directa. Solo debe completar tres campos de entrada (elementos a contar, tipo de consulta, cantidad de elementos) y la herramienta genera la consulta de cantidad que necesita.
Cantidad query mixins para SASS
Puede utilizar estas simples combinaciones de consulta de cantidad en sus proyectos Sass . El autor, Daniel Guillan, también creó una demo de Codepen donde puedes ver las mixinas en acción.
Plugin PostCSS para consultas de cantidad
Este complemento de PostCSS se basa en las combinaciones de consultas de cantidad antes mencionadas, y le permite incluir consultas de cantidad en su flujo de trabajo PostCSS .

Agregue su propia barra de progreso de carga de página con Pace.js

Para algunos usuarios, una barra de progreso puede ser muy útil. Les informa cuánto más cerca están de completar tareas. Normalmente, esto se usa para brindar una experiencia más amigable para el usuario. Cuando abre una página web en su navegador favorito, ya hay una barra de progreso predeterminada en la pestaña del navegador para ver si la página está completamente cargada.Con Pace

(Consejos de tecnología y diseño)

Microtip - Biblioteca de información sobre herramientas de CSS con características de accesibilidad nativa

Puede hacer una búsqueda rápida en GitHub para encontrar docenas de bibliotecas de información sobre herramientas personalizadas. Y parece que los nuevos llegan a la web todos los meses.Microtip es un recurso único, ya que se ejecuta en herramientas de CSS puro, ofrece una estética personalizada y utiliza un código fuente totalmente accesible para todos los usuarios.Si nu

(Consejos de tecnología y diseño)