|
Ausdrucke einer Webseite mit CSS steuern |
 |
 |
|
Scripting-Tipps -
CSS
|
Auf vielen Webseiten werden Links angeboten, mit denen man sich eine spezielle Druckversion der Webseite anzeigen lassen kann. In dieser Druckversion einer Webseite werden meist Grafiken, Hintergrundbilder und ähnliche Dinge entfernt. Die Druckansicht beschränkt sich dabei oftmals auf eine reine Textanzeige der betreffenden Seite. Eine solche Durckvorschau zu pflegen, wenn sie denn nicht von einem CSS automatisch angefertigt wird, ist jedoch relativ aufwändig. Mit Hilfe von CSS brauchen Sie jedoch keine spezielle Druckversion einer Webseite anfertigen. CSS beherrscht gewisse Befehle, mit denen man eine Webseite für verschiedene Medien anders gestalten kann. Darunter fällt auch das Medium "Drucker". Die Vorteile dieser Variante liegen auf der Hand. Sie brauchen keine extra Druckversion der Webseite anfertigen und Ihre Besucher haben sich einen zusätzlichen Klick mehr gespart. Lauffähig ist das ganze in allen aktuellen Browsern.
Folgend nun einige Beispiele dafür, was Sie mit CSS so alles machen können.
Farben umstellen
Auf Papier macht sich eine bunte Webseite meist nicht besonders. Im Büro, oder auch oftmals zu Hause, werden viele Drucke automatisch generell in Schwarz-Weiß gedruckt, da farbige Tinte oder Toner um einiges teurer ist als schwarze. Daher ist es auch sinnvoll, für den Ausdruck zumindest Überschriften und Verweise zu anderen Webseiten schwarz zu gestalten.
Beispiel:
@media print {
h1 {
color: black;
}
a {
color: black;
text-decoration: underline;
}
}
Unnötige Seitenelemente verstecken
Navigationsmenüs, Werbebanner, etc. sind in der Regel nicht für den Druck bestimmt. Zumal bringt das auch nichts, da niemand auf dem Papier ein Banner anklicken oder ein Navigationsmenü benutzen kann. Das ist sind nur unnötige Druckkosten, die für den Ausdruck solcher Elemente entstehen. Diese lassen sich beim Ausdruck jedoch auch einfach entfernen. Für das folgende Beispiel haben muss dem Navigationsmenü der Webseite die Klasse "navigation" zugewiesen werden.
Beispiel:
@media print {
.navigation, .werbung {
display: none;
}
}
Unsichtbare Elemente im Druck sichtbar machen
Manchmal kann es sinnvoll sein, bestimmte Elemente auf einer Webseite nicht anzuzeigen, die im Druck aber doch erscheinen sollen. Beispielsweise ein kleiner Hinweis darauf, von welcher Webseite ein Artikel ausgedruckt wurde. Auch dies ist mit CSS möglich.
Beispiel:
<div class="druckausgabe">Dieser Artikel wurde veröffentlicht von: Webmasterparadies.de</div>
.druckausgabe {
display: none;
}
@media print {
.druckausgabe {
display: blockM
}
}
Erklärung:
Auf der Webseite selbst fügen wir den gewünschten Text an der gewünschten Stelle ein und belegen ihn mit einer div class. Diese wiederum wird in CSS so formatiert, dass sie normalerweise nicht angezeigt, im Druck aber dann doch dargestellt werden soll.
Links und Abkürzungen im Druck anzeigen
Bei einem Ausdruck einer Seite werden URLs in der Regel nicht mit ausgedruckt, wenn diese nicht in Klarform im Text geschrieben wurden. Um diese Informationen Ihren Besuchern dennoch zugänglich zu machen, können Sie mit Hilfe von CSS URLs und Abkürzungen doch sichtbar machen. Dazu werden diese Informationen einfach hinter dem Link oder der Abkürzung ausgeschrieben.
Beispiel für einen Link:
a:after {
content: " [" attr(href) "]";
}
Beispiel für eine Abkürzung:
a:after {
content: ' (' attr(title) ')';
}
Erklärung:
Mit diesen CSS-Befehlen wird hinter allen Links die URL noch einmal in eckigen Klammern ausgeschrieben. Bei definierten Abkürzungen passiert dies ebenso, nur eben in runden Klammern.
Tipp:
Um die Druck-Stylesheets zu testen müssen Sie noch nicht einmal eine Seite ausdrucken. Die Druckvorschau Ihres Webbrowsers erfüllt den gleichen Zweck. Das Ergebnis können Sie dann bequem am Monitor anschauen.
|