Media Types
Seit der Veröffentlichung von CSS Level 2 (CSS2) im Mai 1998 ist es möglich medienspezifische Stylesheets, so genannte Media Types, zu verwenden. Dies ermöglichte uns Entwicklern zum Beispiel verschiedene Stylesheets für die Darstellung beim Drucken, für Handy-Displays usw. einzubinden.
In diesem Beispiel wird definiert, dass der Browser die Datei print.css verwenden soll, wenn die Seite ausgedruckt wird, und für die Ausgabe am Bildschirm die Datei screen.css. Ebenfalls können auch nur bestimmte Bereiche innerhalb eines CSS-Dokuments für die unterschiedliche Ausgabe definiert werden:
@media screen {
body {
background-color:#fff;
}
}
Mit CSS 2.1 (seit 2002) wurden 10 Media Types definiert. Die 3 wichtigsten sind:
- screen - Bildschirme
- print - Drucker
- handheld - Mobiltelefone, Handcomputer
Weitere:
all - gilt für alle Ausgabegerät, aural - Sprachbrowser, braille - blindenschriftfähige Ausgabegeräte, embossed - blindenschriftfähige Drucker, projection - Beamer und Overheadprojektoren, tty - Ausgabegeräte mit feststehenden Zeichentypen (Terminals, Fernschreiber), tv - TV-Geräte.
Media Queries
Mit CSS3 wurde die Verwendung von Media Types dank der Media Queries erweitert. Hier kann neben der Art des Ausgabemediums beispielsweise auch noch die Breite des Anzeigemediums abgefragt werden. Dies wird in der nächsten Zeit sicher immer wichtiger, da Websiten nun für die verschiedenen Ansichten auf dem iPad, iPhone oder anderen Smartphones und Tablets optimiert werden können.
Zur Info:
Smartphones und Tablets melden sich als Media Type screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.
In diesem Beispiel wird definiert, dass das screen_small.css für den Media Type screen und bis zu einer maximalen Breite von 480px als Stylesheet bei der Ausgabe verwendet wird. Ebenfalls sehen wir in diesem Beispiel, dass die verschiedenen Eigenschaften mit "and" verknüpft werden können. Wie bei den Media Types können auch die Media Queries innerhalb des CSS-Dokuments definiert werden:
@media screen and (max-width: 480px) {
#container {
width:90%;
float: none;
}
}
Es kann also auch nur eine CSS Datei verwendet werden, in der sich dann alle Definitionen für die verschiedenen Auflösungen und Devices befinden. Durch die Verwendung von nur einer CSS Datei werden die HTTP-Requests vermindert und somit auch die Ladezeit der Website verkürzt.
Mit Media Queries können folgende Eigenschaften abgefragt werden:
- min-/max-width: Breite des Browserfensters
- min-/max-height: Höhe des Browserfensters
- min-/max-device-width: Bildschirmbreite
- min-/max-device-height: Bildschirmhöhe
- orientation: Ausrichtung (portrait/landscape)
Dies sind meiner Meinung die wichtigsten Eigenschaften. Weitere Eigenschaften, Beispiele und mehr findet man auf der Website des W3C.
Obwohl wir schon in einem anderen Blog das Thema hatten, dass viele Browser CSS3 noch nicht komplett unterstützen, ist das Gute an Media Queries, dass dies fast alle relevanten aktuellen Browser bzw. Browserversionen korrekt ausführen. Für die älteren Versionen der Browser, die Media Queries noch nicht richtig interpretieren, gibt es verschiedene JavaScript Lösungen, z.B.: css3-mediaqueries-js
