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.

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Webdesveloper
    schrieb am 20.02.2016 um 22:33 Uhr:

    Wow, super Artikel!

    Danke.

    Antworten
  2. Webdesign Equinoxe Freiburg
    schrieb am 18.02.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!

    Antworten
  3. Webdesign Göttingen
    schrieb am 19.01.2016 um 16:07 Uhr:

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

    Antworten
  4. hans
    schrieb am 17.09.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 :)

    Antworten
  5. Dirk
    schrieb am 10.09.2015 um 06:03 Uhr:

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

    Antworten
    • Michel
      schrieb am 14.09.2015 um 09:10 Uhr:

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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →