Stil mit {stil}

CSS gibt uns über das media-Attribut im link- und style-Tag eine einfache Methode, Stylesheets für spezielle Geräte anzugeben.

Alle Mainstream-Browser unterstützen media=”screen”, die meisten erkennen media=”print”. Opera unterstützt media=”speech”, wenn die Spracherweiterung installiert ist. Für Handys und andere kleine Geräte ist media=”handheld” gedacht – hört sich gut an, oder?

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Damit endet dann die Unterstützung der Browser für dieses – eigentlich – nützliche Attribut. Als »Handheld« ist sich Apples iPhone zu schade und interpretiert media=”handheld” schlichtweg gar nicht.

@media – sag an woher der Browser kommt

Anstelle eines link-Tags mit der Adresse einer eigenen Stylesheet-Datei kann innerhalb der CSS-Datei eine @media-Regel notiert werden, um Stile für bestimmte Geräte zu filtern.

@media handheld, projection, tv {
  #box { position: absolute; }
}

Screenshot vom Google G1: 480 Pixel hoch, 320 Pixel breit … die @media-Regel ordentlich interpretiert … und auch den :before-Selektor richtig verstanden.

Die modernen Browser verstehen differenzierte Abfragen wie nach der Größe des Monitors oder des Browserfensters. Momentan interpretieren Safari 3+, Konqueror 4+, Firefox 3.1+ und Opera 9+ solche Abfragen.
So lassen sich min-device-width: 481px und max-device-width: 480px (Safari Reference Library) benutzen, um CSS für das iPhone zu filtern.

@media screen and (min-device-width: 481px) {
    #box { float: left; }
}

@media screen and (max-device-width: 480px) {
    #box { position: absolute; }
}

Internet Explorer bleibt bei solchen Querys auch in Version 8 vor der Tür (wer hätte das vermutet?). Um Internet Explorer wieder ins Spiel zu bringen, bleiben die altgedienten Conditional Comments für IE.

<!--[if gte IE 6]>
<style>
    #box { float: left; }
</style>
<![endif]-->

Alles fürs Handy?

Wir bekommen es mit mehr und mehr Geräten zu tun – besondere Stylesheets für alle verschiedenen Handybrowser würden den Head der Seite länger machen als die kompletten Inhalte. Im Großen und Ganzen versuchen aber alle modernen Handys mit einem großen Monitor, sich so eng wie möglich an ihre großen Browserbrüder anzulehnen. In Punkto Standards sind sie jedenfalls Internet Explorer meilenweit voraus …

Handys mit kleinen Screens haben ihre eigenen Methoden, um die Inhalte zu linearisieren und lesbar an den Mann zu bringen. Besondere Stylesheets für iPhone und Konsorten und für schlichte Handys sollten also die Ausnahme sein.
Vielleicht mal hier einen Flicken oder dort einen … mit Flicken kennen wir uns ja seit Netscape 4 und Internet Explorer aus.