Die Vielfalt der Geräte, die auf Websites zugreifen, wird immer größer. Gerade durch den Boom von mobilen Geräten wie Smartphones, Tablets (allen voran das iPad) oder Laptops kamen sehr viele neue Bildschirmauflösungen ins Spiel, die ebenfalls bedient werden möchten. Oftmals sehen Weblayouts, die für Desktop-Standardauflösungen gestaltet und umgesetzt wurden, auf kleinen Geräten einfach nur grausam aus. Die mobilen Geräte haben oft schon Techniken in ihre Browser integriert, die zumindest die Lesbarkeit gewährleisten sollen. Doch dem Designer in mir reicht das nicht.
Wollte man früher die Displayauflösung des Users abfragen, kamen häufig JavaScripts zum Einsatz. Relativ umständlich musste man dann noch die entsprechenden CSS-Klassen auf Basis dieser Skripte den HTML-Elementen hinzufügen. CSS2 erlaubte das Spezifizieren von verschiedenen Stylesheets für verschiedene Medientypen wie Screen oder Print. Doch das Ganze war relativ unflexibel. CSS3 schafft hier Abhilfe und führt die sogenannten Media Queries ein. Dieser Artikel soll das Prinzip der Media Queries kurz erklären und somit einen Einstieg in die Webentwicklung für verschiedenste Bildschirmauflösungen bieten.
CSS3 Media Queries machen es möglich, direkt im Stylesheet für unterschiedliche Displaybreiten oder -höhen angepasste CSS-Klassen zu deklarieren. Am deutlichsten wird das an einem Beispiel. Schaut euch meine Demoseite an und verändert mal die Breite eures Browserfensters.
Ein Blick in den Quellcode der Seite zeigt, wie’s gemacht wird:
@media screen and (min-width: 480px) and (max-width: 600px) {
.mediaquery {
background: #FF0000;
}
}
- Per @media wird das Medium deklariert, z.B. screen oder print.
- Nach dem Verknüpfungswort and folgt in runden Klammern ein Vergleichsstatement. Dies kann z.B. die maximale oder minimale Breite (min-width oder max-width) oder Höhe (min-height oder max-height) festlegen, in dem eine bestimmte Klasse gelten soll.
- Es können auch mehrere Statements per and miteinander kombiniert werden.
- Nach geschweiften Klammern folgen die normalen CSS-Angaben, die in diesem Bereich gelten sollen.
Das oben genannte Beispiel definiert also eine Hintergrundfarbe, die in dem Bereich zwischen 480 und 600px Breite zum Einsatz kommt. Keine komplexen JavaScript-Abfragen mehr, reines CSS. Auf diese Weise lassen sich Weblayouts gestalten, die auf Geräten mit verschiedenen Bildschirmgrößen das jeweils vom Designer dafür vorgesehene Aussehen bekommen. Da lacht das Designer-Herz 
Außer der max-width oder min-width Eigenschaft kann übrigens per max-device-width auch auf die Breite oder Höhe des Gesamtbildschirms des Geräts statt nur der Browser-Fläche geprüft werden.
Leider unterstützt der Internet Explorer diese tolle CSS3 Eigenschaft erst ab der Version 9. Zum Glück kommt der IE aber nicht ganz so häufig auf mobilen Geräten mit kleinen Displays zum Einsatz. Wer aber sichergehen will, der sollte auf ein JavaScript-Fallback nicht verzichten. Infos dazu:
- CSS Tricks – using jQuery to detect browser size
- The Man in Blue – using Javascript
- jQuery Media Queries Plugin
Weitere Infos zu CSS3 Media Queries findet ihr unter anderem hier:
- Webdesignerwall – CSS3 Media Queries
- Dr. Web - Media Queries: Mobile Versionen von Websites mit CSS 3 erstellen
Ein ganz aktuelles kostenloses WordPress-Theme, welches Media Queries einsetzt, gibt es beim Smashing Magazine.
