Element Queries im responsive Webdesign

Media Queries sind ein wichtiger Bestandteil des Webdesigns und wurden bisher vor allem verwendet um Websites an das responsive Design anzupassen. Für jedes Endgerät ist es mittlerweile notwendig geworden eine Website mit ihren Elementen zu optimieren und in ihrem jeweiligen Viewport gut aussehen zu lassen. Dabei stößt man mit den Media Queries aber zunehmend an Grenzen und es gibt mehr und mehr Ideen für alternative Lösungen. Element Queries beweisen sich als Alternative für die Zukunft des Responsive Webdesign.

Websites responsive gestalten

Als Ethan Marcotte 2010 seine Gedanken zum Thema responsive Webdesign schrieb, prägte er damit einen neuen Begriff und verdeutlichte, dass die Herangehensweisen der Designer und die Ansprüche der User in Einklang gebracht werden müssen. Damit entstanden neue Ansätze wie "Mobile First", neue Designpatterns wurden entwickelt (z.B. Brad Frost: Responsive Patterns) und gänzlich neue HTML Elemente wie <picture> wurden eingeführt. Auch etliche CSS Frameworks, die Programmierern die Arbeit erleichtern sollen, wurden zur Verfügung gestellt.

Das Ziel sollte immer sein eine Website nicht auf Bildschirmgrößen, Endgeräte oder Browser anzupassen, sondern die Website so zu konzipieren, dass sie in jeder Bildschirmgröße auf jedem Gerät oder Browser gleich gut aussieht und bedienbar ist.

Media Queries im Einsatz für responsive Webdesign

Media Queries ermöglichen es, bestimmte Stile (Farben, Formen etc) auf bestimmte Umgebungen zu verändern. Die bekannteste Form ist die Anwendung auf den "Viewport" des Browsers wie im Beispiel unten zu sehen:

.text-section {
  display: flex;
 
  img {
    flex: 0 0 25%;
  }
 
  .text {
    flex: 1;
  }
 
  @media ( max-width: 720px ) {
    flex-direction: column;
 
    img {
        flex: 1;
    }
  }
}

Die Media Queries wurden im Laufe der Zeit auch aufgrund des wachsenden Angebots diverser Endgeräte weiter entwickelt. Zu den Viewport-Breiten und mediatypen wie "print" oder "screen" kamen die Ausrichtung der Geräte (Portait, Landscape) und Auflösung dazu. Im Code unten ist zu sehen, wie man beispielsweise das Logo auf einen höher auflösenden Bildschirm austauschen kann.

.logo {
  background: url( images/logo.png ) no-repeat;
 
  @media screen and ( min-resolution: 2dppx ) {
    background: url( images/logo@2x.png );
  }
}

Media Queries sind nicht die perfekte Lösung für jede Situation und waren auch nie dafür gedacht alle gegenwärtigen Anforderungen an das responsive Design abzudecken.

Aktuell gibt es eine große Auswahl an Geräten auf dem Markt, in verschiedenen Größen und Eigenschaften. Die Grenze zwischen "mobil" und "Desktop" verwischt. Hierdurch wird es immer schwieriger die Ästhetik, die Benutzerfreundlichkeit und die Leistung einer Website aufrechtzuerhalten. Sobald man Elemente wie Werbung und Tabellen in eine Website einbauen möchte, stößt man an die Grenzen der Media Queries.

Die Nachteile der Media Queries

Als Beispiel: Zur Verfügung steht die Komponente Artikel-Teaser. Diese Komponente soll an verschiedenen Stellen auf einer Website verwendet werden. Das Beispiel zeigt, wie die Komponente in einem Viewport (sichtbarer Bereich im Browser) von 780px angeordnet ist.

Auf der Seite "Liste" legen wir einen Teaser an - mit einem Bild links und einem Titel sowie dem Textausschnitt rechts.

image2018-6-25_9-47-39.png

Auf der Seite "Grid" legen wir einen weiteren Teaser an, das Layout verändert sich aber. Das Bild befindet sich nun oben und darunter der Titel sowie der Textausschnitt.

grid.png

// Teaser
 
.teaser {
  text-align: center;
 
  h2 {
    margin-bottom: 20px;
  }
 
  //List
 
  @media ( min-width: 480px ) {
    text-align: left;
    display: flex;
 
    .group-left {
      flex: 0 0 25%;
    }
 
    .group-right {
      flex: 1;
    }
  }
 
  // Card display
 
  &.card {
    @media ( min-width: 480px ) {
      .group-left {
        flex: 0 0 100%;
      }
 
      .group-right {
        flex: 0 0 100%;
      }
    }
  }
}

Es ist machbar, solange wir einige zusätzliche identifizierende Klassen verwenden: "teaser" & "teaser card".

Wäre es nicht super, wenn wir statt uns auf die Viewports der Browser zu konzentrieren das ganze auf der Elementebene machen könnten?

Element Queries

Die Idee der Element Queries entstand Anfang 2012, ein paar Jahre nachdem das Responsive Webdesign das Non-Plus-Ultra wurde. Leider gab es zu dieser Zeit nicht viele überzeugende Gründe Element Queries als Web-Standard zu etablieren.

Die Gruppe RICG (Responsive Issue Community Group), die auch das HTML5 Element <picture> entwickelte, hat es sich zur Aufgabe gemacht, die Element Queries ins Webstandard aufzunehmen. Dafür haben sie eine Library mit Entwicklern erstellt, die diese Funktionalität derzeit emulieren, um Issues und die Dokumentation anzufertigen und die Funktionen zu optimieren und zu testen.

Element Queries funktionieren ähnlich wie Media Queries. Sie orientieren sich nur an der Elementgröße statt der Browser- bzw. Viewport-Größe. Dadurch kann man ein wirklich modulares UI-System mit DRY-er-Code-Basis erstellen. Die Element Queries sollen dabei helfen das Duplizieren von CSS Code zu reduzieren. Im gleichen Beispiel kann man die Stile der UI-Komponente mit EQCSS folgendermaßen umschreiben:

// Teaser
 
.teaser {
  text-align: center;
 
  h2 {
    margin-bottom: 20px;
  }
 
  //List
 
  @element ".team-profile" and ( min-width: 480px ) {
    display: flex;
 
    .group-left {
      flex: 1 1 25%;
    }
 
    .group-right {
      flex: 1;
    }
  }
}

Hier ist es egal wie breit der Viewport ist. Im Beispiel oben werden die Elemente nebeneinander angezeigt solange die Komponente 480px und breiter ist. Wenn der Viewport kleiner als 480px breit ist, werden die Elemente untereinander angezeigt.

Anwendungsfall: Der Teaser aus dem Beispiel oben soll in der Sidebar als Card Format ausgegeben werden. Normalerweise würden wir den existierenden Code kopieren und an die Sidebar-Klasse anwenden. Mit Element Queries kann man aber sagen: Wenn das Element kleiner als 320px ist, dann zeige es immer untereinander an. Das Duplizieren von Code entfällt und die Elemente können sich abhängig von dem Platz, der ihnen in ihrem Bereich (Parent Element) zur Verfügung steht, nebeneinander - oder bei weniger Platz - untereinander anordnen.

Nur um zu verdeutlichen, Media Queries ist immer noch das meist genutzte Verfahren für responsive Design. Media Queries und Element Queries kann man parallel nutzen. Es gibt jedoch viele Szenarien in denen die Verwendung von Element Queries sinnvoller wäre als die Verwendung von Media Queries.

Leider haben Element Queries noch einen sehr langen Weg vor sich, bevor sie schließlich als Web-Standard eingesetzt werden.

Abschließend verweisen wir noch auf zwei interessante Artikel zum Thema:

How-To für Element Queries

https://elementqueries.com/

Der Weg zum Web-Standard

https://wicg.github.io/cq-usecases/

Artikel geschrieben von Marleen am 14.08.2018.

Sie sind hier