Generování dotazů na množství CSS pomocí nástroje QQ Builder
Jen málo vývojářů ví nebo používá Množstevní dotazy CSS na svých internetových stránkách. Je to poměrně komplexní funkce, ale také užitečná, když vy mají různé položky v kontejneru.
Množstevní dotaz může změnit / aktualizovat vlastnosti CSS na základě předdefinované limity pro dětské elementy. Například, pokud máte více než tři položky v seznamu můžete zmenšit velikost písma, aby se místo uložilo. Dalším příkladem je aktualizace šířky odkazu založeno na počet odkazů v navigačním menu.
Úkoly jako tyto mohou rychle se komplikujte ale díky Builder množství dotazů nemusíte si zapamatovat žádnou matoucí syntaxi.
Tato webová aplikace vygeneruje pro vás celý kód šetří čas. Musíš vyberte ze tří rozbalovacích nabídek přizpůsobení dotazu na množství. Pracují takto:
- Volič - který prvek (prvky) dítěte by měl být započítán
- Typ dotazu - Vyber mezi “nejvíce”, “alespoň”, nebo combo “nejvíce” & “alespoň”
- Množství - celkový počet položek, které chcete filtrovat
Zdá se to matoucí v kódu, ale je to opravdu jednoduchý koncept. Množstevní dotazy umožňují použít vlastnosti CSS podle celkového počtu podřízených prvků.
Takže můžeš přidat určité styly CSS když je, řekněme, alespoň 4 dětské prvky (4 nebo více). Nebo můžete přidat styly pouze tehdy, když je tam nejvíce 4 dětské prvky (0-4 děti).
Volič combo umožňuje definovat přesně, kolik minimálních a maximálních dětí k zobrazení určitých vlastností CSS.
V příkladu na obrázku nahoře jsem nastavil celkový “nejvíce” položek To znamená, že když mám 0, 1 nebo 2 děti, bloky jsou červené. Pokud přidám ještě jednu, abych dostal 3 děti, pak všechny bloky zbarví modře.
Pokud nemáte ponětí, co se děje, můžete klepněte na malé informační pole v postranním panelu. Vyvolá to modální okno s fakty a syntaxí vysvětlující funkci dotazu na kvantitu.
To je velmi užitečný nástroj pro začátečníky i zkušené vývojáře. Bude to ušetřit spoustu času v dlouhodobém horizontu a pomůže vám to vytvářet dynamičtější webové stránky.
Chcete-li začít, navštivte webové stránky tvůrce QQ a začněte přizpůsobovat své funkce. Můžeš s výsledky a zkontrolujte živý náhled V pravém podokně se dozvíte, jak vaše změny ovlivňují podřízené prvky.
Tento projekt je také dostupné na GitHub takže můžete svobodně podívejte se na zdrojový kód nebo dokonce místně stáhnout kopii. A pokud máte rádi tuto aplikaci nebo máte nějaké otázky / návrhy pro tvůrce Drew Minns můžete střílet ho rychlý tweet @drewisthe.
