CSS 2.1 ::Grundlegendes
Behandlung von Medien in CSS
Die Fähigkeit, zwischen verschiedenen Medien zu unterscheiden und zu definieren, wie ein Dokument in verschiedenen Medien dargestellt werden soll, ist eine der wichtigsten Charakteristika von Stylesheets.
Einige CSS-Eigenschaften sind nur für bestimmte Medien geeignet — hier müssen zuerst alle auralen und Paginierungs- Eigenschaften genannt werden. Andererseits lassen sich viele Eigenschaften für mehrere Ausgabemedien verwenden — so sind z. B. Angaben zur Schriftgröße für Druck- und Bildschirmausgaben gleichermaßen relevant. Gleichzeitig sind die beiden genannten Medien aber unterschiedlich genug, dass sie die Angabe verschiedener Werte in den entsprechenden Stylesheets rechtfertigen.
Medientypen
In CSS 2.1 sind 10 Medientypen definiert. In künftigen CSS-Versionen mögen dies mehr werden, andererseits erhält jedoch bis heute nur der Typ screen
breite Unterstützung durch die Browser.
Die Namen der Medientypen sind so gewählt, dass sie den Zweck des Typs in etwa wiederspiegeln, Groß-/Kleinschrift spielt bei der Angabe keine Rolle.
Bei der Einbindung von Stylesheets in ein Webdokument können ein oder mehrere Medientypen angegeben werden, ein Anwenderprogramm kann jedoch nur einen Medientyp zur Zeit darstellen, z. B. die Ausgabe am Bildschirm oder die Druckvorschau (dabei ist die vom Browser generierte Druckansicht gemeint, nicht die druck-optimierte Ausgabe, die verschiedene Websitebetreiber heute anbieten).
Jedes Mal, wenn ein Webdokument ausgegeben wird, prüft das Anwenderprogramm, ob ein dem Ausgabemedium entsprechendes Stylesheet vorliegt. Ist dies der Fall, wird es für die Ausgabe verwendet. Ist das nicht der Fall, wendet das Programm gegebenenfalls sein internes Stylesheet an oder es stellt das Webdokument ganz unformatiert dar. Nehmen wir als Beispiel an, das Stylesheet eines Web-Dokuments sei nur für das Medium screen
zugelassen. Wenn ein Anwender dieses Dokument nun drucken will, erhält er eine völlig unformatierte Ausgabe auf den Drucker.
Mögliche Medientypen
Die hier genannten Medientypen sind nur die von W3C als normativ bezeichneten. Vor der Verwendung anderer Medientypen (wie es doch hin und wieder passiert) muss gewarnt werden, denn deren Unterstützung durch die Browser ist sehr zweifelhaft.
Auch lassen sich diese Medientypen nicht ohne weiteres nach HTML übertragen, denn für HTML sind eigene Medientypen definiert, die den hier genannten nicht unbedingt entsprechen.
- all
- Dieser Medientyp ist anwendbar für alle Ausgabegeräte. Da es in CSS 1 noch keine Medientypen gab, kann dieser Medientyp verwendet werden, um Stylesheets vor alten Browsern, die CSS 2.1 noch nicht erkennen, zu verstecken.
- braille
- Der Text wird in ein Braillegerät eingespeist und dort in einem Ausgabestreifen mit veränderbarer Oberflächenstruktur durch Braillezeichen dargestellt. Diese können dann mit den Fingerspitzen abgetastet werden.
- embossed
- Dieser Medientyp erzeugt ebenfalls eine Brailleausgabe, hier jedoch in Form eines Papier- oder Karton'ausdrucks', der abgetastet werden kann.
- handheld
- Ein Medientyp, der für Geräte mit kleinem Bildschirm und begrenzter Bandbreite vorgesehen ist, z. B. Mobiltelephone oder PDAs.
- Für Druckausgabe, d. h. für Ausgabemedien, deren Abmessungen vorgegeben sind. Dies gilt auch für Druckvorschauen im Browser. Die speziell für diesen Zweck kreierten Eigenschaften sind in der Sektion seitenorientierte Eigenschaften referenziert.
- projection
- Der Aufgabenbereich dieses Medientyps liegt im Bereich der Präsentationen mittels Projektions- und Vorführgeräten. Typischerweise werden hier sehr große Schriften und nur sehr wenige Zeilen pro Seite verwendet. Auch hier sind die seitenorientierten Eigenschaften maßgeblich.
- screen
- Dieser Medientyp wird hauptsächlich für Computerbildschirme verwendet.
- speech
- Geplant zur Verwendung für synthetische Sprachausgabe. Die CSS-2-Sektion über aurale Stylesheets enthielt Eigenschaften, die für diesen Bereich vorgesehen waren, aber heute nicht mehr normativ sind. Sie werden auf dieser Website unter dem Titel Aurale Eigenschaften vorgestellt.
- tty
- Vorgesehen für Ausgabe an Geräten mit fester Zeichenbreite, ist dieser Medientyp für Ausgabe auf Telefaxgeräten oder Teletype-Terminals anwendbar. Die Ausgabeeinheiten dieser Geräte arbeiten auf Zeichenbasis und nicht auf Pixelbasis. Deshalb ist ein Vorteil dieses Medientyps, dass Text wirklich als Textzeichen und nicht als Image ausgegeben wird und dadurch auf diesen Geräten überhaupt erst lesbar wird.
- tv
- Dieser Medientyp ist geeignet zur Ausgabe auf fersehähnlichen Geräten mit grober Bildschirmauflösung und Farbdarstellung, keiner oder nur geringer Scrollfähigkeit und Tonausgabe.
Mediengruppen
Zur Zuordnung der Medientypen zu den Eigenschaften hat das W3C Mediengruppen definiert, in denen die Medientypen nach unterschiedlichen Gesichtspunkten zusammengefasst werden. Dies deshalb, weil jedes Element in der Regel auf mehreren Medientypen ausgegeben werden kann. Hier folgt zunächst eine Übersicht der festgelegten Mediengruppen:
- continuous oder paged.
Zur Unterscheidung zwischen fortlaufender oder seitenorientierter Ausgabe. - visual, audio, speech oder tactile.
Zur Unterscheidung nach dem Sinn, der beim Besucher angesprochen wird: visuell, aural, sprachlich oder tastbar. - grid oder bitmap.
Zur Unterscheidung nach der Auflösung des Ausgabegerätes: Zeichengitter (z. B. die alten 24×80-Zeichen-Monitore) oder pixelgesteuerter Bildschirm, in dem jeder Pixel einzeln angesprochen wird. - interactive oder static.
Zur Unterscheidung danach, ob das Ausgabegerät Interaktion mit dem Benutzer erlaubt oder nicht. - all
Beinhaltet alle Medientypen.
Diesen Mediengruppen werden die Medientypen mit Hilfe der folgenden Tabelle zugeordnet.
Medientypen | Mediengruppen | |||
---|---|---|---|---|
continuous/paged | visual/audio/speech/tactile | grid/bitmap | interactive/static | |
braille | continuous | tactile | grid | Beide |
emboss | paged | tactile | grid | static |
handheld | Beide | visual, audio, speech | Beide | Beide |
paged | visual | bitmap | static | |
projection | paged | visual | bitmap | interactive |
screen | continuous | visual, audio | bitmap | Beide |
speech | continuous | speech | (Nicht zutreffend) | Beide |
tty | continuous | visual | grid | Beide |
tv | Beide | visual, audio | bitmap | Beide |
Beispiele:
Für die Eigenschaft background-position
wird die Mediengruppe visual angegeben. In der oben stehenden Tabelle erscheint visual in der dritten Spalte und dort in den Zeilen der Medientypen 'handheld', 'print', 'projection', 'screen', 'tty' und 'tv'. Background-position
kann deshalb auf all den genannten Medientypen ausgegeben werden.
Anders sieht es für die Eigenschaft azimuth
aus. Die dort angegebene Mediengruppe aural (entspricht audio) ist nur für die Medientypen 'handheld', 'screen' und 'tv' verfügbar.
Medienabhängige Stylesheets
Wenn man möchte, dass ein Stylesheet nur für einen bestimmten Medientyp verwendet wird, dann muss man diesen Medientyp bei der Verlinkung des Stylesheets angeben. Es gibt drei Möglichkeiten, medienabhängige Stylesheets zu spezifizieren:
- Durch die Angabe des Medientyps in einer
@import
-Regel:@import url("bildschirm.css") screen; @import url("druck.css") print;Die@import
-Regel kann im Stylesheet-Bereich im Kopf einer Datei oder in einer externen CSS-Datei auftreten. Sie muss immer vor allen anderen Deklarationen stehen. - Durch Angabe des Medientyps in einer
@media
-Regel:@media screen, projection { h1 { text-decoration: underline; } /* ... usw. ... */ } @media print { h1 { page-break-before: always; } /* ... usw. ... */ }Hierzu ein kleines Beispiel: Eine Präsentation bei einer Konferenz wurde in Form einer Website ausgearbeitet, die während des Vortrags auf den Schirm projiziert wird. Gleichzeitig soll auch eine Druckversion des Vortrags verfügbar sein, die an die Zuhörer ausgeteilt werden kann.
Alles wurde in einem Stylesheet verwirklicht. In allen modernen Browsern kann man sich die Website im Vollbildmodus (durch die Taste 'F11') und in der Druckvorschau ansehen. Leider verwendet aber nur Opera ab Version 6 im Vollbildmodus auch das für die Präsentation vorgesehene Stylesheet.
Hinweis: Der Inhalt des Beispiels ist dem Buch «Cascading Style Sheets: Separating Contents from Presentation» von Owen Briggs et al., erschienen bei Glasshaus, entnommen.
- Durch das Attribut
media
im ElementLINK
.<link rel="stylesheet" type="text/css"
media="screen" href="continuous.css"> <link rel="stylesheet" type="text/css";
media="projection, print" href="paged.css">Hier wird auf HTML-Ebene entschieden, welches Stylesheet für welche Medien verwendet wird.
Lässt man alle Angaben zum Medium weg, ist das Stylesheet medienunabhängig und gilt automatisch für alle Medientypen. Mehrere Medientypen für dasselbe Stylesheet spezifiziert man, indem man alle gewünschten Medientypen in einer komma-separierten Liste angibt.
TOP