Ratgeber

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:

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung