Druck-Stylesheets: Die absolute Grundlage

Artikel vom 9. April 2007. ISSN 1614-3124, #31. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development. Der Artikel wird durch Druck-Styling, die 3 Grundlagen ergänzt.

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 {
}

… 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 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 {

  /* Das Übliche. */

}

@media print {

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

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

  #nav,
  #about {
    display: none;
  }

}

Über mich

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.