كيفية منع طباعة صفحة ويب باستخدام CSS

click fraud protection

صفحات الانترنت من المفترض أن يتم عرضها على الشاشة. في حين أن هناك مجموعة متنوعة من الأجهزة الممكنة التي يمكن استخدامها لعرض موقع (أجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف والأجهزة القابلة للارتداء وأجهزة التلفزيون وما إلى ذلك.) ، كلهم ​​يشتملون على شاشة من نوع ما. هناك طريقة أخرى يمكن أن يشاهد بها شخص ما موقع الويب الخاص بك ، وهي طريقة لا تتضمن شاشة. نحن نشير إلى نسخة مطبوعة من صفحات الويب الخاصة بك.

قبل سنوات ، كان من الممكن أن تجد أن الأشخاص الذين يطبعون المواقع الإلكترونية كان سيناريو شائعًا جدًا. نتذكر الاجتماع مع العديد من العملاء الجدد على الويب وشعرنا براحة أكبر عند مراجعة الصفحات المطبوعة من الموقع. ثم قدموا لنا ملاحظات وتعديلات على تلك القطع من الورق بدلاً من النظر إلى الشاشة لمناقشة موقع الويب. حيث أصبح الناس أكثر راحة مع الشاشات في حياتهم ، وتضاعفت تلك الشاشات مرات عديدة ، رأينا عددًا أقل وأقل من الأشخاص يحاولون طباعة صفحات الويب على الورق ، لكنها لا تزال تفعل ذلك يحدث. قد ترغب في النظر في هذه الظاهرة عند التخطيط لموقع الويب الخاص بك. هل تريد من الناس طباعة صفحات الويب الخاصة بك؟ ربما لا تفعل ذلك. إذا كان الأمر كذلك ، فلديك بعض الخيارات.

instagram viewer

كيفية منع طباعة صفحة ويب باستخدام CSS

إنه سهل الاستخدام CSS لمنع الناس من طباعة صفحات الويب الخاصة بك. تحتاج ببساطة إلى إنشاء ورقة أنماط من سطر واحد باسم "print.css" تتضمن السطر التالي من CSS.

الجسم {display: none؛ }

سيؤدي هذا النمط إلى تحويل عنصر "النص الأساسي" لصفحاتك إلى لا يتم عرضها - وبما أن كل شيء على صفحاتك هو عنصر ثانوي لعنصر النص الأساسي ، فهذا يعني أنه لن يتم عرض الصفحة / الموقع بالكامل.

بمجرد حصولك على ورقة الأنماط "print.css" ، يمكنك تحميلها في ملف لغة البرمجة كصورة أنماط طباعة. إليك كيفية القيام بذلك - ما عليك سوى إضافة السطر التالي إلى عنصر "الرأس" في صفحات 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