Verlauf
Alle Kapitel anzeigen
voriges KapitelCSS bietet die Möglichkeit, eine HTML-Datei abhängig vom verwendeten Ausgabegerät unterschiedlich darzustellen. Dazu muss man für verschiedene Ausgabemedien je ein eigenes Stylesheet zur Verfügung stellen - der Browser entscheidet schlussendlich dann, welches dieser Stylesheets für die Darstellung verwendet wird.
So kann man z.B. für die "Ausgabe auf einem Drucker" (=Ausdruck) sicherstellen, dass hohe Kontraste und keine Hintergrundfarben gedruckt werden oder z.B. für kleine Bildschirme auf mobilen Geräten eine Seite in einem anderen Layout dargestellt wird als auf einem Computerbildschirm. Beispiele für die gängigsten Medientypen sind "screen" (Computerbildschirme), "print" (Ausdruck), "braille" (Braillezeile), "tty" (teletype: nichtgraphische Textbrowser wie z.B. lynks oder links), "handheld" (portable Geräte wie z.B. PDAs).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dokumententitel</titel>
<link rel="stylesheet" type="text/css" href="screenStyle.css" media="screen" />
<link rel="stylesheet" type="text/css" href="printStyle.css" media="print" />
</head>
<body>
[...]
</body>
</html>
Denselben Effekt kann man auch mit einer @import-Anweisung wie unten dargestellt erzielen, allerdings unterstützt der Internet Exlporer kein Einbinden von ausgabespezifischen Stylesheets mittels @import-Anweisung!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dokumententitel</titel>
<style type="text/css">
@import url(screenStyles.css) screen;
@import url(printStyles.css) print;
</style>
</head>
<body>
[...]
</body>
</html>
