Einfache Druckausgabe per CSS

Wenn Sie nicht extra aufwändige Druckvorlagen für Ihre Webseiten erstellen möchten, dann hilft Ihnen sicher folgendes kurze Skript. Sie erweitern damit bequem Ihr CSS um ein eigenes Layout zur Druckausgabe. Zudem können Sie einige Container und Seitenelemente ausblenden bzw. anders anordnen:

@media screen, projection {
  /* Hier stehen die Klassen und IDs
     zur Bildschirmausgabe */
  body {
     background-color: darkgrey;
     color: black; 
     font-weight: normal;
     font-family: Verdana, sans-serif;
     margin: 10 auto 0 20;
     padding: 0; 
  }
  ...
}

@media print {
    * { background: black; color: white; }
    html { 
        background: black; 
        color: white;
        font: 100%/1.5 georgia, serif; 
    }
    .navi, .hidden { display:none; }
    a:after, a:link:after, a:visited:after {
        color: black;
        background-color:transparent; 
        content: " >> Verweis: " attr(href) " << ";
     }
}

Anstatt .navi tragen Ihre eigenen CSS-Klassen bzw. IDs ein, um sie bei der Druckausgabe zu unterdrücken.

Das A-Tag wird durch das AFTER-Attribut um den jeweiligen Verweis erweitert. Dies funktioniert jedoch nur beim Mozilla und Safari.

Siehe auch

• Druck-Stylesheets-Grundlagen (meiert.com)
• Print-CSS (intensivstation.ch)