Drupal und Media Queries: Stil nach Plan
Mit CSS3 hat das W3C ein neues Schmankerl für Design im Web eingeführt: Media Queries.
Bisher kannte man nur die Möglichkeit, Stylesheets anhand von Medientypen (zum Beispiel "screen" oder "print") zu verwenden. Media Queries erweitern diese Möglichkeit nun um die Verwendung bestimmter Eigenschaften.
So kann man beispielsweise ein gesondertes Stylesheet einbinden, wenn die maximale Breite des angezeigten Bereichs im Browser 800px beträgt.
Dazu erweitert man den Wert des media-Attributs beim Einfügen des Stylesheets um die gewünschte Eigenschaft und den passenden Wert. Das oben genannte Beispiel ließe sich dementsprechend über folgenden HTML-Code verwirklichen:
Alternativ dazu kann man die Angabe auch direkt im Stylesheet vornehmen: @media screen and (max-width: 800px) { ... }
Um nun auch mit Drupal in den Genuss der Media Queries zu kommen, muss man die Anweisung zur Einbindung von Stylesheets in der .info-Datei des verwendeten Themes anpassen:
stylesheets[screen and (max-width: 800px)][] = style.css
ie Möglichkeit, den oben stehenden HTML-Code () direkt in die page.tpl.php schreiben möchte ich hier eigentlich gar nicht erwähnen, da dies nicht der "Drupal-Way" ist. Stylesheets werden bei Drupal in einem Theme über die .info eingebunden. Nach dem gleichen Prinzip wie in den oben gezeigten Beispielen funktioniert die Verwendung der Media Queries auch in der Funktion drupal_add_css(). <?php drupal_add_css('/path/to/my.css', 'module', 'screen and (max-width: 800px'); ?>
Selbstverständlich ist das Ganze nicht nur auf die Breite des angezeigten Bereichs beschränkt. Erlaubt sind unter Anderem height, width, orientation, color und resolution. Alle erlaubten Eigenschaften und ihre korrekte Verwendung kann man unter Media Queries (Media Features) nachlesen.
Einen kleinen Eindruck von der Funktionsweise kann man sich gleich hier auf www.undpaul.de machen. Sobald das Browserfenster auf eine Breite unterhalb von 980px verkleinert wird, springt die rechte Seitenleiste unter den eigentlichen Inhalt und der Kopfbereich der Seite verkleinert sich. Unterhalb von 820px Breite verkleinert sich der Kopfbereich nochmals.
Und zu alledem hat sich dann auch noch ein ungewollter, jedoch durchweg positiver Seiteneffekt bemerkbar gemacht: auf mobilen Geräten sieht die Seite jetzt wesentlich aufgeräumter aus, da die Blöcke aus der Seitenleiste keinen Platz mehr im eigentlichen Inhaltsbereich beanspruchen.
Einen Nachteil mag ich dann doch nicht verschweigen: Benutzer von Browsern, die kein CSS3 verstehen (sprich: Internet Explorer, Firefox <3.x, etc.) können dieses Feature leider nicht so ohne Weiteres verwenden. Zwar gibt es mit css3-mediaqueries.js ein Skript, welches diesen Browsern auch die Möglichkeiten der Media Queries eröffnet, jedoch habe ich dieses 1. noch nicht getestet und 2. möchte man nicht unbedingt für jede "Spielerei" zusätzliches Javascript verwenden.
