es.hideout-lastation.com
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 :

  1. Consultas "al menos" cuando hay más de una cierta cantidad del mismo tipo de contenido en la pantalla.
  2. Consultas "a lo sumo" cuando hay menos de una cierta cantidad del mismo tipo de contenido en la pantalla.
  3. "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

      padre, que solo es cierto para las listas desordenadas que contienen un máximo de cinco
    • 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 .

      Comenzando con React.js

      Comenzando con React.js

      React.js es una biblioteca de JavaScript flexible y basada en componentes para crear interfaces de usuario interactivas . Fue creado y abierto por Facebook y es utilizado por muchas compañías tecnológicas líderes como Dropbox, AirBnB, PayPal y Netflix. React les permite a los desarrolladores crear aplicaciones de datos pesados que pueden actualizarse de forma sencilla volviendo a procesar solo los componentes necesarios .Rea

      (Consejos de tecnología y diseño)

      Elementos de infografía por Vector Stock abierto

      Elementos de infografía por Vector Stock abierto

      Si ha encontrado muchas infografías en línea, es posible que haya pensado en liberar la suya propia. Hay muchas herramientas para ayudarlo a hacerlo con bastante facilidad, pero su diseño estará lejos de ser único, en cuanto al diseño. Para ayudarlo con esto, nuestros amigos de Vector Open Stock han lanzado un regalo de promoción exclusivo para los lectores de hongkiat.com.Ve

      (Consejos de tecnología y diseño)