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.

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:

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

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

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