Hogyan lehet blokkolni egy weboldal nyomtatását CSS-sel

weboldalak a képernyőn való megtekintésre szánják. Míg a webhely megtekintésére sokféle eszköz használható (asztali számítógépek, laptopok, táblagépek, telefonok, hordható eszközök, tévék, stb.), mindegyik tartalmaz valamilyen képernyőt. Van egy másik módja annak, hogy valaki megtekintheti az Ön webhelyét, amely nem tartalmaz képernyőt. Az Ön weboldalainak fizikai kinyomtatására hivatkozunk.

Évekkel ezelőtt azt tapasztalta, hogy a weboldalakat nyomtatók meglehetősen általános forgatókönyvnek számítanak. Emlékszünk arra, hogy sok olyan ügyféllel találkoztunk, akik újak a weben, és kényelmesebbnek érezték magukat a webhely nyomtatott oldalainak áttekintésében. Ezután visszajelzéseket és szerkesztéseket adtak nekünk ezekről a papírdarabokról, ahelyett, hogy a képernyőt nézték volna a weboldal megbeszélésére. Ahogy az emberek életük során kényelmesebbé váltak a képernyők, és ahogy ezek a képernyők megsokszorozódtak sokszor egyre kevesebb embert láttunk weblapokat papírra nyomtatni, de mégis így van történik. Érdemes fontolóra venni ezt a jelenséget, amikor megtervezi webhelyét. Szeretné, hogy az emberek kinyomtassák az Ön weblapjait? Talán nem. Ebben az esetben van néhány lehetősége.

instagram viewer

Hogyan lehet blokkolni egy weboldal nyomtatását CSS-sel

Könnyen használható CSS hogy megakadályozzák az embereket a weblapok nyomtatásában. Egyszerűen létre kell hoznia egy "print.css" nevű stílusstílust, amely tartalmazza a CSS következő sorát.

body {display: none; }

Ez az egy stílus az oldalai "body" elemévé változtatja nem jelenik meg - és mivel az oldalain minden a törzs elem gyermeke, ez azt jelenti, hogy a teljes oldal / webhely nem jelenik meg.

Ha megvan a "print.css" stíluslap, betölti azt a HTML mint nyomtatási stíluslap. Így tenné ezt: csak adja hozzá a következő sort a HTML-oldalak "head" eleméhez.


Ez az információ azt mondja a böngészőnek, hogy ha ez a weboldal nyomtatásra van állítva, akkor ezt a stíluslapot használja az alapértelmezett stíluslap helyett, amelyet az oldalak a képernyőn megjelenítenek. Amint az oldalak erre a "print.css" lapra váltanak, beindul az a stílus, amely miatt az egész oldal nem jelenik meg, és csak egy üres oldal lesz kinyomtatva.

Egy oldal blokkolása egyszerre

Ha nem kell sok oldalt blokkolnia a webhelyén, akkor blokkolhatja a nyomtatást oldalanként, a következő stílusokat beillesztve a HTML fejébe.


Ennek az oldalon belüli stílusnak nagyobb a specifikussága, mint bármelyik stíluson belül külső stíluslapok, ami azt jelenti, hogy az oldal egyáltalán nem nyomtatna, míg a többi oldal e sor nélkül továbbra is normálisan nyomtatna.

Legyél kedvesebb a letiltott oldalakkal

Mi van, ha le akarja tiltani a nyomtatást, de nem akarja, hogy ügyfelei csalódást szenvedjenek? Ha üres oldalt látnak nyomtatni, ideges lehet, és azt hiszi, hogy a nyomtatójuk vagy számítógépük elromlott, és nem veszik észre, hogy Ön lényegében letiltotta a nyomtatást!

A látogatók csalódásának elkerülése érdekében szerezhet egy kis kedvelőt, és beírhat egy üzenetet, amely csak akkor jelenik meg, amikor olvasói kinyomtatják az oldalt - kicserélve a másik tartalmat. Ehhez készítse el a szokásos weblapot, és az oldal tetejére, közvetlenül a törzscímke után írja be:


És zárja be ezt a címkét az összes tartalom megírása után, az oldal alján:


Aztán miután bezárta a "noprint" div-ot, nyiss egy másik div a dokumentum nyomtatásakor megjeleníteni kívánt üzenettel:


Ezt az oldalt online megtekintésre szánják, és nem nyomtatható ki. Kérjük, tekintse meg ezt az oldalt itt: http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



Csatoljon egy linket a print.css nevű nyomtatott CSS-dokumentumához:


Ebben a dokumentumban pedig a következő stílusokat kell tartalmaznia:

#noprint {display: nincs; }
#print {display: block; }

Végül a szokásos stíluslapban (vagy egy belső stílus a dokumentum fejében), írja:

#print {display: none; }
#noprint {display: block; }

Ez biztosítja, hogy a nyomtatott üzenet csak a kinyomtatott oldalon, míg a weboldal csak az online oldalon jelenik meg.

Vegye figyelembe a felhasználói élményt

Weblapok nyomtatása általában rossz tapasztalat, mivel a mai webhelyek gyakran nem fordítanak jól a nyomtatott oldalra. Ha nem szeretne teljesen külön stíluslapot létrehozni a nyomtatási stílusok diktálásához, akkor fontolja meg a cikkben található lépések használatát az "oldal nyomtatásának kikapcsolásához". Ne feledje, hogy ez milyen hatást gyakorolhat azokra a felhasználókra, akik támaszkodnak a weboldalak nyomtatására (talán azért, mert vannak) gyenge látás és küzdelem a képernyőn megjelenő szöveg olvasásával), és olyan döntéseket hozzon, amelyek az Ön webhelyének megfelelőek lesznek közönség.

Eredeti cikk: Jennifer Krynin. Szerk.: Jeremy Girard.

instagram story viewer