Geek rants Warum können so viele Websites keine Druck-Stylesheets verwenden?
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 sparen für alle, 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 Ihre Seite. HTML-the media = print Teil des Codes weist den Browser an, 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 es? Hier ist ein Beispiel für eine normale Webseite auf der linken Seite, in der alle Navigationselemente, Logos und 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 eines davon über das 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 ist die Implementierung dieser Funktion völlig unproblematisch.
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 zwar Kommentare in der Druckansicht, aber es ist immer noch eine gute Aufgabe.
Es gibt einige andere Websites, die dasselbe tun, wie ArsTechnica und… unsere Website, aber es wäre dumm, Screenshots von allen zu zeigen. In unserer Forschung gibt es nur wenige Websites, die sie ordnungsgemäß implementiert haben.
Zum Abschluss… Nehmen Sie sich bitte 5 Minuten Zeit, um ein Druck-Stylesheet für Ihre Site zu implementieren!
