Generează interogări de cantitate CSS cu constructorul QQ
Puțini dezvoltatori știu sau folosesc Solicitări privind cantitatea CSS pe site-urile lor. Este o trăsătură destul de complexă, dar este utilă și atunci când au elemente diferite într-un container.
O interogare cantitativă poate modificați / actualizați proprietățile CSS bazat pe limite predefinite pentru elementele copilului. De exemplu, dacă aveți mai mult de trei articole într-o listă puteți face fontul mai mic pentru a salva camera. Un alt exemplu este actualizarea lățimii unui link bazat pe numărul de linkuri într-un meniu de navigare.
Sarcini ca acestea pot complicați repede dar datorită Cantitate interogări Cantitate nu este nevoie să memorați o sintaxă confuză.
Această aplicație web generează tot codul pentru tine pentru a salva timp. Trebuie să selectați din trei meniuri derulante care personalizează interogarea cantitativă. Ei lucrează astfel:
- Selector - care element (elemente) copil (e) ar trebui să fie numărate
- Tipul interogării - alege intre “cel mult”, “macar”, sau o combinație de “cel mult” & “macar”
- Cantitate - numărul total de elemente pentru filtrare
Acest lucru pare confuz în cod, dar este un concept foarte simplu. Interogările de cantitate vă permit să aplicați proprietățile CSS pe baza numărului total de elemente ale copilului.
Asa ca poti adăugați anumite stiluri CSS când există, să zicem, macar 4 elemente copil (4 sau mai multe). Sau ai putea adăugați stiluri numai atunci când există cel mult 4 elemente copil (0-4 copii).
Combo selectorul vă permite să definiți exact câte copii minime & maxime sunt necesare pentru a afișa anumite proprietăți CSS.
În exemplul de pe captura de ecran de mai sus, am setat total “cel mult” articole la 2. Aceasta înseamnă că atunci când am 0, 1 sau 2 copii blocurile sunt roșii. Dacă adaug un altul pentru a obține 3 copii, atunci toate blocurile devin albastre.
Dacă nu aveți idee ce se întâmplă, puteți faceți clic pe caseta de informații mici în bara laterală. O să aducă a modal cu fapte și sintaxă explicând caracteristica de interogare cantitativă.
Acesta este un instrument foarte util pentru atât începători cât și dezvoltatori cu experiență. Se va salvați o mulțime de timp pe termen lung și vă va ajuta creați site-uri mai dinamice.
Pentru a începe, vizitați site-ul web al constructorului QQ și începeți personalizarea caracteristicilor dvs.. Poti jucărie cu rezultatele și verificați previzualizarea live în panoul din dreapta pentru a afla cum modificările vă afectează elementele copilului.
Acest proiect este, de asemenea disponibil pe GitHub deci ești liber să verificați codul sursă sau chiar descărcați o copie la nivel local. Și dacă vă place această aplicație sau aveți orice întrebări / sugestii pentru creatorul Drew Minns, puteți să-l împușcați cu un tweet rapid @drewisthe.
