Druckerfreundlich via Stylesheet

Viele werden ihn kennen und lieben: den Button für die "druckerfreundliche Version". Dank diesem Button kann man sich die aktuelle Seite so formatieren lassen das sie nicht eine ganze Farbpatrone verbraucht, und auch die Navigation etc. verschwinden auf einmal - man hat nur noch das was man will und ist zufrieden. Für den Webmaster bedeutet eine solche Version meistens jedoch eine Menge Arbeit, muss er doch ein und die selbe Seite in zwei Versionen anbieten. Da kann man es sich einfach machen und eine zweite Seite erstellen die nur den Inhalt enthält, oder man macht es sich einfacher und setzt ein spezielles Stylesheet für den Druck ein.

Stylesheet?

Stylesheets, auch bekannt als Cascading Stylesheets (wie sie offiziell heißen), sind seit HTML 4 offiziell eingeführt. Der Gedanke hinter den Stylesheets ist einfach und höchst effizient: Die einzelnen Seiten werden hierbei mit Hilfe des Stylesheets formatiert, so wird z.B. im Stylesheet die Hintergrund- und Textfarbe sowie die Schriftart usw. festgelegt. Das geniale an der Sache ist, dass man diese Formatierung auf jeder Seite verwenden kann. Bindet man z.B. das selbe Stylesheet auf 200 Seiten ein und ändert nur das Stylesheet hat man auf einen Schlag 200 Seiten umformatiert. Die Arbeitserleichterung sollte direkt auffallen. Hier ein kleines Beispiel-CSS in dem für jeden

-Abschnitt der Seite als Schriftart Arial mit einer Größe von 12 Pixeln festgelegt wird:

P { font-family: "arial"; font-size: 12px; }

Diese Zeile kann man jetzt in einer Datei, z.B. <code>style.css</code>, speichern. Diese Datei kann man dann mit folgender Zeile im <code><head></code>-Teil jeder beliebigen HTML-Datei einbinden:

<link rev="stylesheet" type="text/css" href="style.css">

Zu beachten ist dabei nur die Angabe "href", da dort angegeben wird wo sich das Stylesheet befindet. Die beiden anderen Parameter sind immer gleich.

Medientypen

Mit der "zweiten Ausgabe" von Cascading Stylesheets, offiziell "Cascading Stylesheets, level 2" genannt, wurden jede Menge Medientypen eingeführt. Mit diesen Medientypen sollte dem Webmaster die Möglichkeit gegeben werden, seine Seite für verschiedene Endgeräte, wie z.B. PDAs, passend zu formatieren ohne dabei mehrere Seiten erstellen zu müssen. Unter anderem gibt es seitdem die Medientypen "screen" und "print", und genau diese ermöglichen uns die einfache Erstellung einer druckerfreundlichen Seite.

Wie es geht

Bleiben wir bei dem eben verwendeten Beispiel und ändern das Stylesheet <code>style.css</code> wie folgt ab:

@media screen {
P { font-family: "arial"; font-size: 12px; }
}
@media print {
P { font-family: "times new roman"; font-size: 10pt; }
}

Was bedeutet das jetzt? Als erstes sei gesagt das sich an der Darstellung auf dem Bildschirm nichts geändert hat - der Text erscheint weiterhin in der Schriftart Arial und hat weiterhin eine Größe von 12 Pixeln. Beim drucken kann man jedoch einen netten Effekt beobachten: Der Text der auf dem Bildschirm als 12 Pixel Arial erscheint ist beim drucken auf einmal zu 10 Punkten Times New Roman geworden! Dieser Effekt kommt durch die <code>@media</code>-Anweisungen zustande, durch sie wird dem Browser gesagt für welchen Medientyp die eingeschlossenen Anweisungen gelten. Hätte man z.B. im Medientyp "print" statt einer Größe von 10 Punkten eine Größe von 40 Punkten angegeben würde der Besucher beim drucken mit riesigen Buchstaben beglückt werden - während sich am Bildschirm nichts geändert hat.

Der Alleskönner

Nun kommt es aber auch vor das man unabhängig vom Medientyp gleiche Formatierungen haben will, z.B. was die Textfarbe angeht. Für solche Fälle gibt es den Medientyp "all", in ihm können Angaben gemacht werden die für alle Medientypen gültig sind. Will man z.B. für alle <code></code>

-Abschnitte, egal um welchen Medientyp es sich handelt, grundsätzlich eine rote Schriftfarbe haben notiert man dies so:

@media all {
P { color: #ff0000; }
}

Erweitert man das Beispiel-CSS um diesen Teil hat man ab sofort jeden <code></code>

-Abschnitt in roter Farbe, egal wieviele von diesen Abschnitten man hat und egal ob die Seite gerade am Bildschirm angezeigt oder ausgedruckt wird. Eine Einschränkung des Medientyps "all" gibt es jedoch: Hat man in einem der speziellen Medientypen ("screen", "print" etc.) schon Angaben gemacht, z.B. die Schriftfarbe auf gelb gesetzt, dann gehen diese spezielleren Angaben vor. D.h. dass die Schrift dann gelb ist, egal was der Medientyp "all" diesbezüglich sagt.

Mehr Übersichtlichkeit

Das alles ist natürlich schön und gut, aber wie man sich sicherlich vorstellen kann wird ein solches Stylesheet welches alle Definitionen für alle Medientypen enthält schnell groß - und unübersichtlich. Um dem entgegen zu wirken gibt es noch eine alternative Einbindungsform für Stylesheets. Sie sieht der schon bekannten Form sehr ähnlich, was auch nicht weiter verwundert: Es ist lediglich ein Parameter mehr enthalten, und der ist in ähnlicher Form auch schon bekannt.

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

Wie man sieht ist lediglich der Parameter "media" hinzugekommen, man gibt also gleich beim einbinden des Stylesheets an für welchen Medientyp das Stylesheet gedacht ist. Dadurch entfallen dann auch wieder die <code>@media</code>-Angaben im Stylesheet selbst, man notiert diese also wieder so wie im ursprünglichen <code>style.css</code>.

Pro...

Wie man sieht bietet sich mit den Stylesheets eine attraktive und simple Methode zum kontrollieren des Seitenlayouts, und das nicht nur um eine druckfreundliche Version seiner Seite zur Verfügung zu stellen. Auch um einer großen Anzahl von Seiten den selben Look zu verpassen sind Stylesheets geradezu ideal, schließlich ist genau das der Zweck für den sie entwickelt wurden. Alles in allem bieten Stylesheets aber vor allem eins: Eine wirkliche Erleichterung der Arbeit.

...und contra

Aber leider ist auch im wunderbaren Stylesheet-Land nicht alles perfekt. Die aktuellen Browser (Internet Explorer 5+, Opera 5+, Netscape 6, Mozilla) bieten zwar alle eine gute Unterstützung für Stylesheets, nur einer fällt aus dem Rahmen: Netscape 4.x. Dieser Browser liefert kaum Unterstützung für Stylesheets, wird aber leider immer noch in größerem Rahmen verwendet. Wer noch viele Zugriffe auf seine Seite mit Netscape 4.x verzeichnet sollte sich bei der Verwendung von Stylesheets auf das Nötigste beschränken, so sind z.B. die hier besprochenen Medientypen Netscape 4.x völlig unbekannt.

Letzte Worte

Dieser Artikel nimmt nicht für sich in Anspruch eine komplette Einführung in die Welt von Stylesheets zu sein, dafür wäre einiges mehr an Text nötig. Der Autor hofft dennoch hiermit eine "kleine Einführung" geboten zu haben die Lust auf mehr erweckt hat. Anregungen & Dankeshymnen sind gerne gelesen, sogar Kritik ist erwüscht - die Adresse ist in allen Fällen robbes@digigeek.net.

Weiterführende Links