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;
}
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;
}
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 |
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
- Den Abschnitt Druck für die Definition spezieller Stile für die Druckausgabe,
- den Abschnitt zu Medientypen in der CSS 2.1-Spezifikation,
- den Artikel »ALA’s New Print Styles« und
- »Pocket-Sized Design: Taking Your Website to the Small Screen«.
<< 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