Hier bist Du: Home « Workshops « Workshop CSS: Teil 7 - Stylesheets für unterschiedliche Medien

Workshop CSS: Teil 7 - Stylesheets für unterschiedliche Medien

Eine der Stärken von CSS ist das Festlegen von Formaten für verschiedene Ausgabemedien. So kannst du mit unterschiedlichen Stylesheets deine Website für Bildschirmausgaben, Drucker oder auch Handys und Sprachsoftware erstellen. CSS 4 You verwendet Stylesheets für die Druckerausgabe, in denen u.a. die linke Navigation mit display:none ausgeblendet ist. Schaue dir diese Seite doch mal in der Druckvorschau an. Der Browser erkennt anhand des angegebenen Medientyps, welche Stylesheets verwendet werden sollen.

 

nach oben

Medientyp im LINK-Tag angeben

Es gibt zwei Möglichkeiten, Medientypen anzugeben. Die Erste ist das Attribut media="" im <link>-Tag:

Internet Explorer 5.0, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
<link rel="Stylesheet" type="text/css" 
href="screen.css" media="screen" />

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

Diese beiden Zeilen geben jeweils eine CSS-Datei für die Bildschirm- (media="screen") und die Druckerausgabe (media="print") an. Der Browser verwendet abhängig vom Wert des media-Attributes die entsprechende CSS-Datei. Eine Liste der unterschiedlichen Medientypen findest du weiter unten.

 

nach oben

Stylesheets mit @import einfügen

Die zweite Möglichkeit besteht darin, Stylesheets mit @import einzufügen:

Opera 5, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
@import "print.css" print;
@import url("screen.css") screen, handheld;

@import gefolgt von der CSS-Datei in Anführungszeichen oder url() und dahinter eine oder mehrere Medientypen durch Kommas getrennt. Diese Methode wird vom Internet Explorer allerdings nicht unterstützt. Der IE beherrscht @import zwar seit der Version 4 - nicht aber im Zusammenhang mit einer Medientypangabe.

 

nach oben

Innerhalb von Stylesheets

Innerhalb von Stylesheetbereichen kannst du auch zwischen Medientypen unterscheiden:

Internet Explorer 5.5, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
@media screen {

 body { font-size:80%; }
}
@media print {
 body { font-size:100%; }
}
@media screen, handheld {
 body { color:black; }
}

Verwende dafür @media medientyp {Stylesheetangaben...} und füge deine Stylesheet-Angaben innerhalb der geschweiften Klammern ein. medientyp steht für ein oder mehrere durch Kommas getrennte Schlüsselworte, die die unterschiedlichen Medientypen kennzeichnen

 

nach oben

Liste der Medientypen

Die folgenden Medientypen sind in CSS 2.1 festgelegt:

all
Für alle Ausgabemedien.
aural
Für Sprachsoftware. Seit CSS 2.1 gibt es für diesen Medientyp das Schlüsselwort speech.
braille
Für Ausgabegeräte mit Braille-Zeile (Blindenschrift).
embossed
Für Braille-Drucker (Drucken in Blindenschrift).
handheld
Für Handhelds, Palms, Handys
print
Für Druckerausgabe
projection
Für Projektoren und Beamer
screen
Für Bildschirmausgaben
 speech
Für Sprachsoftware. Bis CSS 2.0 gab es für diesen Medientyp nur das Schlüsselwort aural.
tty
Für Ausgaben auf Geräten mit fester Schriftbreite, wie Terminals oder auch Textbrowser.
tv
Für Ausgaben auf Fernsehgeräten.

 

nach oben

Mediengruppen

Die Medientypen lassen sich in Gruppen einteilen, die sich in der Art der Ausgabe unterscheiden:

continuous, paged
Unterscheidet zwischen fortlaufender oder seitenorientierter Ausgabe
visual, audio, speech oder tactile
Unterscheidet zwischen visueller, gesprochener oder gefühlter (tastbarer) Ausgabe
grid, bitmap
Unterscheidet die Auflösung des Ausgabegerätes
interactive, static
Unterscheidet nach Ausgabegeräten mit oder ohne Benutzereingaben
all
Enthält alle Medientypen

Die folgende Tabelle zeigt die Beziehungen zwischen Mediengruppen und Medientypen:

Medientypen Mediengruppen
continuous/paged

visual/aural/tactile

grid/bitmap

interactive/static
Aural continuous aural N/A both
braille continuous tactile grid both
emboss paged tactile grid both
handheld both visual both both
Print paged visual bitmap static
projection paged visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

In der Beschreibung der Stylesheet-Eigenschaften findest du auch eine Angabe zum Medium. So ist zum Beispiel color für visual vorgesehen. D.h. dass diese Eigenschaft nach der Tabelle oben für die Ausgabe auf Bildschirmen (screen), Handhelds (handheld), Beamern (projection), Fernsehgeräten (tv) und Textbrowser (tty) geeignet ist.

nach oben