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

  /* Das Übliche. */

}

@media print {

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

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

  #nav,
  #about {
    display: none;
  }

}

Über mich

Jens Oliver Meiert, am 29. April 2020.

Ich bin Jens Oliver Meiert, und ich bin ein Webentwickler und Autor. Ich probiere gerne Dinge aus (manchmal auch in den Bereichen Philosophie, Kunst oder Abenteuer). Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn Sie eine Frage oder Anregung zu dem haben, was ich schreibe, senden Sie gerne eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Cover: Das kleine Buch der HTML-/CSS-Frameworks.

Mein vielleicht nützlichstes Buch: Das kleine Buch der HTML-/CSS-Frameworks (2015/2019). Warum? Weil sowohl der Einsatz als auch die Entwicklung von Frameworks bei den Bedürfnissen unserer Projekte anfängt – und nur wir diese Bedürfnisse kennen.

Auf dem Laufenden bleiben? Folgen Sie mir per Feed oder auf Twitter.

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

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

Stand: 9. April 2007

»Arbeit ist sichtbar gemachte Liebe