Quantity Query – Layout-Veränderungen über die Anzahl an Elementen steuern
In diesem Beitrag lernt ihr Quantity Queries anhand zahlreicher Beispiele kennen.
Im responsive Design wird i.d.R. mit Hilfe von Breakpoints das Layout umstrukturiert, sobald eine bestimmte Displaygröße erreicht ist. Schwierig wird es allerdings, wenn man zum Zeitpunkt der Entwicklung nicht weiß, wie breit ein bestimmtes Element ist. Beispielsweise weil die Ausgabe dynamisch erfolgt oder weil ein Kunde über das CMS selbstständig Inhalte ergänzen kann. Hier kommen die sog. Quantity Queries (Mengenabfragen) ins Spiel: Mit ihrer Hilfe kann die Darstellung verändert werden, sobald eine festgelegte Anzahl an Elementen unter- und/oder überschritten wird.
Das Grundprinzip von Quantity Queries
Quantity Queries ermöglichen es euch Breakpoints zu setzen, die von der Menge der Geschwister-Elemente in einem festgelegten Bereich abhängig sind. Somit lassen sich beispielsweise Navigationen verändern, sobald mehr als X Listenelemente einhalten sind. Quantity Queries erweitern die Möglichkeiten des responsive Design, da auf inhaltliche Änderungen – beispielsweise durch den Kunden – reagiert werden kann. Sie sind immer dann von Nutzen, wenn die Anzahl von Elementen in einem Bereich variieren kann und der Webdesigner nicht vorhersehen kann wie viele Elemente tatsächlich in diesem Bereich auftauchen.
Die Syntax
Quantity Queries funktionieren mit Hilfe eines komplexen CSS-Selektors. Mit :nth-last-child
wird von hinten durch Geschwister-Elemente gezählt. Sobald die gewünschte Anzahl erreicht ist, werden alle Geschwister-Elemente angesprochen.
Im folgenden Beispiel verändert sich die Darstellung, sobald fünf oder mehr Listenpunkte zu einer Navigation hinzugefügt wurden. In der ersten Zeile des Beispiels wird von hinten durch die Anzahl der Listenpunkte gezählt bis der fünfte erreicht wurde. Wenn weniger als fünf <li>
s vorhanden sind, greift der Selektor nicht. Sobald bis fünf gezählt werden kann, werden alle Geschwisterelemente ausgewählt. Das geschieht in der zweiten Zeile des Beispiels.
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
background:red;
}
Wir haben euch eine interaktive Demo erstellt, in der ihr per Klick Listenpunkte hinzufügen oder entfernen könnt.
Die minimale Anzahl an Elementen abfragen
Der folgende und oben bereits kennengelernte Selektor reagiert, sobald weniger als fünf Elemente vorhanden sind.
.parent .child:nth-last-child(n+5),
.parent .child:nth-last-child(n+5) ~ .child {
}
Die maximale Anzahl an Elementen abfragen
Wenn ihr einen Selektor konstruieren möchtet, der so lange reagiert bis maximal fünf Elemente vorhanden sind, wählt folgende Schreibweise:
.parent .child:nth-last-child(-n+5):first-child,
.parent .child:nth-last-child(-n+5):first-child ~ .child {
}
Eine Ober- und Untergrenze festlegen
Wenn ihr sowohl eine Ober- als auch eine Untergrenze festlegen wollt, kombiniert die Selektoren. Der folgende Code ermöglicht eine Auswahl, wenn mehr als fünf und weniger als 10 Elemente vorhanden sind.
.parent .child:nth-last-child(n+5):nth-last-child(-n+10):first-child,
.parent .child:nth-last-child(n+5):nth-last-child(-n+10):first-child ~ .child {
}
Da es etwas schwierig sein kann die Selektoren zu schreiben, wurde bereits ein entsprechendes Tool entwickelt, mit dessen Hilfe ihr die Abfragen generieren könnt.
Quantity Queries im Praxiseinsatz
In der Praxis gibt es viele sinnvolle Einsatzmöglichkeiten für Quantity Queries. Beispielsweise die bereits erwähnte Hauptnavigation. Angenommen ein Kunde hat über das CMS die Möglichkeit selbstständig Menüpunkte hinzuzufügen. Sobald er zu viele Menüpunkte hinzufügt, könntet ihr die Darstellung entsprechend abfangen. Das folgende interaktive Beispiel zeigt wie die Navigation von einer horizontalen Ausrichtung in eine vertikale Ausrichtung geändert wird, sobald mehr als sechs Menüpunkte vorhanden sind.
Eine weitere typische Einsatzmöglichkeit ist die Darstellung von Galerien. Im folgenden Beispiel ändern wir das Raster einer angedeuteten Bildergalerie jedes Mal, wenn ein Element hinzugefügt wird.
Browser-Support
Die Technologie hängt von CSS3-Selektoren ab, der Browsersupport beginnt daher beim IE9. Eine detaillierte Auswertung zeigt Can I Use.
Wow, super Artikel!
Danke.
Das muss ich mir merken, war neu für mich, hatte aber schon oft genug den Fall, der hier erklärt wird, mit der Navigation. Gerade dafür ist der Tipp Gold wert!
Hallo, sehr guter Beitrag! Gut erklärt, ist sehr hilfreich.
??? !!!!!! ???? wooooow, warum habe ich da nie von gehört?????? das ist ja DER SHIT. habe das immer mit PHP gemacht … :-P. und mit „selectivizr“ läuft es dann auch im IE 8 :)
Super Tip für die Break Points – Toller Artikel! Grüße Dirk
War mir neu, hätte ich doch glatt mit jQuery gemacht, VIEL besser so. Danke.