Generieren Sie CSS-Mengenabfragen mit dem QQ Builder

Nur wenige Entwickler kennen oder nutzen diese CSS-Mengenabfragen auf ihren Websites. Es ist eine ziemlich komplexe Funktion, aber auch nützlich, wenn Sie unterschiedliche Artikel in einem Container haben.

Eine Mengenabfrage kann CSS-Eigenschaften ändern / aktualisieren beyogen auf vordefinierte Grenzwerte für untergeordnete Elemente. Zum Beispiel, wenn Sie haben mehr als drei Artikel In einer Liste können Sie die Schrift verkleinern, um Platz zu sparen. Ein anderes Beispiel ist Aktualisieren der Breite eines Links basierend auf Anzahl der Links in einem Navigationsmenü.

Aufgaben wie diese können schnell kompliziert werden aber danke an die Generator für Mengenabfragen Sie müssen sich keine verwirrende Syntax merken.

Diese Web-App generiert den gesamten Code für Sie um Zeit zu sparen. Du musst Wählen Sie aus drei Dropdown-Menüs die Ihre Mengenanfrage anpassen. Sie arbeiten so:

Wähler - welche untergeordneten Elemente sollen gezählt werden
Abfragetyp - wählen zwischen “maximal”, “wenigstens”, oder eine Kombination von “maximal” & “wenigstens”
Menge - Gesamtzahl der zu filternden Elemente

Dies scheint im Code verwirrend zu sein, aber es ist ein wirklich einfaches Konzept. Mit Mengenabfragen können Sie CSS-Eigenschaften anwenden basierend auf der Gesamtzahl der untergeordneten Elemente.

Also kannst du fügen Sie bestimmte CSS-Stile hinzu wenn es da ist, sagen wir, wenigstens 4 untergeordnete Elemente (4 oder mehr). Oder du könntest fügen Sie nur Stile hinzu, wenn da ist maximal 4 untergeordnete Elemente (0-4 Kinder).

Mit dem Kombinationswähler können Sie definieren genau wie viele minimale und maximale Kinder sind erforderlich, um bestimmte CSS-Eigenschaften anzuzeigen.

Im obigen Beispiel habe ich das eingestellt gesamt “maximal” Artikel zu 2. Dies bedeutet, wenn ich 0, 1 oder 2 Kinder habe, sind die Blöcke rot. Wenn ich noch ein Kind hinzufüge, um 3 Kinder zu bekommen, werden alle Blöcke blau.

Wenn Sie keine Ahnung haben, was los ist, können Sie Klicken Sie auf das kleine Informationsfeld in der Seitenleiste. Es bringt ein modales Fenster mit Fakten und Syntax Erläuterung der Mengenabfrage.

Dies ist ein sehr nützliches Werkzeug für Anfänger und erfahrene Entwickler. Es wird Sparen Sie viel Zeit auf lange Sicht und es wird dir helfen Erstellen Sie dynamischere Websites.

Besuchen Sie zunächst die QQ Builder-Website und Beginnen Sie mit der Anpassung Ihrer Funktionen. Sie können Spielzeug mit den Ergebnissen und Überprüfen Sie die Live-Vorschau Im rechten Fensterbereich erfahren Sie, wie sich Ihre Änderungen auf die untergeordneten Elemente auswirken.

Dieses Projekt ist auch verfügbar auf GitHub Du kannst also frei Schauen Sie sich den Quellcode an oder auch Laden Sie eine Kopie lokal herunter. Und wenn Sie diese App lieben oder Fragen / Anregungen für den Schöpfer Drew Minns haben, können Sie ihm einen kurzen Tweet @drewisthe schießen.