senäh

17senäh und so…

Media Query Variablen

HTML/CSS/JS
03. Mai 2012
Kommentare: 3

Angewandte Media-Queries mit JavaScript auslesen – ohne Breakpoint-Doppelung

Kategorien: HTML/CSS/JS | 03. Mai 2012 | Kommentare: 3

Ich bin über einen interessanten Artikel zum Thema Navigation in Responsive Designs gestoßen, der mögliche Variationen der Navigation aufzeigt, sobald der Bildschirm des Endgeräts schmaler wird. Was dabei angesprochen wurde: statt der eigentlichen Navigationsleiste am oberen Ende der Seite findet man ein Dropdown-Menü, das alle nötigen Navgationspunkte beinhaltet. Mittlerweile gar nicht so unüblich.

Dazu bedarf es jedoch ein wenig JavaScript. Die Listenpunkte müssen ja irgendwie in ein Dropdown-Menü umgewandelt werden. Nun hat man im CSS schon mühsam seine Breakpoints gesetzt, an denen sich das Layout jeweils anpasst. Müssen wir diese jetzt im JavaScript erneut formulieren? Dopplungen soll man doch immer vermeiden. Was ist wenn wir die Breakpoints ändern wollen? Wir müssten stets 2 verschiedene Stellen – sowohl im CSS als auch im JavaScript – pflegen. Kann das die Lösung sein?

Aufmerksame Blogleser haben aus dem Titel dieses Posts mit Holmes’schen Spürsinn die Schlussfolgerung gezogen: natürlich nicht. Chris Coyier hat auf css-tricks einen Artikel verlinkt, der sich dem Problem annimmt. Die Lösung gefiel mir, deswegen stelle ich sie hier vor.

Variablen über Pseudo-Elemente

Wir erzeugen einfach pro Breakpoint ein Pseudo-Element, das den gewünschten Inhalt mit sich führt. Damit es auf der eigentlichen Webseite nicht zu sehen ist, müssen wir das ganze natürlich verstecken.

@media screen and (min-width: 1024px) {
	body:after {
		content: 'landscape';
		display: none;
	}
}

Auslesen über JavaScript… und jQuery

Ausgelesen werden kann die gesetzte Variable durch

window.getComputedStyle(document.body,‘:after’).getPropertyValue(‘content’);

Das Problem, was man dabei bekommt: man kann den Wert erst auslesen, sobald das DOM fertig geladen ist. Da das nicht mal ebenso in 5 Minuten browserübergreifend implementiert ist, darf man sich hier gern eines Frameworks bedienen, in diesem Fall jQuery.

$(function() {
    $(window).resize(function() {
    	   var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');
           document.getElementById('variable-container').innerHTML = mode;
    }).resize();
});

Achtet darauf, dass ihr das resize-Event intitial triggert, damit die Variable überhaupt gesetzt ist. Sinn ist ja nicht darauf zu warten, dass jemand sein Browserfenster skaliert und sich über sichtbare Änderungen freut. Die Auflösung eines iPhones ist z.B. fest. Ohne das initiale Triggern, würde hier gar nichts passieren und der Code-block wäre nutzlos.

Demo

Für ein funktionales Beispiel bitte hier klicken.

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)