Gerar consultas de quantidade de CSS com o QQ Builder
Poucos desenvolvedores conhecem ou usam Consultas de quantidade CSS em seus sites. É um recurso bastante complexo, mas também é útil quando você tem itens variados em um contêiner.
Uma consulta de quantidade pode alterar / atualizar propriedades CSS baseado em limites pré-definidos para elementos filho. Por exemplo, se você tem mais de três itens em uma lista, você pode tornar a fonte menor para economizar espaço. Outro exemplo é atualizando a largura de um link baseado no número de links em um menu de navegação.
Tarefas como estas podem fique complicado rapidamente mas graças ao Construtor de consultas de quantidade você não precisa memorizar qualquer sintaxe confusa.
Este aplicativo da web gera todo o código para você para economizar tempo. Você precisa selecione entre três menus suspensos que personalizam sua consulta de quantidade. Eles funcionam assim:
- Seletor - qual (is) elemento (s) filho (s) devem ser contados
- Tipo de consulta - escolher entre “no máximo”, “finalmente”, ou uma combinação de “no máximo” E “finalmente”
- Montante - número total de itens para filtrar
Isso parece confuso no código, mas é um conceito muito simples. Consultas de quantidade permitem aplicar propriedades CSS com base no número total de elementos filho.
Então você pode adicionar certos estilos CSS quando há, digamos, finalmente 4 elementos filhos (4 ou mais). Ou você poderia adicionar estilos somente quando há no máximo 4 elementos filho (0 a 4 filhos).
O seletor de combinação permite definir exatamente quantas crianças mínimas e máximas são necessárias para exibir certas propriedades CSS.
No exemplo da imagem acima, eu configurei o total “no máximo” Unid para 2. Isso significa que quando eu tenho 0, 1 ou 2 filhos, os blocos são vermelhos. Se eu adicionar mais um para obter 3 filhos, todos os blocos ficarão azuis.
Se você não tem idéia do que está acontecendo, você pode clique na pequena caixa de informações na barra lateral. Isso trará uma janela modal com fatos e sintaxe explicando o recurso de consulta de quantidade.
Esta é uma ferramenta muito útil para iniciantes e desenvolvedores experientes. Vai poupe muito tempo a longo prazo e isso vai ajudá-lo criar sites mais dinâmicos.
Para começar, visite o site do construtor QQ e comece a personalizar seus recursos. Você pode brinquedo com os resultados e verifique a pré-visualização ao vivo no painel direito para saber como suas alterações afetam os elementos filho.
Este projeto também é disponível no GitHub então você está livre para confira o código fonte ou até mesmo baixe uma cópia localmente. E se você ama este aplicativo ou tiver dúvidas / sugestões para o criador Drew Minns você pode atirar nele um tweet rápido @drewisthe.
