CSS Media Queries: Möglichkeiten und Grenzen
CSS3 Media Queries sind schon eine clevere Sache. Entwickler müssen sich in ihren Stylesheets nun nicht mehr allein auf das Ausgabemedium wie „screen“ oder „print“ beschränken, denn Media Queries lassen weitere Einschränkungen zu. Eine Angabe wie „@media screen and (max-width: 400px)“ greift zum Beispiel nur bei einem Bildschirm mit einem Viewport von maximal 400 Pixeln. So könnte man einem Nutzer an einem üblichen 21-Zoll-Monitor eine Website in leicht unterschiedlichen Designs anzeigen, je nachdem wie breit er sein Browserfenster eingestellt hat. Ein bekanntes Beispiel dazu gibt es bei A List Apart [1].
Diese Media Queries bieten Webentwicklern nicht nur offensichtliche Optionen, wie die maximale und minimale Höhe oder Breite eines Viewports. Mit „max-device-width“ lassen sich die maximale Breite des Geräts auslesen, „orientation: portrait“ oder „orientation: landscape“ geben an, wie ein Gerät gedreht ist. Außerdem gibt es Möglichkeiten, einen 16:9-Monitor direkt anzusprechen (device-aspect-ratio), monochrome Geräte zu filtern (monochrome) oder gar die Auflösung (resolution) zu berücksichtigen [2].
All das sind nützliche Optionen, um Websites den vielen verschiedenen Medien in der jeweils bestmöglichen Art und Weise anzubieten. Und damit ein weiterer Grund, Kunden zu verklickern, dass Websites nicht überall und immer gleich aussehen müssen. Natürlich bedeuten die Optionen auch mehr Aufwand bei der Konzeption und Umsetzung einer Website, aber die sollte der Kunde ja bezahlen.
Aktuelle Browser unterstützen Media Queries bereits recht gut. Fast stillschweigend gilt das natürlich noch nicht für den Internet Explorer, aber ab Version 9 will auch der IE mitspielen.
Nicht totzukriegen: die Browserweiche
CSS3 Media Queries sind ein großartiger Fortschritt. Es bleibt – zumindest für die nächste Zeit – ein klitzekleines Manko: Bilder und andere größere Dateien. Der Browser lädt die Website und entscheidet dann anhand des Stylesheets, wie er damit umgehen soll. Vielleicht besitzt die Website ein großes Headerbild, das man auf mobilen Geräten wie Smartphones oder Tablets aber in einer kleineren Variante anzeigen möchte.
Das große Bild lässt sich per Media Query auf dem Handy leicht unterdrücken. Allein: Es wird geladen. Bei einem schnellen Internetanschluss ist es vielleicht egal, ob 100 oder 200 Kilobyte zusätzlich geladen werden oder nicht. Bei mobilen Geräten ist der Punkt nicht mehr zu vernachlässigen. Ein Nutzer möchte die Website schnell sehen. Ein Bild, das zwar Traffic erzeugt, dann aber doch nicht angezeigt wird, ist unnötiger Ballast.
Was mobilen Browsern noch fehlt, ist ein intelligenterer Umgang mit den Media Queries. Sie müssten zuerst das HTML laden, dann die Queries, um daraufhin zu entscheiden, welche weiteren Inhalte nun konkret geladen werden müssen.
Das Beispiel „Baker Street Inquirer“ des Webmagazins „A list Apart“ zeigt, wie sich mit CSS3 Media Queries Layouts umsetzen lassen, die sich flexibel an die Größe des Browserfensters anpassen.
Ich habe den letzten Relaunch meiner eigenen Website dazu genutzt, mit CSS3 Media Queries zu experimentieren. Am Ende bin ich dann doch wieder bei einer Browserweiche für das iPhone gelandet. Ganz einfach deshalb, weil ich diverse Bilder dort nicht anzeigen will. Außerdem nutze ich in der Bildschirm-Version jQuery, auf dem iPhone kann ich auf die Animationen aber verzichten. Hätte ich auf CSS3 Media Queries gesetzt, wäre das jQuery ganz normal im Quellcode verlinkt und auch sinnlos über das Smartphone heruntergeladen worden.
CSS3 Media Queries sind ein guter Weg [3], aber noch bedeuten sie nicht das Aus für Browserweichen.
© N-Media-Images – Fotolia.com
Nicolai Schwarz arbeitet als selbstständiger Designer und Webentwickler in Dortmund (textformer.de). Hauptsächlich beschäftigt er sich mit Drupal-Projekten. Nebenbei ist er als Redakteur und Autor bei den Webkrauts tätig. Zur Zeit schreibt er an seinem ersten Fachbuch.
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team