Varianten

Normalerweise werden Webseiten für User gestaltet, die vor einem Webbrowser an einem Desktop-PC sitzen und die Seite betrachten. Was ist aber mit sehbehinderten Usern, die sich Eure Seite von einem Programm vorlesen lassen? Beim Ausdrucken Eurer Seite soll beispielsweise nicht unbedingt die Hintergrundgrafik mitgedruckt werden. Oder Ihr wollt eine spezielle Formatierung für User, die Eure Seite auf einem TV-Bildschirm betrachten (aufgrund der meist deutlich geringeren Auflösung). Auch für solche Dinge bietet CSS zumindest Ansätze: Ihr könnt bei Euren Stylesheets angeben, auf welchen Medien sie berücksichtigt werden sollen.

Dabei unterscheidet CSS folgende Medientypen

all

steht für alle Medien und ist der gewohnte Standard.

aural

bezieht sich auf die Ausgabe durch eine vom Computer erzeugte synthetische Stimme. Es gibt eine ganze Reihe von CSS-Eigenschaften, mit denen Ihr diese könstliche Stimme «formatieren» könnt, von Angaben zur Lautstärke bis zur scheinbaren Aufregung des «Sprechers». Diese Eigenschaften machen natürlich bei der Ausgabe auf dem Bildschirm wenig Sinn.

braille

bezieht sich auf die Darstellung in Braille (Blindenschrift), genauer gesagt auf Braille-Zeilen (Zusatzgerätze für Sehbehinderte).

embossed

dreht sich ebenfalls um die Braille-Ausgabe. Hier geht es aber um Drucker, die ganze Seiten in Blindenschrift drucken.

handheld

gilt, wie der Name schon sagt, für Handheld-Computer mit ihren kleinen Displays und oft schmaler Internet-Anbindung.

print

meint den Ausdruck auf Papier. Auch hierfür gibt es einige CSS-Eigenschaften, mit denen Ihr beispielsweise die Seitengröße festlegen könnt.

projection

gilt für Projektoren, Beamer und ähnliche Medien. Hier seid Ihr oft mit einem sehr geringen Konstrast oder schlechter Auflösung konfrontiert.

screen

ist der Normalfall mit einem Browser auf einem Desktop-PC.

tty

bezieht sich auf Computer-Terminals, die keine graphischen Fähigkeiten haben, oder auch reine Textbrowser.

tv

meint die Ausgaben auf einem TV-Bildschirm mit geringer Auflösung, schlechten Möglichkeiten zum Scrollen, aber vergleichsweise gutem Sound.

Diese Unterscheidungen verstehen leider einige ältere Browser nicht: Der Internet Explorer berücksichtigt Angaben zum Medientyp erst ab Version 5.5 (Version 5.0 auf dem MacIntosh); Netscape zeigt seit Version 6.x erste Ansätze, gleiches gilt für Opera ab Version 5.x.

Angeben könnt Ihr den Medientyp auf verschiedene Art und Weise. Bei mit dem link-Tag eingebundenen externen Stylesheets gibt es das media-Attribut

<link rel="stylesheet" media="screen" href="screen.css">

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="aural" href="audio.css">

<link rel="stylesheet" media="handheld" href="small.css">

Der erste link-Tag wird also nur berücksichtigt, wenn die Seite auf einem PC dargestellt wird, der zweite nur beim Ausdruck, der dritte nur bei aural-Medien und so weiter.

Nach demselben Prinzip könnt Ihr auch im Head definierten style-Tags ein media-Attribut angeben

<style media="print">
  // die hier definierten Stylesheets gelten nur für den Ausdruck

</style>

Auch in einem style-Tag können unterschiedliche Medientypen angesprochen werden. Eine Variante ist die @import-Anweisung

<style type="text/css">
  @import url(print.css) print
  @import url(small.css) handheld, tv
  @import url(screen.css) screen
</style>

Nach dem Schlüsselwort '@import' folgt die URL der CSS-Datei, danach ein oder mehrere Medientypen. Die andere Variante ist die @media-Anweisung

<style type="text/css">
  @media print
    {
    body{background-image:none;
	 color:black}
    }

  @media screen, tv, handheld
    {
    body{background-image:url(background.gif);
	 color:lightblue}
    }
</style>

Hier folgt auf das Schlüsselwort '@media' ein oder mehrere Medientypen, anschließend die gewünschten Stylesheets in Mengenklammern. Die Syntax der Stylesheets ist die gleiche, als würdet Ihr sie direkt in den style-Tag schreiben.

Aus der Kristallkugel

Das Standardisierungsgremium W3C arbeitet bereits am Nachfolger des aktuellen CSS2, logischerweise genannt CSS3. Der neue Standard ist noch nicht fest ausformuliert und wird natürlich noch von keinen Browser unterstützt. Trotzdem sind bereits einige interessante Möglichkeiten abzusehen, die CSS3 bei der Gestaltung von Webseiten bieten wird.

Im Gegensatz zum eher monolithischen CSS2 wird CSS3 in Modulen aufgeteilt sein. Damit braucht ein Browser nur die Module zu unterstützen, die auch benötigt werden, und nicht den kompletten Standard. Ein Hersteller von Browsern für Handhelds mit Schwarz/Weiß-Displays bräuchte sich also um die Implementierung von Farbeigenschaften keine Gedanken zu machen.

Interessanter für den Webautor sind deutlich ausgeweitete Möglichkeiten bei der Unterscheidung von Medientypen. CSS3 soll dabei komplexe Abfragen ermöglichen; beispielsweise unterschiedliche Stylesheets für unterschiedliche Bildschirmauflösungen.

Auch eine Erweiterung der bisher doch arg begrenzten Selektorvielfalt ist geplant. Damit könnte zum Beispiel die Formatierung einer Checkbox davon abhängig gemacht werden, ob der User diese Checkbox ausgewählt hat oder nicht.

Geplant sind Erleichterungen für das Erstellen von mehrspaltigen Layouts, dazu Verbesserungen beim Ausdruck von Dokumenten (automatisches Einfügen von Seitenzahlen und Kapitelüberschriften, ...) und noch einiges mehr.

Insgesamt dürfte CSS3 dem Webautor einige neue und interessante Pfeile für die Gestaltung seiner Seiten in den Köcher geben.