kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Quantity Query – Layout-Veränderungen über die Anzahl an Elementen steuern

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

Beispiel anschauen

 

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.

Beispiel anschauen

 

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.

Beispiel anschauen

Browser-Support

Die Technologie hängt von CSS3-Selektoren ab, der Browsersupport beginnt daher beim IE9. Eine detaillierte Auswertung zeigt Can I Use.

Links / Quellen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

6 Kommentare

  1. Dirk

    Verfasst am 10. September 2015 um 6:03 Uhr.

    Super Tip für die Break Points – Toller Artikel! Grüße Dirk

    • Michel

      Verfasst am 14. September 2015 um 9:10 Uhr.

      War mir neu, hätte ich doch glatt mit jQuery gemacht, VIEL besser so. Danke.

  2. hans

    Verfasst am 17. September 2015 um 12:53 Uhr.

    ??? !!!!!! ???? 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 :)

  3. Webdesign Göttingen

    Verfasst am 19. Januar 2016 um 16:07 Uhr.

    Hallo, sehr guter Beitrag! Gut erklärt, ist sehr hilfreich.

  4. Webdesign Equinoxe Freiburg

    Verfasst am 18. Februar 2016 um 11:27 Uhr.

    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!

  5. Webdesveloper

    Verfasst am 20. Februar 2016 um 22:33 Uhr.

    Wow, super Artikel!

    Danke.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.