So blockieren Sie das Drucken einer Webseite mit CSS

Webseiten sollen auf einem Bildschirm angezeigt werden. Es gibt zwar eine Vielzahl möglicher Geräte, die zum Anzeigen einer Site verwendet werden können (Desktops, Laptops, Tablets, Telefone, Wearables, Fernseher usw.), enthalten sie alle einen Bildschirm. Es gibt eine andere Möglichkeit, Ihre Website anzuzeigen, eine Möglichkeit, die keinen Bildschirm enthält. Wir beziehen uns auf einen physischen Ausdruck Ihrer Webseiten.

Vor Jahren stellte man fest, dass Leute, die Websites drucken, ein ziemlich übliches Szenario waren. Wir erinnern uns, dass wir viele Kunden getroffen haben, die neu im Internet waren und sich beim Durchsehen gedruckter Seiten der Website wohler fühlten. Sie gaben uns dann Feedback und bearbeiteten diese Papierstücke, anstatt auf den Bildschirm zu schauen, um die Website zu diskutieren. Da die Menschen mit den Bildschirmen in ihrem Leben vertrauter geworden sind und sich diese Bildschirme vervielfacht haben Viele Male haben wir immer weniger Leute gesehen, die versucht haben, Webseiten auf Papier zu drucken, aber es tut es immer noch geschehen. Sie sollten dieses Phänomen bei der Planung Ihrer Website berücksichtigen. Möchten Sie, dass die Leute Ihre Webseiten drucken? Vielleicht tust du es nicht. Wenn dies der Fall ist, haben Sie einige Möglichkeiten.

buy instagram followers

So blockieren Sie das Drucken einer Webseite mit CSS

Es ist einfach zu bedienen CSS um zu verhindern, dass Personen Ihre Webseiten drucken. Sie müssen lediglich ein einzeiliges Stylesheet namens "print.css" erstellen, das die folgende CSS-Zeile enthält.

Körper { Anzeige: keine; }

Dieser eine Stil verwandelt das "Body"-Element Ihrer Seiten in wird nicht angezeigt — und da alles auf Ihren Seiten ein untergeordnetes Element des body-Elements ist, bedeutet dies, dass nicht die gesamte Seite/Site angezeigt wird.

Sobald Sie Ihr "print.css"-Stylesheet haben, laden Sie es in Ihr HTML als Druck-Stylesheet. So machen Sie das – fügen Sie einfach die folgende Zeile zum "head"-Element in Ihren HTML-Seiten hinzu.


Diese Informationen teilen dem Browser mit, dass, wenn diese Webseite zum Drucken eingestellt ist, dieses Stylesheet anstelle des Standard-Stylesheets verwendet werden soll, das die Seiten für die Bildschirmanzeige verwenden. Wenn die Seiten zu diesem "print.css"-Blatt wechseln, tritt der Stil ein, der die gesamte Seite nicht anzeigt, und alles, was gedruckt wird, wäre eine leere Seite.

Eine Seite nach der anderen blockieren

Wenn Sie nicht viele Seiten auf Ihrer Site blockieren müssen, können Sie den Druck Seite für Seite blockieren, indem Sie die folgenden Stile in den Kopf Ihres HTML-Codes einfügen.


Dieser In-Page-Stil hätte eine höhere Spezifität als alle Stile in Ihrem externe Stylesheets, was bedeutet, dass die Seite überhaupt nicht gedruckt wird, während andere Seiten ohne diese Zeile immer noch normal gedruckt werden.

Werden Sie schicker mit Ihren blockierten Seiten Page

Was ist, wenn Sie das Drucken blockieren möchten, aber Ihre Kunden nicht frustrieren möchten? Wenn sie eine leere Seite drucken sehen, werden sie möglicherweise verärgert und denken, dass ihr Drucker oder Computer defekt ist und nicht bemerken, dass Sie das Drucken im Wesentlichen deaktiviert haben!

Um Frustration bei den Besuchern zu vermeiden, können Sie etwas schicker werden und eine Nachricht einfügen, die nur angezeigt wird, wenn Ihre Leser die Seite drucken – und den anderen Inhalt ersetzen. Erstellen Sie dazu Ihre Standard-Webseite und geben Sie oben auf der Seite direkt nach dem body-Tag Folgendes ein:


Und schließen Sie dieses Tag, nachdem alle Ihre Inhalte geschrieben wurden, ganz unten auf der Seite:


Nachdem Sie das div "noprint" geschlossen haben, öffne ein anderes div mit der Nachricht, die Sie beim Drucken des Dokuments anzeigen möchten:


Diese Seite ist für die Online-Anzeige gedacht und darf nicht ausgedruckt werden. Bitte sehen Sie sich diese Seite unter an http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



Fügen Sie einen Link zu Ihrem Druck-CSS-Dokument namens print.css ein:


Fügen Sie in diesem Dokument die folgenden Stile hinzu:

#noprint { Anzeige: keine; }
#print { Anzeige: Block; }

Schließlich in Ihrem Standard-Stylesheet (oder in einem interner Stil in Ihrem Dokumentenkopf), schreiben Sie:

#print { Anzeige: keine; }
#noprint { Anzeige: Block; }

Dadurch wird sichergestellt, dass die Drucknachricht nur auf der gedruckten Seite erscheint, während die Webseite nur auf der Online-Seite erscheint.

Betrachten Sie die Benutzererfahrung

Drucken von Webseiten ist im Allgemeinen eine schlechte Erfahrung, da die heutigen Websites oft nicht gut auf die gedruckte Seite übersetzen. Wenn Sie kein völlig separates Stylesheet erstellen möchten, um Druckstile zu diktieren, können Sie die Schritte in diesem Artikel zum "Deaktivieren" des Druckens auf einer Seite verwenden. Seien Sie sich der Auswirkungen bewusst, die dies auf Benutzer haben könnte, die auf das Drucken von Websites angewiesen sind (vielleicht weil sie Sehschwäche und Probleme beim Lesen von Bildschirmtext) und treffen Sie Entscheidungen, die für Ihre Website funktionieren Publikum.

Originalartikel von Jennifer Krynin. Herausgegeben von Jeremy Girard.

instagram story viewer