Inhaltsverzeichnis
7 MedientypenEines der wichtigsten Funktionsmerkmale von Stylesheets ist, dass sie angeben, wie ein Dokument auf unterschiedlichen Medien ausgegeben wird: auf dem Bildschirm, auf Papier, mit einem Sprachsynthesizer, mit einem Braille-Gerät usw.
Bestimmte CSS-Eigenschaften sind nur für bestimmte Medien vorgesehen (z.B. die 'cue-before'-Eigenschaft für akustische Benutzerprogramme). Manchmal können Stylesheets für unterschiedliche Medientypen dieselbe Eigenschaft einsetzen, allerdings unterschiedliche Werte dafür fordern. Beispielsweise ist die Eigenschaft 'font-size' sowohl für Bildschirm- als auch für Druckmedien sinnvoll. Die beiden Medien sind jedoch unterschiedlich genug, um unterschiedliche Werte für die gemeinsame Eigenschaft zu fordern; ein Dokument benötigt auf einem Computerbildschirm normalerweise eine größere Schrift als auf Papier. Die Erfahrung hat außerdem gezeigt, dass serifenlose Schriften auf dem Bildschirm einfacher zu lesen sind, während Serifenschriften auf Papier besser lesbar sind. Aus diesen Gründen ist es notwendig, auszudrücken, dass sich ein Stylesheet – oder ein Teil eines Stylesheets – auf bestimmte Medientypen bezieht.
Momentan gibt es zwei Möglichkeiten, Medienabhängigkeiten für Stylesheets anzugeben:
@import url("lautestimme.css") aural;
@media print {
/* Stylesheet für den Druck steht hier */
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Link zu einem Zielmedium</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
</HEAD>
<BODY>
<P>Der Rumpf...
</BODY>
</HTML>
Die @import-Regel ist im Kapitel 6 über die Kaskadierung beschrieben.
Eine @media-Regel gibt durch Kommas voneinander getrennt die Ziel-Medientypen einer Menge von Regeln (in geschweifte Klammern eingeschlossen) an. Das @media-Konstrukt gestattet den Gebrauch von Stylesheet-Regeln für verschiedene Medien in ein und demselben Stylesheet:
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}
Ein CSS-Medientyp gibt eine Menge von CSS-Eigenschaften an. Ein Benutzerprogramm, das angibt, einen Medientyp dem Namen nach zu unterstützen, muss alle Eigenschaften implementieren, die sich auf diesen Medientyp beziehen.
Die für CSS-Medientypen gewählten Namen reflektieren Zielgeräte, für die die betreffenden Eigenschaften Sinn machen. In der folgenden Liste der CSS-Medientypen sind die Beschreibungen in Klammern nicht normativ. Sie sollen ihnen nur einen Hinweis darauf geben, auf welches Gerät sich der Medientyp beziehen soll.
Bei der Angabe der Medientypnamen wird die Groß-/Kleinschreibung nicht berücksichtigt.
Weil sich die Technologien so schnell ändern, gibt CSS2 keine definitive Liste der Medientypen an, die als Werte für @media verwendet werden könnten.
Hinweis. Zukünftige Versionen von CSS werden diese Liste möglicherweise erweitern. Die Autoren sollten sich nicht auf Medientypnamen verlassen, die noch nicht von einer CSS-Spezifikation definiert sind.
Jede CSS-Eigenschaftsdefinition gibt die Medientypen an, für die die Eigenschaft durch ein konformes Benutzerprogramm implementiert werden muss. Weil sich die Eigenschaften im Allgemeinen auf mehrere Medien beziehen, gibt der Abschnitt „Anwendung auf Medien“ Mediengruppen statt einzelner Medientypen an. Jede Eigenschaft gilt für alle Medientypen in den in ihrer Definition aufgelisteten Mediengruppen.
CSS2 definiert die folgenden Mediengruppen:
Die folgende Tabelle zeigt die Beziehungen zwischen Mediengruppen und Medientypen:
Beziehung 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 |