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.

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.

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.

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.

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.

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:

• CSS Element Queries von Marcj
• Element Queries von Tyson Matanich
• EQ.js von Sam Richards
• Elementary von Scott Jehl

Ebenfalls interessant:

• Hover.css: 50 Hover-Effekte für deine Webseite