Stylesheets für verschiedene Ausgabemedien

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen für verschiedene Ausgabemedien (Druck, Bildschirmausgabe, PDAs, Vorlesegeräte etc.) eigene Stylesheets definieren.

Lösung

Erstellen Sie mehrere externe Stylesheets für die verschiedenen Medientypen und benennen Sie diese nach ihrem Verwendungszweck, z.B. print.css, screen.css und handheld.css. Danach benutzen Sie das Element link und erweitern dies um den Medientyp, um das entsprechende Stylesheet zu laden. Eine weitere Möglichkeit besteht in der Verwendung einer @media-Regel.

Hier sehen Sie den Inhalt der Datei print.css:

body {
  font: 10pt times, georgia, serif;
  line-height: 120%
}

Eine neue Datei mit dem Namen screen.css:

body {
  font: 12pt verdana, arial, sans-serif;
  line-height: 120%
}

Und eine weitere Datei mit dem Namen projection.css:

body {
  font: 14pt;
  line-height: 120%
}

Um diese drei Dateien in eine Webseite einzubinden, erweitern Sie den head-Teil um die folgenden Zeilen. Für jeden Link wird der entsprechende Medientyp angegeben:

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

Mit Hilfe der Regel @media können Sie die Regeln für unterschiedliche Medientypen auch direkt im Stylesheet festlegen:

<style type="text/css">
<!--
  @media print {
    body { font: 10pt times, georgia, serif }
  }

  @media screen {
    body { font: 12pt verdana, arial, sans-serif }
  }

  @media projection {
    body { font-size: 14pt }
  }

  @media screen, print, projection {
    body { line-height: 120% }
  }
-->
</style>

Diskussion

Wenn Sie Stile für die Druckausgabe definieren, können Sie diese in der Datei print.css speichern. Bei der Ausgabe des Dokuments auf einem Drucker werden dann nur diese Anweisungen benutzt. Auf diese Weise können Sie Platz und Tinte sparen, indem beispielsweise Bilder nicht mit ausgegeben werden.

Medienspezifische Stile sind nur für Geräte sichtbar, die den entsprechenden Medientyp auch unterstützen. Stylesheets für andere Medientypen haben keinen Einfluss auf die Darstellung in anderen Medien oder die Webseite selbst.

Mit Hilfe der Regel @media können Sie die Definitionen für unterschiedliche Medientypen in einem gemeinsamen Stylesheet vornehmen.

Die folgende Abbildung zeigt, wie die Webseite im ursprünglichen Bildschirmformat ausgedruckt würde. Für die Druckerausgabe sind die Seitenleisten nicht wichtig. Es empfiehlt sich also, diese mit einem eigenen Stylesheet für den Druck auszublenden. Am einfachsten legen Sie hierfür eine Kopie von screen.css an, die Sie print.css nennen. Hier können Sie nun die nötigen Anpassungen vornehmen. Dieses Vorgehen ist oftmals einfacher, als das Stylesheet für den Druck komplett neu zu erstellen. Die folgenden Anweisungen in screen.css wurden für print.css verändert:

#sub_banner {
  background-color: #ccc;
  border-bottom: solid 1px #999;
  font-size:.8em;
  font-style: italic;
  padding: 3px 0 3px 5px;
}
#nav1 {
  position: absolute;
  width: 30%;
  left: 60%;
  top: 100px;
  padding: 5px 5px px 5px 0;
}
#nav2 {
  position: absolute;
  width: 15%;
  left: 1%;
  top: 100px;
  padding: 5px 5px px 5px 0;
}
h1 {
  text-align: left;
  color: #fff;
  font-size: 1.2em;
  text-align: left;
  margin-bottom: 5px;
  margin-top: 5px;
}
.entry {
  padding-bottom: 20px;
  padding: 5px;
  border: solid 1px #999;
  background-color: #fcfcfc;
  margin-bottom: 25px;
}

Druckansicht der Webseite ohne Verwendung der Datei print.css

Abbildung: Die Druckansicht der Webseite ohne die Verwendung der Datei print.css.

Die kommende Abbildung zeigt die Darstellung der Seite unter Verwendung der angepassten Datei print.css:

#sub_banner {
  display: none
}
#nav1 {
  display: none
}
#nav2 {
  display: none
}
h1 {
  display: none
}
.entry {
  padding: 5px;
}

Nach Anlegen von print.css und Einbinden des Stylesheets in Webseite ist diese viel druckfreundlicher

Abbildung: Nach dem Anlegen von print.css und dem Einbinden des Stylesheets in die Webseite ist diese nun wesentlich druckfreundlicher.

Hierdurch werden das mit sub_banner markierte Element (mit der Inhaltsangabe) und die beiden Navigationsspalten versteckt. Auch das h1-Element am Anfang der Seite wird für den Druck nicht gebraucht, wodurch zusätzlich Platz gespart werden konnte. Die einzelnen Einträge werden auf dem Bildschirm in einem grauen Kasten dargestellt, was beim Drucken einen hohen Bedarf an Tinte bedeuten kann. Daher wurde ihre Darstellung so vereinfacht, dass nur die Außenabstände zwischen den Einträgen verwendet werden.

Vergessen Sie nicht, das entsprechende link-Element in die HTML-Seite einzubauen:

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

Und das ist auch schon alles. CSS vereinfacht viele Dinge, unter anderem das Design für verschiedene Medientypen. In der folgenden Tabelle finden Sie eine Liste der aktuell gültigen Medientypen aus der Spezifikation für CSS 2.1.

Tabelle: Liste der in CSS 2.1 gültigen Medientypen.

Medientyp Ausgabemedium
all Für alle Ausgabegeräte gültig
aural Geräte zur Sprachausgabe
braille Braillezeilen und andere Geräte für die direkte Ausgabe von Blindenschrift
embossed Braille-Drucker
handheld Ausgabe auf Handgeräten wie PDAs und Smartphones
print Drucker und Druckvorschau
projection Ausgabe auf Projektoren, Beamern etc.
screen Farbmonitore
tty Ausgabegeräte mit Festbreitenschrift wie Terminals, Fernschreiber und tragbare Geräte mit begrenzter Zeichenzahl
tv Fernsehgeräte und WebTV

Siehe auch

  

<< 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