Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Responsiveres Design mit Element Queries

    Responsiveres Design mit Element Queries

Responsiveres Design mit Element Queries. (Bild: Pixabay)

Sicherlich lassen sich mit CSS Media Queries Designelemente an die Breite oder Höhe des Viewports, also des Browserfensters oder der Bildschirmdimensionen mobiler Geräte, anpassen. Allerdings gibt es keine Möglichkeit, Elemente responsiv in Abhängigkeit von anderen Elementen anzupassen. Dafür braucht es Element Queries. Die gibt es aber nicht, also eigentlich.

Media oder Element Queries: Wo ist der Unterschied?

Responsive Webdesign ist die Art, wie man heutzutage Seiten gestaltet. Das Webprojekt soll sich automatisch an das Sichtfenster des Gerätes, mit dem die Seite betrachtet wird, anpassen. So sehen aufwändige Desktopdesigns nach entsprechender Behandlung mit Media Queries und spezifischem CSS auch auf Smartphones gut aus. Media Queries verändern die Seitenoptik stets in Abhängigkeit vom Viewport, also der Breite oder Höhe des Betrachtergeräts oder Browserfensters. Das ist schön und gut, jedoch für aufwändigere Projekte zu wenig.

Modernes Design muss responsiv sein. (Illustration: Pixabay)
Modernes Design muss responsiv sein. (Illustration: Pixabay)

In aufwändigeren Projekten benötigt man Elemente, deren Größe sich nicht nur bezogen auf den Viewport, sondern responsiv in Bezug auf andere Elemente ändert. Das ist mit Media Queries nicht zu machen. Daher singt der Chor der fortgeschrittenen Webentwickler dem W3C schon seit vielen Jahren ein Klagelied. Will man sich nicht mit dem Singen aufhalten, muss man sich mit Alternativen befassen. Und was kommt hier, wie eigentlich immer, in Frage? Genau: JavaScript.

EQCSS: Element Queries in CSS per JavaScript

Aus dem Mangel an nativen Lösungen entstanden in den letzten Jahren verschiedene Möglichkeiten. Die nach meiner Beobachtung in aktivster Entwicklung befindliche ist EQCSS von Tommy Hodgins und Maxime Euzière. EQCSS steht unter der liberalen MIT-Lizenz zur kostenlosen Nutzung in persönlichen, aber auch kommerziellen Projekten zur Verfügung und bringt keinerlei Abhängigkeiten mit, dafür aber ein Polyfill für IE8.

EQCSS: Element Queries mit JavaScript. (Screenshot: t3n)
EQCSS: Element Queries mit JavaScript. (Screenshot: t3n)

Die Verwendung des JavaScripts folgt dem gängigen Standard. Zunächst gilt es, die Datei EQCSS.js auf jeder Seite, die mit Element Queries ausgestattet werden soll, einzubinden. Dies erfolgt per Script-Element am Ende der Seite, unmittelbar vor dem schließenden Body-Tag.

<script src=EQCSS.js></script>
Per If-Anweisung implementierst du etwa das erforderliche Polyfill für den greisen Internet Explorer. Alternativ zum Upload der Dateien auf deinen Webspace kannst du EQCSS auch via CDNjs einbinden.

So gehts: Element Queries in CSS mit EQCSS

Ist EQCSS so verfügbar, schreibst du Element Queries direkt in deine Stylesheets oder lagerst die EQCSS-Anweisungen in ein separates Stylesheet aus. Bleib einfach bei deiner bisherigen Arbeitsweise.

Übrigens: Element Queries werden wie Media Queries getriggert, also beim ersten Aufruf und beim Ändern des Viewports. Nun wäre EQCSS nicht JavaScript, wenn es nicht zusätzliche Möglichkeiten mitbrächte, um den Neuaufbau manuell zu triggern, so z.B. bei Klicks, aber auch bei weiteren Änderungen an Elementen, die mit dem zu Ändernden in Relation stehen.

Generell werden Element Queries mit EQCSS stets in diesem Format geschrieben:

@element {selector} and {condition} [ and {condition} ]* { {css} }

{selector} steht für die CSS-Selektoren #id und .class. {condition} gibt die zu erfüllende Bedingung an, etwa einen Wert in Pixeln. Und über {css} fügst du beliebige gültige CSS-Anweisungen hinzu. Die Website zu EQCSS beinhaltet etliche Beispiele der verschiedenen Optionen nebst Syntax und der Möglichkeit, sie gleich auszuprobieren.

Weitere Lösungen

Der Vollständigkeit halber will ich die wesentlichen anderen Ansätze auch noch verlinken, damit sich jeder selbst ein Bild der alternativen Möglichkeiten machen kann. Beachtet aber, dass die folgenden Lösungen teilweise seit Jahren nicht weiterentwickelt wurden:

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden
Alle Jobs
Zur Startseite
Zur Startseite