CSS - unterschiedliche Ausgabemedien

michael.svoboda.uni-linz, 1. November 2010, 14:35

Ausgangslage

(X)HTML und CSS bieten grundsätzlich die Möglichkeit, über das Attribut "media=..." im <link rel="stylesheet" ... /> unterschiedliche CSS-Vorlagen für unterschiedliche Ausgabemedien (Bildschirm, Beamer, Sprache...) festzulegen. In der Praxis unterstützen aktuelle Browser dies allerdings nicht vollständig, weswegen ich verschiedene Möglichkeiten zur Umsetzung ausprobiert habe. Verwendet wurden als Browser Firefox 3.5.15 und Internet Explorer 7 (jeweils unter Windows Vista) bzw. Safari (iPhone) und Blackberry Internet Browser.

Die getesten, standardmäßig definierten Ausgabemedien waren (interessensbedingt): screen, print, handheld, projection.

Automatische Anwendung durch Browser

Die unterschiedlichen Stylesheets wurdem im <head> der HTML-Datei definiert:

<link rel="stylesheet" media="screen" href="screen.css" title="screen" />
<link rel="stylesheet" media="print" href="print.css" title="print_auto" />
<link rel="stylesheet" media="handheld" href="handheld.css" title="handheld_auto" />
<link rel="stylesheet" media="projection" href="projection.css" title="projection_auto" />

Das Ergebnis:

  • "screen" funktionierte erwartungsgemäß.
  • "print" funktionierte erwartungsgemäß, allerdings wurden bestimmte CSS-Definitionen (background-color) nicht angewandt (Standard-Browser-Einstellungen).
  • "handheld" wurde von den verwendeten Smartphones ignoriert, stattdessen wurde "screen" verwendet.
  • "projection" wurde nicht automatisch erkannt, das ist wohl technisch noch auf absehbare Zeit unmöglich.

Insgesamt war das Ergebnis der automatischen Erkennung also - inbesondere hinsichtlich mobiler Endgeräte - nicht zufriedenstellend. In der Praxis ist oftmals zu beobachten, dass für mobile Endgeräte serverseitig die "richtige" Version ausgewählt oder die Auswahl am Endgerät angeboten wird. Dabei handelt es sich allerdings durchwegs um unterschiedliche Seiten und nicht bloß unterschiedliche Stylesheets.

Umgehung durch Auswahl durch NutzerInnen

Um für Handhelds bzw. Beamer dennoch die passende Version ein und derselben Seite auswählen zu können, habe ich ein vorgefertigtes JavaScript verwendet. Dazu müssen allerdings die alternativen Stylesheets ihm <head> doppelt angeführt werden: einmal zur automatischen Erkennung durch den Browser, ein weiteres Mal zur manuellen Auswahl ohne media-Angabe. Wird letzteres nicht gemacht, zeigt der Browser bei manueller Auswahl eine unformatierte Seite an: es wird bspw. die Mobilversion gewählt, der Browser verwendet diese allerdings nicht, da er media="handheld" nicht für passend hält.

Die praktische Funktionsweise habe ich an Hand einer einfachen Seite gezeigt.

Es zeigt sich ein interessanter Unterschied hinsichtlich der background-color: Firefox interpretiert die verwendeten Stylesheets so, dass die background-color für die gesamte Seite geändert wird, Internet Explorer macht das nur für die verwendeten Divider.

Fazit

Die automatische Erkennung des passenden Stylesheets für "print" ist äußerst praktisch, wobei Browser standardmäßig ohnehin schon relativ gute Ergebnisse im Ausdruck erzielen (etwa durch das Ignorieren der Hintergrundfarbe).

Allerdings wird man für mobile Endgeräte bei komplexen Seiten jedenfalls eine reduzierte Version anbieten müssen. Ob die Erkennung nun serverseitig passiert oder durch Nutzerauswahl wird je nach Site entschieden werden müssen.

0 comments :: Kommentieren