10Aug

Geek Rants: Warum verwenden so viele Websites keine Stylesheets?

click fraud protection

Es erstaunt mich immer wieder, dass die Leute nach einem Link oder einem Knopf suchen müssen, der "Drucken" auf einer Webseite anzeigt, besonders 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 benötigen, sondern die Verwendung von Druck-Stylesheets würde Tinte sparen für jeden, der den druckbaren Link nicht verwendet. Und natürlich gibt es viele Leute, die Print-to-PDF verwenden, um Artikel für später zu speichern, ohne Papier zu verschwenden.

Was sind Stylesheets?

Die meisten Websites implementieren ihre Druckfunktion, indem sie Sie auf eine andere Seite bringen, die für Drucker unterschiedlich formatiert ist - aber das ist wirklich nicht notwendig. Jeder Browser implementiert eine einfache CSS-Technologie, die als Druck-Stylesheets bezeichnet wird. Dies ist nichts anderes als eine Datei, die Elemente angibt, die ausgeblendet werden sollen, wenn der Browser die Seite druckt.

instagram viewer

Für diejenigen, die nicht vertraut sind, bedeutet CSS Cascading Style Sheets, und es ist wie Ihr Browser weiß, wie Sie den HTML-Quellcode für eine Webseite in das, was Sie tatsächlich auf dem Bildschirm sehen, formatieren. Alles aus Schriftarten, Farben, Rahmen und sogar Hintergrundbildern kann im Stylesheet angegeben werden.

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

& lt; link rel = "Stylesheet" href = "print.css" type = "text / css" media = "Drucken" & gt;

Diese Datei sieht im Allgemeinen so aus:

#Seitenleiste, #Footer, #Navigation, #SharingLinks, #Topad, #Kommentare{ Anzeige: keine}

Ja, so einfach ist das wirklich. Wie funktioniert es? Hier ist ein Beispiel für eine normale Webseite auf der linken Seite, wobei die Navigation, das Logo und die Anzeigen mit der zugeordneten ID deutlich sichtbar sind - und rechts die gleiche Seite mit dem angewendeten Druck-Stylesheet, die alle diese Elemente versteckt.

Offensichtlich würden Sie lieber eine von diesen über die andere drucken, oder?

Beispiele für das Drucken von Stylesheet-Fehlern

Leider gibt es nur sehr viele große Websites, die sich nicht darum gekümmert haben, dies zu implementieren. Werfen Sie einen Blick darauf, was passiert, wenn Sie versuchen, von der New York Times zu drucken:

Einige Websites, wie das Gawker-Netzwerk von Websites, sind noch schlimmer. Sie haben nicht nur eine druckbare Ansicht, wenn Sie versuchen und drucken, ähnelt es Tintensuppe. Soweit wir das beurteilen können, gibt es keine Möglichkeit, von einer Gawker-Website zu drucken, ohne einen separaten Dienst wie Lesbarkeit zu verwenden oder den Inhalt auf der Seite manuell hervorzuheben, was bei ihrem neuen Design fast unmöglich ist.

Es ist wirklich traurig. Viele der größten Websites scheuen es nicht, diese Funktion zu implementieren.

Glücklicherweise verwenden einige Sites sie

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

Es gibt einige andere Seiten, die das gleiche machen, wie ArsTechnica und. .. unsere Seite, aber es wäre albern, Screenshots von allen zu zeigen. In unserer Forschung sind die Websites, die sie richtig implementiert haben, sehr selten.

Um sich ein Bild zu machen. .. bitte nehmen Sie sich die 5 Minuten Zeit, um ein Druck-Stylesheet für Ihre Site zu erstellen!