Der erste Teil dieser Serie gab eine kurze Einführung ins Thema Responsive Design. Im zweiten Teil habe ich das erste Modul dieser CSS-Technik, den „Fluid Grid“, vorgestellt. Im dritten Teil geht es um das Thema „Media Queries“.
Wie funktionieren Media Queries?
Media Queries sind Abfragen: Die Website fragt ab, wie groß der Monitor ist, den der Besucher vor sich hat. Ist es ein Desktop-Computer, ein Netbook oder ein Smartphone? Nachdem die Größe des Bildschirms festgestellt wurde, lädt der Browser ein dazu passendes Stylesheet. Das heißt, der Designer der Website hat mehrere Stylesheets hinterlegt. Je nachdem mit welchem Endgerät die Seite aufgerufen wird, erscheint ein anderes Layout.
Sara Cannon und Dan Gavin haben das Standard-WordPress-Theme Twentyten mit Media Queries zu einem Responsive Design umgebaut. Das Projekt Responsive Twenty Ten findet Ihr hier.
Noch mehr Beispiele wie es aussieht, wenn das Layout sich ans Endgerät anpasst, findet Ihr auf diesen Seiten: www.mediaqueri.es.
Wer kann’s lesen?
Media Queries sind eine Eigenschaft von CSS3. Das heißt, alle modernen Browser können die Anweisung lesen. Ältere Browser und die üblichen Ausnahmen (IE 5 bis 8) kann man über Javascript-Hacks mit ins Boot holen. Ein Beispiel dafür gibt es hier: mediaqueries.js.
Media Queries einbauen
Schon mit CSS2 ließ sich zwischen Stylesheet und Ausgabe eine Beziehung herstellen. So konnte man beispielsweise ein Druck-CSS anlegen, das automatisch aktiv wurde, sobald ein Nutzer eine Seite ausdruckt.
link rel="stylesheet" type="text/css" media="screen" href="screen.css" link rel="stylesheet" type="text/css" media="print" href="print.css"
Diese Option wurde in CSS3 erweitert.
Die Formel „@media screen“ funktioniert immer noch:
@media screen {
* { font-family: sans-serif }
}
Aber man kann jetzt eine Vielzahl von Angaben ergänzen und damit sehr detailliert festlegen, unter welchen Bedingungen welche Formatierungen (styles) zum Einsatz kommen sollen.
Mit dieser Anweisung würde man z.B. Styles für ein Smartphone aufrufen:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Hier kommen die Styles */
}
Im CSS-Code oben wird festgelegt, dass die Media Queries nur dann aktiv werden, wenn tatsächlich ein Gerät mit der echten, physikalischen Auflösung 320 oder 480px anfragt. Der Desktop-Browser ignoriert die Anweisung. Wenn man dort das Browserfenster zusammenschiebt, verändert sich das Layout nicht.
TIPP: Auf seiner Website css-tricks.com hat Chris Coyer eine Übersicht mit den wichtigsten Abfragen für die üblichen Geräte zusammengestellt.
Hochformat oder Querformat?
Media Queries können über die Angabe „orientation“ auch abfragen, ob das Endgerät die Seite im Querformat oder im Hochformat anzeigt.
@media (orientation: portrait) { … }
@media (orientation: landscape) { … }
Eine ausführliche Dokumentation aller Eigenschaften, die man Media Queries zuordnen kann, gibt es bei w3.org
Wieviele Stylesheets braucht der Mensch?
Geht es nach Chris Coyier’s Liste, dann braucht man Angaben für diese Geräte und Lebenslagen:
- iPhone 3/Smartphones (Querformat)
- iPhone 3/Smartphones (Hochformat)
- iPhone 4
- iPads (Querformat)
- iPads (Hochformat)Desktop-Rechner und Laptops (größer als 1224 px)
- Große Bildschirme (größer als 1824 px)
Ob man für Riesenmonitore noch eine Extra-Lösung bereithält, kommt sicher sehr drauf an, um was für eine Website es sich handelt.
Im vierten Teil der Serie über Responsive Webdesign geht es um das Thema „Fluid Images“. Im fünften Teil wird es dann spannend, denn hier möchte ich ein paar kritische Punkte betrachten, mit denen man sich in der praktischen Arbeit früher oder später befassen muss.