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.
Medientyp im LINK-Tag angeben
Es gibt zwei Möglichkeiten, Medientypen anzugeben. Die Erste ist das Attribut media="" im
<link>-Tag:
,
,
,
,
,
<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.
Stylesheets mit @import einfügen
Die zweite Möglichkeit besteht darin, Stylesheets mit @import einzufügen:
,
,
,
,
@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.
Innerhalb von Stylesheets
Innerhalb von Stylesheetbereichen kannst du auch zwischen Medientypen unterscheiden:
,
,
,
,
,
@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
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
- 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.
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 |
| 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.