Stil mit {stil}

Okt 2009

CSS für iPhones, Handhelds, Drucker und andere Geräte

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

<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" />

Anstelle eines link-Tags mit der Adresse einer eigenen Stylesheet-Datei kann innerhalb der CSS-Datei eine @media-Regel notiert werden.

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

Alle Mainstream-Browser unterstützen media="screen", die meisten erkennen media="print". Für Handys und andere kleine Geräte ist media="handheld" gedacht. Opera unterstützt media="speech", wenn die Spracherweiterung installiert ist.

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

Browserweichen

Die modernen Browser verstehen differenzierte Abfragen wie Größe des Monitors oder des Browserfensters. Momentan interpretieren Safari 3+, Konqueror 4+, Firefox 3.1+ und Opera 9+ solche Abfragen. Internet Explorer bleibt auch in Version 8 außen vor.

So kann man (min-device-width: 481px) und (max-device-width: 480px) 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; }
}

Um Internet Explorer wieder ins Spiel zu bringen, bleiben dann die altgedienten Conditional Comments für IE.

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

Stylesheets für das iPhone

Das iPhone ignoriert media="handheld" und interpretiert die Stile nicht.

Desktop-Computer sollen das Stylesheet nicht auswerten – auf dem Monitor des Computers muss die Zeile einfacher schmuckloser Text sein. Der Text sollte auf einem standard-konformen Handy eine graue Box mit schwarzem Rahmen ausliefern, wird aber schmucklos auf dem iPhone angezeigt.

Diese Anweisung schafft es dann, dem iPhone ein eigenes Stylesheet beizubringen:

<link rel="stylesheet" href="stylePhone2.css" type="text/css" 
      media="only screen and (max-device-width: 480px)" />

oder

@media only screen and (max-device-width: 480px) { 
    #phone { border: 2px solid black; 
             color: white; 
             background: bray; }
}

Auf dem Monitor des Desktop-Computers soll die Box blau mit dunkelblauem Rahmen sein, auf dem iPhone ist sie dunkelgrau mit einem schwarzen Rahmen und weißer Schrift.

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 an ihre großen Browserbrüder anzuhängen.
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.

zurück zum Seitenanfang