Eine druckfreundliche Seite erstellen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll eine druckfreundliche Seite erstellt werden, ohne dass hierfür manuell oder dynamisch ein weiteres Dokument angelegt werden muss.

Lösung

Legen Sie ein zusätzliches Stylesheet an, in dem festgelegt wird, wie die Seite im Ausdruck aussehen soll. In diesem Beispiel heißt das Stylesheet mit den Regeln für den Ausdruck print.css.

Danach binden Sie das Stylesheet in das Dokument ein und geben dem Attribut media den Wert print:

<link rel="stylesheet" type="text/css" href="adv.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Diskussion

Stylesheets lassen sich für eine ganze Reihe verschiedener Medien definieren. Standardmäßig hat das Attribut media den Wert all. Ohne das Attribut werden alle CSS-Regeln im Stylesheet für alle unterstützten Medientypen verwendet.

Neben dem am häufigsten benutzten Medientyp screen für die Darstellung von Dokumenten in Bildschirmmedien wird in der CSS 2.1-Spezifikation noch eine Reihe weiterer Medientypen definiert. Eine Übersicht finden Sie in folgender Tabelle.

Tabelle: Medientypen.

Medientyp Beschreibung
all Geeignet für alle Ausgabegeräte.
braille Geeignet für Geräte, die Braille (Blindenschrift) direkt darstellen können.
embossed Geeignet für Braille-(Blindenschrift-)Drucker.
handheld Geeignet für Handheld-Computer ("Palmtops") mit kleinen Bildschirmen und geringer Bandbreite.
print Geeignet für seitenbasierte Ausgaben (Ausdrucke) und die Darstellung des Dokuments in der Druckvorschau.
projection Geeignet für Projektionsmedien, zum Beispiel Videobeamer.
screen Hauptsächlich geeignet für Farbbildschirme.
speech Geeignet für Sprachausgabegeräte.
tty Geeignet für Medien, die mit Schriften mit fester Zeichenbreite arbeiten (wie beispielsweise Telexmaschinen, Terminals oder tragbare Geräte mit beschränkten Anzeigefähigkeiten).
tv Geeignet für Fernseher und ähnliche Geräte (mit geringer Auflösung, beschränkt scrollbaren Farbbildschirmen und möglicherweise Tonausgabe).

Wenn Sie die Stildefinitionen für Ihre Webseite festlegen, ist ein Stylesheet für alle Medientypen möglicherweise schon ausreichend:

<link rel="stylesheet" type="text/css" href="uber.css" media="all" />

Oder Sie können ein gemeinsames Stylesheet für bestimmte, aber nicht alle Medientypen verwenden. Wollen Sie die gleichen Stildefinitionen für Projektionen und gedruckte Medien benutzen, geben Sie zwei durch ein Komma getrennte Werte für das Attribut media an:

<link rel="stylesheet" type="text/css" href="print.css" media="print,projection " />

Im obigen Beispiel werden die Regeln aus dem Stylesheet print.css für die Darstellung des Dokuments im Druck und mit Projektionsmedien benutzt.

Zuweisung von Medientypen mit @import

Außer link gibt es weitere Möglichkeiten, um Medientypen festzulegen. Dazu gehören die @import-Regeln. Im folgenden Beispiel wird ebenfalls ein Stylesheet für die Verwendung mit Druck- und Projektionsmedien festgelegt:

@import URI(print.css) print,projection;

Die @import-Regel kann entweder innerhalb eines style-Elements oder in einem externen Stylesheet stehen.

Zuweisung von Medientypen mit @media

Eine weitere Methode zum Festlegen von Stylesheets und Medientypen besteht in der Verwendung von @media-Blöcken. Damit können Sie Regeln für unterschiedliche Medientypen in einem gemeinsamen Stylesheet definieren:

<style type="text/css">
 @media print {
  body {
   font-size: 10pt;
   background-color: white;
   color: black;
  }
 }
 @media screen {
  body {
   font-size: medium;
   background-color: black;
   color: white;
  }
 }
</style>

Siehe auch

Erläuterungen zu Medientypen in Abschnitt 7 der CSS 2.1-Spezifikation.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln