Generer CSS Quantity Queries med QQ Builder
Få utviklere vet om eller bruker CSS antall spørringer på deres nettsider. Det er en ganske kompleks funksjon, men også nyttig når du Har varierende gjenstander i en beholder.
En kvantitetsforespørsel kan endre / oppdater CSS egenskaper basert på forhåndsdefinerte grenser for barnelementer. For eksempel, hvis du har mer enn tre elementer I en liste kan du gjøre skrifttypen mindre for å spare rom. Et annet eksempel er oppdaterer bredden på en lenke basert på antall lenker i en navigasjonsmeny.
Oppgaver som disse kan bli komplisert raskt men takket være Antall spørringer Builder Du trenger ikke å huske noen forvirrende syntaks.
Denne web-appen genererer all koden for deg å spare tid. Du trenger å velg fra tre rullegardinmenyer som tilpasser kvantitetsforespørselen din. De jobber som dette:
- Selector - Hvilket barnelement (e) skal teller
- Forespørselstype - Velg mellom “på det meste”, “i det minste”, eller en kombinasjon av “på det meste” & “i det minste”
- Beløp - totalt antall elementer å filtrere
Dette virker forvirrende i kode, men det er et veldig enkelt konsept. Antall spørringer lar deg bruke CSS egenskaper basert på det totale antallet barnelementer.
Så du kan legg til visse CSS-stiler når det er sagt, i det minste 4 barns elementer (4 eller mer). Eller det kan du bare legg til stiler når det er på det meste 4 barns elementer (0-4 barn).
Med kombinasjonsvelgeren kan du definere nøyaktig hvor mange minimum og maksimum barn er nødvendig for å vise bestemte CSS egenskaper.
I eksemplet på skjermbildet ovenfor har jeg satt Total “på det meste” elementer til 2. Dette betyr at når jeg har 0, 1 eller 2 barn, er blokkene røde. Hvis jeg legger til en til å få 3 barn, blir alle blokkene blå.
Hvis du ikke har en anelse om hva som foregår, kan du Klikk på den lille informasjonsboksen i sidefeltet. Det vil ta opp en Modal vindu med fakta og syntaks forklarer kvantitetsforespørselsfunksjonen.
Dette er et veldig praktisk verktøy for både nybegynnere og erfarne utviklere. det vil spare mye tid i det lange løp, og det vil hjelpe deg skape mer dynamiske nettsteder.
For å komme i gang, besøk QQ Builder nettsted og begynn å tilpasse funksjonene dine. Du kan leketøy med resultatene og sjekk live forhåndsvisning i høyre rute for å lære hvordan endringene påvirker barnets elementer.
Dette prosjektet er også tilgjengelig på GitHub så du er fri til sjekk kildekoden eller Last ned en kopi lokalt. Og hvis du elsker denne appen eller har noen spørsmål / forslag til skaperen Drew Minns, kan du skyte ham en rask tweet @drewisthe.
