Mit CSS (Cascading Style Sheets) hat man ein mächtiges Werkzeug, um bei Webdokumenten Layout vom Inhalt und Struktur zu trennen. Nur leider kann damit noch nicht auf unterschiedliche Anzeigemedien reagiert werden.
Dank dem irgend wann kommenden CSS 3 wird sich dies mit den sogenannten Media Queries hoffentlich zum Guten wenden. So wird man damit beispielsweise auf Bildschirmauflösung, Seitenverhältniss oder Farbtauglichkeiten des verwendeten Anzeigemediums mit verschiedene Stylesheets reagieren können. Eine interessante Sache wie ich finde, gerade auch im Hinblick auf die immer größere Verbreitung von Webbrowsern auf Handys, PDAs und auch iPods wie dem Touch oder dem iPhone.
Die Verwendung ist ähnlich der bisherigen Einbindung eines Stylesheets im HTML-Dokument. Folgend ein kleines Beispiel:
Anwendungsbeispiel
Einbindung eines standardmäßigen Stylesheets:
Einbindung eines von Media Queries abhängigen Stylesheets:
max-device-width: 480px)" type="text/css" href="styles_max480px.css">
Beide Stylesheets Einbindungen sind für das Medium Screen, als für eine Bildschirmbetrachtung, ausgelegt. Zusätzlich wird aber für den zweiten Aufruf eine maximale Bildschirmbreite von 480 Pixel vorausgesetzt.
Die Angabe max-device-width: 480px bewirkt somit, dass das Stylesheet styles_max480px.css nur für Bildschirmauflösungen kleiner gleich 480 Pixel geladen wird. Idealerweise enthält es angepasste Stylesheet Angaben zum Überschreiben des Deaultstylesheets für schmalere Anzeigemedien.
Aktuelle Webbrowser wie Opera und Safari interpretieren schon die Media Queries aus CSS 3, aber auf Firefox basierende oder der Internet Explorer noch nicht. Das schränkt natürlich die Anwendung stark ein. Für den Mobilen Sektor für Geräte wie das iPhone, der iPod touch und einige Mobiltelefone oder ähnliche Geräte die ja auf die mobilen Versionen von Safari bzw. Opera setzen, könnte sich eine Anwendung von Media Queries schon lohnen.
Demoseite
Unter Demo: CSS 3 – Media Queries hab ich einen kleinen Demo zu den Media Query Angaben max-device-width und max-width liegen. Je nach Bildschirmauflösung und Fenstergröße des Webbrowsers werden bestimmte Felder grün statt rot eingefärbt. Logischerweise funktioniert die Demo nur in CSS 3 unterstützenden Webbrowsern wie der Opera oder Safari.
Hui … eigentlich wollte ich nur kurz mal die Media Queries erwähnen und schon ist es wieder was längeres geworden. 
In Omniweb klappts nicht, in Opera schon. Koole Sache, kann in Zukunft sicher nützlich werden, sobald alle Browser damit kompatibel sind.
Ich fürchte ja fast das es genau daran mal wieder ewig klemmen wird. Ich mein die meisten gängigen Browser interpretieren ja noch nicht einmal CSS2 einheitlich
Eine tolle Sache ist es auf jeden Fall vielleicht kommt ja auch mal ein Spamresistentes Mailprotokoll ^^
Sind leider zu viele Ströhmungen im Wasser, so dass sich die Schiffe nur schwer in bestimmte Richtungen navigieren lassen.
Gibt es denn überhaupt schon Ansätze für ein „Spamresistentes Mailprotokoll“? Ich denke eher müsste sich da was parallel anfangen zu entwickeln … ob wir das noch erleben werden
Ach spätestens wenn das BMI dann keinen Bock mehr hat den Spam zu Vorratsdatenspeichern wird das eh gesetzlich verboten und alles wird gut.
Was wird gesetzlich verboten, die Vorratsdatenspeicherung oder der Spam?
Danke fuer die kleine Einfuehrung, hoert sich wirklich interessant an.
Apropos, mit OmniWeb 5.6 klappt das prima.
Greetings
Gern geschehen. Ich kenne mich mit Omniweb nicht aus, aber der dürfte ja auch eine recht aktuelle Webkit Version, ähnlich Safari 3, einsetzen.