CSS und Javascript: Breakpoints in Media Queries einfach mit JavaScript auslesen

von Henry Zeitler

Vor ein paar Monaten hatte ich eine spontane Idee, wie ich CSS Breakpoints ohne Hilfsmittel in einer Javascript-Datei abfragen kann. Ich nannte das Ganze damals “Breakpoint-Indikator”. Etwas später merkte ich, dass meine Idee gar nicht so neu war und jemand wenige Monate zuvor schon darüber geschrieben hatte. Egal, ich hoffe es hilft euch.

Es gibt eine Menge Tools da draußen, die es dem Frontendentwickler erlauben CSS-artige Media Queries mit Javascript bzw. jQuery zu simulieren. Ich denke da besonders an Simple State Manager oder das von mir zuvor favorisierte und oft verwendete enquire.js.
Jedoch störte mich eine Sache immer extrem. Die Media Queries werden auf die CSS und JavaScript-Dateien verteilt und sind dann schwerer zu pflegen und es wird insgesamt unübersichtlich. Da ist es doch extrem einfacher die Media Queries im Stylesheet zu belassen und alle Interaktionen von da aus zu steuern.

Nicht zu kompliziert denken

Die Idee – oder eher die Lösung – ist eigentlich eher trivial. Ich benutze die Eigenschaft z-index um einem beliebigen HTML-Element einen Wert zu übergeben. Natürlich sollte es ein Element sein, das diese Eigenschaft ohne negative Folgen zugewiesen bekommen kann.
Dieser Wert könnte jetzt das Äquivalent zur Viewport-Größe darstellen, also z. B. z-index: 40; für 40em oder z-index: 768; für 768px.
In der JavaScript-Datei kann der z-index jetzt ohne viel Aufwand abgefragt werden. Z.B. über

document.getElementById('foo').style.zIndex;

oder mit jQuery

$('#foo').css('z-index');

Die Abfrage kann für einen Wechsel von Portrait zu Landscape-Modus oder für Veränderungen des Viewports bzw. des Browserfensters über einen .resize()-Event Handler gefeuert werden.

Ein Beispiel

Das Beispiel hier unten im iframe hat eher repräsentativen Charakter. Zum Ausprobieren und Ändern der Viewportgröße bitte mal kurz zu JSFIDDLE wechseln (http://jsfiddle.net/AH3VJ/light/).

 

 

David Walsh hatte zu dem Thema bereits im Dezember 2013 einen Blogpost geschrieben und erklärt wie diese Technik mit plain Javascript umgesetzt wird.
Natürlich muss als Indikator nicht zwingend die Eigenschaft z-index herhalten. Wie David Maciejewski in meinem Google+ Post vorschlug kann es auch ruhig mal eine Farbwert oder ähnliches sein.

Also

Ich setze solche Breakpoint Indikatoren jetzt schon ein paar Monate ein und bin froh, dass ich kein weiteres Plugin für diesen Zweck brauche. Meine Breakpoints tummeln sich jetzt nur noch in den Stylesheets und der Code wird wieder ein Stück weit einfacher und übersichtlicher (hach).
Was meint ihr zu den Breakpoint Indikatoren?

comments powered by Disqus