Generer CSS Antal Queries med QQ Builder
Få udviklere kender til eller bruger CSS antal forespørgsler på deres hjemmesider. Det er en ret kompleks funktion, men også nyttig, når du Har forskellige varer i en beholder.
En mængde forespørgsel kan ændre / opdater CSS egenskaber baseret på foruddefinerede grænser for børneelementer. For eksempel, hvis du har mere end tre ting i en liste kan du gøre skrifttypen mindre for at spare plads. Et andet eksempel er opdatering af bredden af et link baseret på antal links i en navigationsmenu.
Opgaver som disse kan få kompliceret hurtigt men takket være Antal forespørgsler Builder du behøver ikke at huske nogen forvirrende syntaks.
Denne webapp genererer al koden for dig for at spare tid. Du skal vælg fra tre dropdown-menuer som tilpasser din mængde forespørgsel. De arbejder som dette:
- Selector - hvilket barnelement (er) skal tælles
- Forespørgsels type - vælg mellem “højst”, “i det mindste”, eller en kombination af “højst” & “i det mindste”
- Beløb - Det samlede antal poster, der skal filtreres
Dette virker forvirrende i kode, men det er et rigtigt simpelt koncept. Antal forespørgsler giver dig mulighed for at anvende CSS egenskaber baseret på det samlede antal barnelementer.
Så du kan Tilføj bestemte CSS-stilarter når der er sagt, i det mindste 4 barnelementer (4 eller flere). Eller det kunne du Tilføj kun stilarter, når der er højst 4 barnelementer (0-4 børn).
Med kombinationsvælgeren kan du definere Præcis hvor mange mindste og maksimale børn er nødvendige for at vise visse CSS egenskaber.
I eksemplet på screenshotet ovenfor har jeg sat i alt “højst” elementer til 2. Det betyder, at når jeg har 0, 1 eller 2 børn, er blokkene røde. Hvis jeg tilføjer endnu en til at få 3 børn, bliver alle blokke blå.
Hvis du ikke har nogen idé om hvad der foregår, kan du Klik på den lille informationsboks i sidepanelet. Det vil medbringe en modal vindue med fakta og syntaks forklarer kvantitets forespørgselsfunktionen.
Dette er et meget praktisk værktøj til både nybegyndere og erfarne udviklere. Det vil spare tid i det lange løb, og det vil hjælpe dig skabe mere dynamiske hjemmesider.
For at komme i gang skal du besøge QQ Builder hjemmeside og Start med at tilpasse dine funktioner. Du kan legetøj med resultaterne og tjek live previewen i den højre rude for at lære, hvordan dine ændringer påvirker barnets elementer.
Dette projekt er også tilgængelig på GitHub så du er fri til tjek kildekoden eller endda Download en kopi lokalt. Og hvis du elsker denne app eller har nogle spørgsmål / forslag til skaberen Drew Minns, kan du skyde ham en hurtig tweet @drewisthe.
