Generirajte CSS količinske upite s QQ Builder
Malo developera zna ili koristi Broj CSS upita na njihovim web stranicama. To je prilično složena značajka, ali i korisna kada vi imaju različite stavke u spremniku.
Brojni upit može promijeniti / ažurirati CSS svojstva na temelju unaprijed definirana ograničenja za podređene elemente. Na primjer, ako imate više od tri stavke na popisu možete smanjiti font da biste uštedjeli sobu. Drugi primjer je ažuriranje širine veze bazirano na broj veza u navigacijskom izborniku.
Ovakvi zadaci mogu brzo se zakomplicirati ali zahvaljujući Graditelj upita količine ne morate zapamtiti konfuznu sintaksu.
Ova web-aplikacija generira sav kôd za vas za uštedu vremena. Trebaš odaberite iz tri padajuća izbornika koje prilagođavaju vašu količinsku upitu. Oni rade ovako:
- Selektor - koji dječji (e) element (i) treba brojati
- Vrsta upita - birati između “najviše”, “barem”, ili kombinacija “najviše” & “barem”
- Iznos - ukupan broj stavki za filtriranje
To izgleda zbunjujuće u kodu, ali to je vrlo jednostavan koncept. Upiti o količinama omogućuju primjenu CSS svojstava na temelju ukupnog broja podređenih elemenata.
Tako možete dodati određene CSS stilove kad postoji, recimo, barem 4 podređena elementa (4 ili više). Ili, možete dodajte stilove samo kada tu je najviše 4 dječja elementa (0-4 djece).
Kombinirani selektor omogućuje definiranje točno koliko je djece minimalno i maksimalno su potrebne za prikaz određenih CSS svojstava.
U primjeru na slici iznad, postavio sam ukupno “najviše” stavke To znači da kad imam 0, 1 ili 2 djece, blokovi su crveni. Ako dodam još jednu da bih dobio 3 djece onda svi blokovi postanu plavi.
Ako nemate pojma što se događa, možete kliknite mali okvir s informacijama u bočnoj traci. To će dovesti do modalni prozor s činjenicama i sintaksom objašnjavajući značajku količinskog upita.
To je vrlo zgodan alat za početnike i iskusne programere. to će uštedite mnogo vremena na duge staze i to će vam pomoći stvoriti dinamičnije web-lokacije.
Da biste započeli, posjetite web-lokaciju QQ graditelja i započnite s prilagođavanjem značajki. Možeš igrati s rezultatima i provjerite pregled uživo u desnom oknu da biste saznali kako promjene utječu na podređene elemente.
Ovaj projekt je također dostupno na GitHubu tako da ste slobodni provjerite izvorni kod ili čak lokalno preuzmite kopiju. A ako volite ovu aplikaciju ili imate bilo kakvih pitanja / prijedloga za kreatora Drew Minns, možete ga brzo ubiti u cvrkut @drewisthe.
