Generera CSS Antal Queries med QQ Builder
Få utvecklare vet om eller använder CSS kvantitetsfrågor på deras webbplatser. Det är en ganska komplex funktion men också användbar när du har varierande föremål i en behållare.
En kvantitetsfråga kan ändra / uppdatera CSS-egenskaper baserat på fördefinierade gränser för barnelement. Till exempel, om du har mer än tre saker I en lista kan du göra teckensnittet mindre för att spara utrymme. Ett annat exempel är uppdatera bredden på en länk baserat på antal länkar i en navigeringsmeny.
Uppgifter som dessa kan bli komplicerad snabbt men tack vare Antal Queries Builder du behöver inte memorera någon förvirrande syntax.
Denna webbapp genererar all kod för dig för att spara tid. Du behöver välj från tre rullgardinsmenyer som anpassar din kvantitetsfråga. De arbetar så här:
- Väljare - vilket barnelement (r) ska räknas
- Frågestyp - Välj mellan “som mest”, “åtminstone”, eller en kombination av “som mest” & “åtminstone”
- Belopp - totalt antal objekt att filtrera
Detta verkar förvirrande i kod men det är ett riktigt enkelt koncept. Antal frågor kan du använda CSS egenskaper baserat på det totala antalet barnelement.
Så du kan lägg till vissa CSS-stilar när det är sagt, åtminstone 4 barnelement (4 eller mer). Eller så kan du Lägg bara till stilar när det finns som mest 4 barnselement (0-4 barn).
Med kombinationsväljaren kan du definiera exakt hur många minsta och maximala barn är nödvändiga för att visa vissa CSS-egenskaper.
I exemplet på skärmdumpen ovan har jag satt total “som mest” objekt till 2. Det betyder att när jag har 0, 1 eller 2 barn är blocken röda. Om jag lägger till en till att få 3 barn blir alla block blått.
Om du inte har någon aning om vad som händer kan du klicka på den lilla informationsrutan i sidofältet. Det kommer att ta upp en modalt fönster med fakta och syntax förklarar kvantitetsfrågan.
Detta är ett mycket användbart verktyg för både nybörjare och erfarna utvecklare. det kommer spara mycket tid på lång sikt och det hjälper dig skapa mer dynamiska webbplatser.
För att komma igång, besök QQ Builder webbplats och börja anpassa dina funktioner. Du kan leksak med resultaten och kolla live previewen i den högra rutan för att lära dig hur dina förändringar påverkar barnelementen.
Detta projekt är också tillgänglig på GitHub så du är fri att kolla källkoden eller ens ladda ner en kopia lokalt. Och om du älskar denna app eller har några frågor / förslag till skaparen Drew Minns kan du skjuta honom en snabb tweet @drewisthe.
