Geek Rants: Warum verwenden so viele Websites keine Druck-Stylesheets?

Inhaltsverzeichnis:

Was sind Print Stylesheets?
Beispiele für Fehler beim Drucken eines Stylesheets
Zum Glück verwenden einige Sites sie

Geek Rants: Warum verwenden so viele Websites keine Druck-Stylesheets? - Blog 2023

Es überrascht mich immer wieder, dass die Menschen auf einer Webseite nach einem Link oder einer Schaltfläche mit der Aufschrift „Drucken“suchen müssen, vor allem wenn man bedenkt, dass es eine Wundertechnologie gibt, die diesen Schritt überflüssig macht. Leider benutzt fast niemand es, obwohl es… 10 Jahre alt ist.

Es ist nicht nur dumm, einen zusätzlichen Schritt für das Drucken zu erfordern, sondern die Verwendung von Druck-Stylesheets würde Tinte für alle einsparen, die den druckbaren Link nicht verwenden. Und natürlich gibt es eine Menge Leute, die mit Print-to-PDF Artikel für später speichern, ohne Papier zu verschwenden.

Was sind Print Stylesheets?

Die meisten Websites implementieren ihre Druckfunktion, indem Sie auf eine andere Seite wechseln, die für Drucker unterschiedlich formatiert ist. Dies ist jedoch nicht unbedingt erforderlich. Jeder Browser implementiert eine einfache CSS-Technologie, die als Print Stylesheets bezeichnet wird. Dies ist nichts anderes als eine Datei, in der Elemente angegeben werden, die ausgeblendet werden sollen, wenn Ihr Browser die Seite druckt.

Für diejenigen, die nicht vertraut sind, bedeutet CSS "Cascading Style Sheets". Auf diese Weise kann Ihr Browser den HTML-Quellcode für eine Webseite so formatieren, wie er tatsächlich auf dem Bildschirm angezeigt wird. Alles, von Schriftarten, Farben, Rändern und sogar Hintergrundbildern, kann im Stylesheet angegeben werden.

Das Hinzufügen eines Druck-Stylesheets ist so einfach wie das Einfügen einer einzigen Zeile in den HTML-Code Ihrer Seite. Der media = print-Teil des Codes fordert den Browser auf, dieses Stylesheet nur beim Drucken zu verwenden.

Diese Datei sieht im Allgemeinen so aus:


#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }

Ja, es ist wirklich so einfach. Wie funktioniert das? Hier ist ein Beispiel für eine normale Webseite auf der linken Seite, in der alle Navigationselemente, das Logo und alle Anzeigen mit der zugehörigen ID deutlich sichtbar sind. Rechts befindet sich dieselbe Seite, auf die das Druck-Stylesheet angewendet wird. Dadurch werden alle diese Elemente ausgeblendet.

Natürlich möchten Sie lieber eine davon über die andere drucken, oder?

Beispiele für Fehler beim Drucken eines Stylesheets

Leider gibt es nur eine Menge riesiger Websites, die sich überhaupt nicht darum gekümmert haben. Sehen Sie sich an, was passiert, wenn Sie versuchen, von der New York Times aus zu drucken:

Einige Standorte, wie das Gawker-Netzwerk, sind sogar noch schlechter. Sie haben nicht nur keine druckbare Ansicht. Wenn Sie versuchen und drucken, ähnelt sie der Tintensuppe. Soweit wir das beurteilen können, gibt es keine Möglichkeit, von einer Gawker-Site aus zu drucken, ohne einen separaten Dienst wie Readability zu verwenden oder den Inhalt der Seite manuell hervorzuheben, was bei ihrem neuen Design fast unmöglich ist.

Es ist wirklich traurig. Bei den größten Websites kann die Implementierung dieser Funktion einfach nicht stören.

Zum Glück verwenden einige Sites sie

Hier ist ein Beispiel für eine ordnungsgemäß formatierte, druckbare Ansicht, ohne dass Sie einen Drucklink finden müssen. Die BBC News-Site formatiert die Artikel mit einem benutzerdefinierten Header sauber für den Druck. Sie enthalten Kommentare in der Druckansicht, aber es ist immer noch eine gute Arbeit.