Generar consultas de cantidad de CSS con QQ Builder
Pocos desarrolladores conocen o usan Consultas de cantidad de CSS en sus sitios web. Es una característica bastante compleja pero también útil cuando tener diferentes elementos en un contenedor.
Una consulta de cantidad puede cambiar / actualizar las propiedades de CSS Residencia en Límites predefinidos para elementos secundarios.. Por ejemplo, si tiene más de tres artículos en una lista puede hacer que la fuente sea más pequeña para ahorrar espacio. Otro ejemplo es actualizando el ancho de un enlace basado en el número de enlaces en un menú de navegación.
Tareas como estas pueden se complica rápidamente pero gracias a la Generador de consultas de cantidad No necesitas memorizar ninguna sintaxis confusa.
Esta aplicación web genera todo el código para ti Para ganar tiempo. Necesitas seleccione entre tres menús desplegables que personalizar su consulta de cantidad. Funcionan así:
- Selector - qué elemento (s) hijo (s) deben ser contados
- Tipo de consulta - Escoger entre “a lo sumo”, “al menos”, o un combo de “a lo sumo” Y “al menos”
- Cantidad - número total de elementos a filtrar
Esto parece confuso en el código, pero es un concepto muy simple. Las consultas de cantidad le permiten aplicar propiedades CSS basado en el número total de elementos secundarios.
Así que puedes añadir ciertos estilos CSS cuando hay, digamos, al menos 4 elementos hijo (4 o más). O bien, podrías agregar estilos solo cuando hay a lo sumo 4 elementos hijo (0-4 niños).
El selector de combo te permite definir exactamente cuántos niños mínimo y máximo Son necesarios para mostrar ciertas propiedades CSS..
En el ejemplo de la captura de pantalla anterior, he establecido el total “a lo sumo” artículos a 2. Esto significa que cuando tengo 0, 1 o 2 hijos, los bloques son rojos. Si agrego uno más para obtener 3 niños, todos los bloques se vuelven azules..
Si no tienes idea de lo que está pasando puedes haga clic en el pequeño cuadro de información en la barra lateral Traerá un Ventana modal con hechos y sintaxis. explicando la característica de consulta de cantidad.
Esta es una herramienta muy útil para Desarrolladores tanto principiantes como experimentados.. Va a ahorra mucho tiempo a la larga y te ayudará crear sitios web más dinámicos.
Para comenzar, visite el sitio web de QQ builder y empieza a personalizar tus funciones. Usted puede juguete con los resultados y Compruebe la vista previa en vivo en el panel derecho para aprender cómo sus cambios afectan los elementos secundarios.
Este proyecto es también disponible en GitHub entonces eres libre de mira el código fuente o incluso descargar una copia localmente. Y si te encanta esta aplicación o tienes alguna pregunta / sugerencia para el creador Drew Minns, puedes dispararle un tweet rápido @drewisthe.
