Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout

[update 2012]Kunden wollen den Inhalt ausdrucken und den lesbar. Biete dies mit einer print.css. Auch ausgedruckt noch eine gute Figur machen und dem Inhalt den meisten Platz einräumen.

in

Print.css Drucklayout header
Print.css Drucklayout header Chrome

Drucken und PC sind siamesische Zwillinge. So lernt jeder PC Neuling relativ rasch, dass sich oben Links beim Browser unter dem Wort “Datei” die Druckmöglichkeit versteckt, wenn er das Druckersymbol nicht findet.
Viele nutzen diese Druckfunktion auch, um sich eine .pdf Version des Artikels zu holen und später zu lesen. Wie auch immer, es gibt wunderbare Möglichkeiten diesen Ausdruck zum Erlebnis zu machen.

Sie finden hier zuerst ganz kurz Grundsätzliches, danach:

Wieso heißt die Drucklayout Datei “Print.css”

Einfach damit man als WebDesigner, Webmaster den Durchblick bei all den verschiedenen CSS Dateien nicht verliert. ;) So er nicht Media Queries nutzt.

Man kann sie auch drucklayout.css oder hastenichtgesehen.css nennen, wobei letzteres kaum Widererkennungswert hat…

Wie wirkt diese Print.css

Links oben ist bei 99,999999% aller Browser die Angabe: Datei==>Drucken. [File=>print] Oder der Browser bietet bereits ein Druckersymbol an. Und genau diesen Ausdruck gestaltet eine print.css.

Wie kann ich dem Browser ein Drucklayout mitteilen

1.eine print.css erstellen.

Im HTML header also zw. <head> und </head> wird diese Datei verlinkt.

<link rel="stylesheet"
   type="text/css"
   media="print"
   href="... /print.css" />

Hier ist die Angabe media= print wichtig. Sie schicken nun mindestens zwei CSS Dateien zum Browser. Die print.css und die CSS Datei für das Layout.
Das sind zwei sogenannte HTTP Requests. Jeder http Request kostet Zeit, daher wäre aus Performance Gründen eine einzige style.css geschickter.

2. innerhalb der normalen style.css mit @media print

Mit Media Queries kann man seit CSS2 auch die Angaben für das Drucklayout in die normale style.css geben. Somit ersparen sie sich die print.css und dem Browser zwei http Requests. Ihre Seite wird ein bisschen schneller aufgebaut.

Aus Übersichtsgründen ist es sinnvoll diese Print-Angaben ganz am Ende der style.css zu machen.

 
@media print {
alle Angaben die man braucht....  
 
}

Wichtig: Nutzen sie @media print müssen Sie die Layout CSS folgendermaßen im html Header verlinken:

<link rel="stylesheet" 
href=".../style.css" 
type="text/css" 
media="all" />

Achten Sie auf das media=all, sonst nimmt der Browser unter Umständen das Drucklayout für ihre gesamte Seite.

Aufbau der print.css //@media print

1. Alles entfernen was Sie nicht im Drucklayout sehen möchten.

Die Navigation, die Sidebar, den Header, das Suchfeld, die Brotkrummennavigation, die SocialIcons,
alle Formulare, die “weiterblättern” Navigation usw. – einfach alles auflisten was weg soll.

display none wird in der print.css sehr wichtig.

 
@media print {
#access,#secondary,#headersearch,#breadcrumb,#respond,#site-description,.site-logo,
.article-meta,.entry-meta,.more-link,.edit-link,.commavatar,.plusone,.tweetthis,.author-profile,.info,.wp_page_numbers{display:none;}
}

2. Den Inhalt breit genug machen.

Alle Klassen oder IDs, die die Inhaltsbreite beeinflussen zurücksetzen. Und auch floats auflösen. Wer ein Grid-System nutzt muss aufpassen welche CSS Klassen des Grids ebenfalls zurückgesetzt werden müssen.
zB. so:

#content,#page {
width: 100%; 
margin: 0; 
float: none;}

3. Hintergrundbilder, Farbe und Schriftgrößen definieren

html, body{
background-image:none!important;}
body {
font: 11pt/160% Verdana, Arial, sans-serif;
color:#293235;
background-color:white!important;}

Mit @fontface sind auch eigene Schriften möglich, doch nicht jeder Browser nutzt diese für das Drucklayout.

4. Links gestalten

a:link, a:visited {
text-decoration:none; 
color:#364593;}

Wer mag, kann Links als Text anzeigen lassen:

 a:link:after,
	 a:visited:after {
   	content: " ("attr(href)")";
   	font-size: 90%;}
 
 a[href^="/"]:after {
  content: "(http://www.webdesign-in.de" attr(href)")"; }

5. Inhalt nur für das Drucklayout zur Verfügung stellen.

Entweder eine nette Botschaft am Ende des Ausdrucks, oder als Alternative für das Headerbild. Dazu nutzt man die Pseudoklasse :after.

.headerbild:after{
content:"bereitgestellt von: www.WebDesign-in.de"; 
und weitere Angaben, wie sonst auch...
}

Browser und das Drucklayout

Kaum ein Browser druckt gleich aus. Es ist sinnlos zu versuchen, dass das Drucklayout in allen Browsern gleich aussieht. Doch ist es ratsam diese Printausgabe in so vielen wie möglichen Browsern zu testen, um den bestmöglichen Kompromiss zu finden.

Hier ein großer Screenshot, der den Unterschied zw. Firefox und Chrome aufzeigt. Firefox nimmt nicht die schöne Schrift, zeigt eine andere Dokumentkopfzeile als Chrome an.

so druckt Firefox und so Chrome
so druckt Firefox und so Chrome

Bildbeispiele – ich suchte

Ich sah mir diverse online Zeitschriften an, weil ich dachte wer eine Printausgabe seiner Zeitschrift anbietet, wird dies wohl auch bei der Webseite machen. Entweder suchte ich falsch oder es gibt wirklich sowenige. Derstandard.at bietet jedoch ein wunderbares Printlayout an.

Print.css Beispiel von derstandard.at
Print.css Beispiel von derstandard.at

Fazit:

mit wenig Aufwand haben Sie ein Drucklayout, eine print.css //@media print Angaben erstellt. Drucklayout anzubieten ist für mich ein Akt der Höflichkeit, der “user experience” und deshalb betrachte ich dies auch als einen Schritt mehr zu einem barrierefreiem WebDesign.
Die Angabe @media print in der normalen Style.css erspart einen http Request gegenüber einen eigenen print.css.

Niemand braucht Werbung in einem Ausdruck, er kann sie sowieso nicht anklicken. Animierte Gifs sind nett, aber im Druck sinnlos.
“Weiterlesen” Links, Weiterblättern Links, Formulare alles unnötiger Ballast in einem Drucklayout. Ob print.css oder media query, verwöhnen Sie ihre Leser und …

probieren Sie es einfach aus :-)

Andere zum Thema:Print.css und Datei drucken:

Übesetzungen

Ganz herzlichen Dank an Bohdan Zograf, der diesen Artikel in Belorussian übersetzte. Designcontest.

für mich die Artikelhistorie

Erstfassung:09.10.05
geändert am 12. Juni 2007
geändert am 14.04.2011 Übersetzung hinzugefügt.
Komplett neu am 5.10.2012

mts

12 Kommentare zu “Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout”

  1. Max

    Hallo,

    hab lang nicht mehr hier gelesen.

    ich sehe du hast ein neues design. es sieht sehr schön aus und freundlicher als das alte.

    Aber:
    “6. Ihr Produkt in den Mittelpunkt stellen.”
    Sollte man nicht den Kunden in den Mittelpunk stellen? Web 2.0 mäßig?

    gruß Max

  2. chio

    Herrje, das auch noch:
    Da hat man endlich eine Site runtergebogen, der Kunde ist zufrieden und zahlt brav – und dann noch an die print.css denken…? ;-)
    Naja, wirklich viel Aufwand ist es nicht und sollte eigentlich Standard sein. Danke für die wirklich guten Tipps zu diesem etwas unterbelichteten Thema.

  3. mts

    Hi Max

    wenn jemand was ausdruckt, weil er das lesen mag, weils ihm wichtig ist, daher ist es doch mehr als sinnvoll, dann das Produkt in den Mittelpunkt zu stellen und keineswegs die Navi;)

    chio
    yepp
    “wir” WebDesigner tun doch sogar alles, um die Seiten der Kunden richtig zu verlinken :zwinker:

    lg

  4. Mateusz

    Ich bin froh das unser CMS dieses für uns übernimmt :)
    Wenn ich überlege, ich müsste das in den einzelnen Beiträgen einfügen.
    Eins muss ich hier aber noch los werden, gedruckte Sachen lesen sich auf jeden Fall besser als am Monitor.
    Mateusz 100onlinedruckereien

  5. mts

    Mateusz
    ich mache das auch nicht für jeden einzelnen Artikel versuch es einmal hier ;)

    das ist eine Datei die für die ganze Website arbeitet

    lg

  6. agy

    Danke für diesen Artikel, genau das hab ich gesucht, weil ich das für mich umsetzen wollte!

  7. Terbeck

    Wow, vielen Dank für die gute Zusammenfassung. Sehr übersichtlich.
    Ich frage mich, ob auch ältere Browser beim Drucken von selbst auf die CSS-Datei zurückgreifen.

  8. Pingback: Seiten drucken: div-Bereiche EINschlie

  9. Artur

    Vielen Dank für die Mühe! Habs gut gebrauchen können. Übrigens, sehr schönes Screendesign…bist Du die Dame mit dem Hut?
    Gruß
    Artur

  11. Rocki

    Richtig schöner Artikel, danke für die gute Erklärung. Top Seite. :)

  12. Pingback: Alltägliche Sache: Eigenes CSS für den Drucker » sl leinhos – CakePHP Dokus