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:

<link type="text/css" rel="stylesheet" media="screen and (max-width: 800px)" href="mystyle.css" />

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

Die Möglichkeit, den oben stehenden HTML-Code (<link ... />) 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 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.

Kommentare

Thomas Moseler user image
tommi

Nach einigen wenig erfolgreichen Versuchen, Media Queries aufm Android Browser zum Laufen zu bekommen, hatte ich heute ein Aha-Erlebnis: Man muß für mobile Browser das viewport-Meta Tag setzen http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Das Problem war nämlich nicht, daß mein Dolphin Browser oder Android Default Browser Media Queries nicht versteht, sondern daß er sie versteht.

Die fiese Falle ist, daß diese Browser nicht die tatsächliche Displaybreite zur Berechnung heranziehen, sondern den "Viewport". Das ist quasi die virtuelle Seitenbreite, die durchaus breiter ist. Daher springt sowas wie "min-width=700px" nicht an: für den Browser ist sein Viewport breiter als 700px und er lädt die Anweisung.

Wenn man jetzt aber

<meta name="viewport" content="width=device-width">

sagt, dann wird der Viewport auf die tatsächliche Breite des Displays gesetzt, und schwüppdiwüpp funktionieren die Media Queries, die die Breite auslesen.

Wenn man jetzt noch eine Mobile-First Strategie anwendet, und dem IE, der mal wieder gar nix versteht, per Conditional Stylesheets sein Futter gibt, kann man sich m.E. Sachen wie Handset Detection für die allermeisten Websites sparen und fröhlich auf die verschiedenen Breiten anpassen, so daß es immer super aussieht http://mediaqueri.es/

Neuen Kommentar schreiben