Genera query quantitative CSS con QQ Builder
Pochi sviluppatori conoscono o usano Query quantitative CSS sui loro siti web. È una funzionalità abbastanza complessa ma utile anche quando si avere oggetti diversi in un contenitore.
Una query di quantità può modifica / aggiorna le proprietà CSS basato su limiti predefiniti per elementi figlio. Ad esempio, se lo hai più di tre articoli in una lista potresti rendere il carattere più piccolo per salvare spazio. Un altro esempio è aggiornando la larghezza di un link basato sul numero di link in un menu di navigazione.
Compiti come questi possono si complicano rapidamente ma grazie al Quantità Query Builder non è necessario memorizzare alcuna sintassi confusa.
Questa web app genera tutto il codice per te risparmiare tempo. Devi seleziona da tre menu a discesa che personalizzi la tua query di quantità. Funzionano così:
- Selettore - quale / i elemento / i figlio / i deve essere conteggiato
- Tipo di query - scegli tra “al massimo”, “almeno”, o una combinazione di “al massimo” & “almeno”
- Quantità - numero totale di elementi da filtrare
Questo sembra confondere il codice, ma è un concetto molto semplice. Le query di quantità consentono di applicare le proprietà CSS in base al numero totale di elementi figlio.
Così puoi aggiungi determinati stili CSS quando c'è, per esempio, almeno 4 elementi figlio (4 o più). Oppure potresti aggiungi stili solo quando c'è al massimo 4 elementi figlio (0-4 bambini).
Il selettore combinato ti consente di definire esattamente quanti bambini minimi e massimi sono necessari per visualizzare determinate proprietà CSS.
Nell'esempio sullo screenshot in alto, ho impostato il totale “al massimo” elementi a 2. Ciò significa che quando ho 0, 1 o 2 bambini i blocchi sono rossi. Se aggiungo un altro per ottenere 3 figli, tutti i blocchi diventano blu.
Se non hai idea di cosa sta succedendo, puoi farlo fare clic sulla piccola casella delle informazioni nella barra laterale. Farà apparire un finestra modale con fatti e sintassi spiegando la funzionalità di query quantità.
Questo è uno strumento molto utile per entrambi principianti e sviluppatori esperti. Sara risparmia molto tempo a lungo termine e ti aiuterà creare siti web più dinamici.
Per iniziare, visitare il sito Web del costruttore QQ e inizia a personalizzare le tue funzionalità. Puoi gioca con i risultati e controlla l'anteprima dal vivo nel riquadro destro per sapere in che modo le modifiche influiscono sugli elementi secondari.
Questo progetto è anche disponibile su GitHub quindi sei libero di farlo controlla il codice sorgente o anche scarica una copia localmente. E se ami questa app o hai domande / suggerimenti per il creatore Drew Minns, puoi mandargli un breve tweet @drewisthe.
