Genereer CSS Quantity Queries met de QQ Builder

Weinig ontwikkelaars weten het of gebruiken het CSS-hoeveelhedenquery's op hun websites. Het is een vrij complexe functie, maar ook handig als je hebben verschillende items in een container.

Een kwantiteitsquery kan CSS-eigenschappen wijzigen / bijwerken gebaseerd op vooraf gedefinieerde limieten voor onderliggende elementen. Bijvoorbeeld, als je dat hebt gedaan meer dan drie items in een lijst kunt u het lettertype kleiner maken om ruimte te besparen. Een ander voorbeeld is het updaten van de breedte van een link gebaseerd op de aantal links in een navigatiemenu.

Taken zoals deze kunnen wordt snel ingewikkeld maar dankzij de Aantal Queries Builder u hoeft geen verwarrende syntaxis te onthouden.

Deze web-app genereert alle code voor u tijd besparen. Je moet selecteer uit drie vervolgkeuzemenu's die uw kwantiteitsquery aanpassen. Ze werken als volgt:

• keuzeschakelaar - welk (e) kinderelement (en) moet worden geteld
• Zoekopdracht - kies tussen “hooguit”, “tenminste”, of een combinatie van “hooguit” & “tenminste”
• Bedrag - totaal aantal items om te filteren

Dit lijkt verwarrend in de code, maar het is een heel eenvoudig concept. Met hoeveelhedenquery's kunt u CSS-eigenschappen toepassen op basis van het totale aantal onderliggende elementen.

Dus je kunt het voeg bepaalde CSS-stijlen toe wanneer er is, zeg, tenminste 4 onderliggende elementen (4 of meer). Of je zou kunnen stijlen alleen toevoegen wanneer er is hooguit 4 kindelementen (0-4 kinderen).

Met de comboselector kunt u definiëren precies hoeveel minimum en maximum kinderen zijn nodig om bepaalde CSS-eigenschappen weer te geven.

In het voorbeeld op de bovenstaande schermafbeelding heb ik de totaal “hooguit” items tot 2. Dit betekent dat als ik 0, 1 of 2 kinderen heb, de blokken rood zijn. Als ik er nog een toevoeg om 3 kinderen te krijgen, worden alle blokken blauw.

Als je geen idee hebt wat er aan de hand is, kan dat klik op het kleine informatievak in de zijbalk. Het zal een modaal venster met feiten en syntaxis uitleg van de kwantiteitsquery-functie.

Dit is een erg handig hulpmiddel voor zowel beginners als ervaren ontwikkelaars. Het zal bespaar veel tijd op de lange termijn en het zal je helpen maak meer dynamische websites.

Ga om te beginnen naar de QQ-builderwebsite en begin met het aanpassen van je functies. Jij kan speel met de resultaten en bekijk de live preview in het rechterdeelvenster om te ontdekken hoe uw wijzigingen de onderliggende elementen beïnvloeden.

Dit project is ook beschikbaar op GitHub dus je bent vrij om te doen bekijk de broncode of zelfs lokaal een kopie downloaden. En als je van deze app houdt of vragen of suggesties hebt voor de maker Drew Minns, kun je hem een ​​korte tweet sturen @drewisthe.