כיצד לחסום דף אינטרנט מהדפסה באמצעות CSS

click fraud protection

דפי אינטרנט נועדו לצפייה על גבי מסך. אמנם יש מגוון רחב של מכשירים אפשריים שניתן להשתמש בהם לצפייה באתר (מחשבים שולחניים, מחשבים ניידים, טאבלטים, טלפונים, לבישים, טלוויזיות וכו '.), כולם כוללים מסך כלשהו. יש דרך אחרת שמישהו יכול להציג את האתר שלך, דרך שאינה כוללת מסך. אנו מתייחסים לתדפיס פיזי של דפי האינטרנט שלך.

לפני שנים היית מגלה שאנשים שמדפיסים אתרים היו תרחיש די נפוץ. אנו זוכרים שנפגשנו עם לקוחות רבים שהיו חדשים באינטרנט והרגישו נוח יותר לעיין בדפים המודפסים של האתר. לאחר מכן הם נתנו לנו משוב ועריכה על פיסות הנייר האלה במקום להסתכל על המסך כדי לדון באתר. ככל שאנשים נעשו נוחים יותר עם המסכים בחייהם, וככל שהמסכים האלה התרבו פעמים רבות ראינו פחות ופחות אנשים מנסים להדפיס דפי אינטרנט על נייר, אך זה עדיין קורה לִקְרוֹת. ייתכן שתרצה לשקול תופעה זו כאשר אתה מתכנן את אתר האינטרנט שלך. האם אתה רוצה שאנשים ידפיסו את דפי האינטרנט שלך? אולי לא. אם זה המקרה, יש לך כמה אפשרויות.

כיצד לחסום דף אינטרנט מהדפסה באמצעות CSS

זה קל לשימוש CSS כדי למנוע מאנשים להדפיס את דפי האינטרנט שלך. אתה פשוט צריך ליצור גיליון סגנונות של שורה אחת בשם "print.css" הכולל את השורה הבאה של CSS.

instagram viewer
גוף {תצוגה: אין; }

סגנון אחד זה יהפוך את אלמנט ה"גוף "של הדפים שלך אליו לא מוצג ומכיוון שכל מה שבדפים שלך הוא ילד מרכיב הגוף, המשמעות היא שהדף / האתר כולו לא יוצג.

ברגע שיש לך את גיליון הסגנונות "print.css", היית טוען אותו לתוך שלך HTML כגיליון סגנונות הדפסה. כך היית עושה זאת - פשוט הוסף את השורה הבאה לאלמנט "head" בדפי ה- HTML שלך.


מידע זה אומר לדפדפן שאם דף אינטרנט זה מוגדר להדפסה, להשתמש בגליון סגנונות זה במקום בגליון הסגנון המוגדר כברירת מחדל בו הדפים משתמשים לתצוגה על המסך. כאשר הדפים עוברים לגיליון "print.css" זה, הסגנון שגורם לכך שהדף כולו לא יוצג ייכנס פנימה וכל מה שיודפס יהיה דף ריק.

חסום דף אחד בכל פעם

אם אינך צריך לחסום הרבה דפים באתר שלך, אתה יכול לחסום הדפסה על בסיס עמוד אחר דף עם הסגנונות הבאים מודבקים בראש ה- HTML שלך.


סגנון זה בדף יהיה בעל סגוליות גבוהה יותר מכל סגנונות שבתוכך גליונות סגנון חיצוניים, מה שאומר שדף זה לא היה מודפס כלל, בעוד שדפים אחרים ללא שורה זו עדיין יודפסו כרגיל.

קבל יותר פנסים עם הדפים החסומים שלך

מה אם אתה רוצה לחסום את ההדפסה, אבל לא רוצה שהלקוחות שלך יתסכלו? אם הם רואים הדפסת עמוד ריק, הם עלולים להתעצבן ולחשוב שהמדפסת או המחשב שלהם מקולקלים ולא מבינים שבאמת השבתת את ההדפסה!

כדי להימנע מתסכול מבקרים, תוכלו להתלהב ולהכניס הודעה שתוצג רק כאשר הקוראים מדפיסים את הדף - ומחליפים את התוכן האחר. לשם כך, בנה את דף האינטרנט הרגיל שלך, ובראש הדף, מיד אחרי תג התגית, שים:


וסגור את התג הזה אחרי שכל התוכן שלך כתוב, בתחתית העמוד:


ואז, לאחר שסגרת את חטיבת "noprint", לפתוח div אחר עם ההודעה שברצונך להציג בעת הדפסת המסמך:


דף זה מיועד לצפייה מקוונת וייתכן שלא יודפס. אנא עיין בדף זה בכתובת http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



כלול קישור למסמך CSS המודפס שלך בשם print.css:


ובמסמך זה כלול את הסגנונות הבאים:

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

לבסוף, בגיליון הסגנונות הסטנדרטי שלך (או ב- סגנון פנימי בראש המסמך שלך), כתוב:

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

זה יבטיח שהודעת ההדפסה תופיע רק בעמוד המודפס, ואילו דף האינטרנט מופיע רק בדף המקוון.

שקול את חוויית המשתמש

הדפסת דפי אינטרנט היא בדרך כלל חוויה גרועה מכיוון שהאתרים של ימינו לרוב אינם מתורגמים היטב לדף המודפס. אם אינך מעוניין ליצור גיליון סגנונות נפרד לחלוטין כדי להכתיב סגנונות הדפסה, תוכל לשקול להשתמש בצעדים ממאמר זה כדי "לכבות" הדפסה על דף. שים לב להשפעה שיש לכך על משתמשים המסתמכים על הדפסת אתרים (אולי בגלל שיש להם ראייה ירודה ומאבק בקריאת טקסט על המסך) וקבל החלטות שיעבדו עבור האתר שלך קהל.

מאמר מקורי מאת ג'ניפר קרינין. נערך על ידי ג'רמי ג'ירארד.

instagram story viewer