Jens Oliver Meiert

Druck-Stylesheets: Die absolute Grundlage

Artikel vom 9. April 2007. ISSN 1614-3124, #31.

Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development.

Es gibt keine Entschuldigung dafür, nicht wenigstens ein einfaches Druck-Stylesheet zu haben, und wenn man bereits mit Webstandards jongliert, ist die ganze Geschichte mehr als trivial. Hintergrund ist, dass vernünftiges Drucken immer möglich sein sollte, dass man es also tunlichst vermeiden sollte, Benutzer dazu zu zwingen, Stylesheets zu deaktivieren, Druckvorschauen zu öffnen und Seiten auszuwählen, die gedruckt werden sollen, um schließlich auch mal drucken zu können.

Auf geht’s – eins der allereinfachsten Druck-Stylesheets überhaupt basiert auf der folgenden, simplen Regel:

@media screen, projection {
}

… vorausgesetzt, dass man Dokumentstruktur und Darstellung nicht vermischt, nur ein einziges Stylesheet verwendet (großer Vorteil, gerne nochmal) und Medientypen nicht an die Stylesheet-Referenz im HTML knebelt. Ist dies gegeben, resultiert die obige Regel in einer unformatierten Seite, auf der User-Agent-Stylesheets alle Arbeit schon fast alleine verrichten.

Im nächsten Schritt folgt in der Regel »echte« Optimierung für den Druck. Möglicher- und beispielsweise möchte man sicherstellen, dass alles schwarz auf weiß ist, und zudem wünscht man vielleicht eine andere Schrift (da einige Systemschriften nicht allzu gut auf Papier funktionieren). Voilà:

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

}

(Aus dem meiert.com-Stylesheet abgeleitet und auf eigenen CSS-Code-Richtlinien basierend.)

Das sollte nicht schwer sein; man fügt einfach das obige Snippet in das entsprechende (via @media) screen-bezogene Stylesheet ein oder, falls nicht vermeidbar, entfernt die @media print {- und }-Teile und gebraucht die verbleibenden Regeln, um daraus ein separates Druck-Stylesheet zu erstellen.

À propos zusätzliche Druck-Stylesheets: Trotz mangelhafter Analyse liegt der Verdacht nahe, dass Browser Druck-Stylesheets beim Laden eines Dokuments mitladen, nicht erst zum Drucken selbst (was auch gar sinnvoll ist). Das bedeutet natürlich, dass sogar größere Druck-Stylesheets im entsprechenden »Haupt«-Stylesheet verbraten werden können, ohne die Ladezeit zu vergrößern. Ganz im Gegenteil: Ein einzelnes Stylesheet spart eine oder vielleicht mehrere zusätzliche Server-Anfragen, so dass dieses Vorgehen vielmehr effizienter ist. Bei kleinen Druck-Regeln wie den genannten sollte offensichtlich sein, dass der Gebrauch eines einzigen Stylesheets zumindest in dieser Hinsicht vorteilhafter ist.

Lassen wir aber diesen kleinen Exkurs beiseite: Benutzer profitieren auf Papier nicht wirklich von Navigationslisten, Fußbereichen oder ähnlichen Dingen. So können diese getrost entfernt werden:

@media print {

  #nav,
  #about {
    display: none;
  }

}

(Wahrscheinlich müssen die aufgeführten Selektoren angepasst werden, um individuelle Bedürfnisse zu befriedigen.)

Dies alles miteinander kombiniert stellt – sofern nicht noch Internet Explorer 5 oder JAWS vor Version 7.1 bekocht werden – eine der elegantesten Lösungen für das eigentlich nur für Besucher betroffener Websites existierende »Ich kann dieses Dokument nicht drucken und flippe gleich aus, weil man eigentlich nur unterbinden müsste, dass diese CSS-Regeln auch für Druck gelten«-Problem dar.

@media screen, projection {

  /* Das Übliche. */

}

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

  #nav,
  #about {
    display: none;
  }

}

Über den Autor

Jens Oliver Meiert, Foto vom 23. Dezember 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Während er sich auch als Staatsbürger und Autor versteht, probiert er sich bislang noch als Künstler und Abenteurer. Hier auf meiert.com teilt (und verallgemeinert und übertreibt) er einige seiner Gedanken und Erfahrungen.

Wenn Sie eine Frage oder ein Anliegen zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → Druck-Stylesheets: Die absolute Grundlage

Stand: 9. April 2007.

»Keine Epidemie oder Krankheit oder Naturkatastrophe […] wird eine Person umbringen, die nicht sterben will