CSS für unterschiedliche Medien

CSS für unterschiedliche Medien

Beim Einbinden von Cascading Style Sheets in ein (X)HTML Dokument habe ich im Laufe der Zeit folgende Möglichkeiten ausprobiert:

media="screen"

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

Funktioniert mit vielen CSS-fähigen Browsern und mobilen Geräten. Ist einfach und sehr universell einsetzbar.

Möchte man aber Browser ausschliessen, wie Netscape in der Version 4, weil man erweiterte CSS-Funktionalitäten verwendet, so hat man mit

<link rel="stylesheet" type="text/css" href="styles.css" media="screen,projection" />

die Möglichkeiten hierzu. Jetzt kann Netscape 4.x das CSS nicht mehr laden. Der Grund hierfür ist ein weiterer Parameter, also bei zwei oder mehr Parametern bekommt Netscape 4.x kein CSS mehr. Ein weiterer Vorteil dieser Methode ist, das Opera bis Version 8.5 beim Vollbildmodus die Webseite mit CSS rendert. Für Opera ab Version 9.x ist das nicht notwendig.

media="print"

<link rel="stylesheet" type="text/css" href="drucker.css" media="print" />

Dieser Parameter bewirkt, das man eine Webseite für das Drucken aufbereiten kann. Man kann dies so realisieren, das nur die Inhalte gedruckt werden, aber Navigation oder andere Dinge wie Werbung nicht. Auch wird keine extra aufbereitete Druckseite benötigt.

Leider erscheint auf dem Druck nicht immer das was man am Bildschirm sieht, zum Beispiel eine Tabelle mit Zeilenformatierungen. Um das ebenfalls zu realisieren, muss man diese CSS Formatierungen auch im CSS für das Drucken ablegen, was im schlimmsten Fall dazu führt, das man im Prinzip das CSS doppelt hat.

media="handheld"

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

Unter Berücksichtigung, das CSS Experten das auch ohne ein zusätzliches CSS realisieren, habe ich ein spezielles CSS für das Medium "handheld". Leider hat die Erfahrung gezeigt, das nicht alle Browser auf einem PDA oder Mobile Phone nur dieses CSS benutzen. Einige Browser lesen "media=screen" und "media=handheld". Um auch dieses Problem für meine Webseite in den Griff zu bekommen, arbeite ich mit folgender Lösung in allen meinen Webprojekten:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen,projection,handheld" />
<link rel="stylesheet" type="text/css" href="drucker.css" media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

Diese Methode bewirkt

  • das die meisten Browser diese Seite korrekt anzeigen
  • das im Ausdruck nur die Inhalte ausgedruckt werden
  • diese Methode von PDA und Mobile Phone unterstützt werden
  • das Netscape 4.x kein CSS mehr lädt
  • Opera im Vollbildmodus funktioniert

Fazit

Dieser Artikel beruht auf meiner eigenen Erfahrung mit vielen Browsern und mobilen Medien. Außerdem gibt es noch viele weitere Möglichkeiten wie Conditional Comments für den Internet Explorer und andere Lösungen wie CSS über "@import" in die Webseite einzubinden.

In allen Fällen sollte eine Webseite allerdings auch ohne CSS eine logische und sinnvolle Struktur haben, damit reine HTML Browser oder Bildschirmlesegeräte sauber und ohne Hindernisse damit umgehen können.

Weiterführender Link

» W3C CSS Level 2 Medientypen

Nach oben

 

Nach oben