Auflösungsabhängiges CSS mit jQuery

Auflösungsabhängiges CSS mit jQuery

Dynamische Gestaltung existiert online seitdem es Javaskript gibt. Spätestens seit jQuery ist es nicht mehr unüblich, ein wenig Intelligenz in die Schnittstelle zwischen Nutzer und Inhalt zu basteln. Zeit Online zeigt dem Neuanstrich, dass solche Ansätze wohl auch bereit für ihren großen Auftritt sind. Ich finde damit öffnet sich die Büchse der Webdesign-Pandora, doch einen winzigen Spalt breit. Plötzlich ist es nicht mehr unrealistisch auch abseits des Browserhacks, für mehr als einen möglichen Fall zu gestalten.

Bin gespannt, wie der weitere Weg hier aussehen wird. Für diese Lösungen gibt es definitiv ein Problem, nur sucht man es derzeit noch mit der Lupe. Klar ist, dass man solche Lösungen klar am Anfang planen muss. Ein trendmäßiges Draufklatschen skalierender Elemente auf ein bestehendes Design, dürfte der falsche Weg sein, auch weil man sein CSS um einen solchen Ansatz strukturieren muss. Welche Eigenschaften kommen zum Element, welche zur ID und welche zur Klasse?

Bisher nehme ich eher Abstand von flexiblen Layouts. Bisher bedeutete dies alle Elemente mit relativen Größen zu bemaßen und dann alles hübsch schrumpfen und wachsen zu lassen. Damit ein Grundraster einzuhalten, ist sehr schwierig. Jene 2-Phasen Skalierung wiederum, lässt viel präziseres Planen zu und somit sind auch Raster wieder einzuhalten. Ein paar Dinge habe ich schon getestet, um eine möglichst elegante Lösung zu finden. Mein Ansatz ist das Zuweisen bzw. Entfernen von CSS-Klassen auf den jeweils zu verändernden Elementen, hier eine Testseite dafür.

jQuery Resize - Vergleich Layout schmal und breite Version

Abbildung auflösungsabhängiger Layouts. Links die schmale und rechts die breite Variante.

Die Umsetzung ist einfacher als vermutet. jQuery überprüft die Fenstergröße, weist je nach Ergebnis eine entsprechende CSS-Klasse zu und wechselt diese, wenn auch das Fenster seine Größe verändert. Alles Nötige steckt in diesen Zeilen. In meinem Beispiel bekommt die Div mit der ID „content“ je nach Auflösung eine unterschiedliche zusätzliche Klasse. Schlüsselwert ist die Horizontale des Browserfensters. Bei weniger als 1096 Pixeln wird die CSS-Klasse „schmal“ zugewiesen und die Klasse „breit“ entfernt. Sind die 1096 Pixel vorhanden, werden die Klassen ausgetauscht.

$(document).ready(function() {
    function elementResize() {
        var browserWidth = $(window).width();
        if ((browserWidth) < '1096'){
           $('#content').addClass('schmal');
           $('#content').removeClass('breit');
        } else {
           $('#content').addClass('breit');
           $('#content').removeClass('schmal');
        }
    }

    elementResize();

    $(window).bind("resize", function(){
        elementResize();
    });
});

Worin liegt der Unterschied zwischen der Verwendung relativer Größen und dieser Lösung? Man behält hier die volle Kontrolle über jeden einzelnen Pixel, allerdings auf Kosten eines zusätzlichen CSS-Wasserkopfs. Es entstehen zwei Varianten, die beide komplett durchgestaltet werden möchten. Ganz klar findet man auch hier kein Allheilmittel für sämtliche möglichen Problemfälle, aber ein wirklich effizientes Werkzeug, um ein Layout ein Stückchen mitdenken zu lassen.

Das CSS3 Spalten-Modul bietet hierfür sicherlich große Angriffsfläche. Mehrspaltigkeit setzt voraus, dass man den Text auch ohne zu scrollen komplett lesen kann. Dafür braucht es nun mal eine bestimmte Auflösung, die man mit so einem kleinen Skript effektiv auch kleineren Formaten zugänglich machen kann, ohne das die Typografie aus dem Ruder läuft. Falls ich mich auf der eigenen Seite mal satt gesehen habe, sehe ich gute Chancen auch mal auf so eine Lösung zu setzen.