Eine spezielle Druckversion einer Website zu erstellen, war bislang mit einigem technischen oder manuellen Aufwand verbunden. Entweder wurden Seiteninhalte per Script in ein druckerfreundliches Layout konvertiert oder der Webdesigner musste alle Seiten manuell doppelt anlegen. Mit Hilfe von Cascading Stylesheets ist es ohne viel Aufwand möglich, eine spezielle Version einer Webseite für den Ausdruck zu erstellen. Zunächst ändern wir ein paar grundlegende Eigenschaften der Website. Mit: <br />body { <br />background: white;<br />font-family: Times, „Times New Roman“, serif;<br />font-size: 12pt <br />}<br /><br /> legen wir einen weißen Hintergrund und eine druckfreundliche Schrift fest (wenn im Druck keine Serifen-Schriften verwendet werden sollen, können natürlich Arial, Helvetika oder eine andere serifenlose Schrift angegeben werden). Außerdem sollten für den Druck – im Gegensatz zur Bildschirmdarstellung – alle Schriftgrößen in Point angegeben werden. Komplexere Eigenschaften für den Druck werden (noch) nicht von Browsern unterstützt. CSS2 sieht zwar einige Eigenschaften vor, die speziell für die Ausgabe von Dokumenten auf Druckern geeignet sind (Seitenumbruch etc.). Wenn wir jedoch einen Blick auf die Unterstützung durch aktuelle Browser werfen, werden wir feststellen, dass diese Werte aktuell leider ziemlich nutzlos sind – fast alle diesbezüglichen Eigenschaften werden nur von neuen Opera-Browsern unterstützt. <br /><br />Navigation ausblenden<br /><br /> Auf jeden Fall kann die Navigation ausblendet werden, indem allen Bereichen der Navigation die Eigenschaft display: none zugewiesen wird. Auf einem Ausdruck kann man damit ohnehin nicht viel anfangen. <br /><br />Links mit URL anzeigen<br /><br /> Als nächstes formatieren wir die Links passend um. Die Web-typischen Unterstreichungen entfernen wir (Unterstreichungen werden von Typografen ohnehin nicht gern verwendet) und setzen stattdessen alle Links fett. Damit die Verweise auch im Ausdruck noch nützlich sind, wollen wir für alle Hyperlinks den kompletten URL angeben. Dazu nutzen wir das Pseudo-Element :after und die Eigenschaft content. (funktioniert nur in Mozilla-Browsern). <br /><br />body a:link, body a:visited {<br />font-weight: bold;<br />text-decoration: none;<br />}<br />body a:link:after, body a:visited:after {<br />content: " (" url(pfeil.gif) attr(href) ") ";<br />font-weight: normal;<br />font-size: 80%<br />}<br /><br /> Der erste Teil ist recht einfach: für die Linkformate :link und :visited wird die Unterstreichung deaktiviert und Fettdruck aktiviert. Das zweite Statement legt fest, dass nach einem Link ein Leerzeichen und eine öffnende Klammer angezeigt wird " (", dann ein kleiner Pfeil (url(pfeil.gif)) und der Wert des Attributes href, nämlich der URL des Links. Am Ende wird die Klammer wieder geschlossen. Der ganze eingefügte Text wird in einer etwas kleineren Schrift als der Link selbst und nicht fett angezeigt.
