Skip to main content

Paano Mag-block ng isang Web Page Mula sa Pagpi-print Sa CSS

Week 9, continued (Mayo 2024)

Week 9, continued (Mayo 2024)
Anonim

Ang mga pahina ng web ay nilayon upang makita sa isang screen. Habang may iba't ibang uri ng posibleng mga aparato na maaaring magamit upang tingnan ang isang site (desktop, laptop, tablet, phone, wearables, telebisyon, atbp.), Lahat sila ay nagsasama ng isang screen ng ilang uri. May isa pang paraan na maaaring tingnan ng isang tao ang iyong website, isang paraan na hindi kasama ang isang screen. Tinutukoy namin ang isang pisikal na pag-print ng iyong mga web page.

Maraming taon na ang nakalilipas, makikita mo na ang mga website sa pag-print ng mga tao ay isang pangkaraniwang sitwasyon. Naaalala natin ang pagpupulong sa maraming kliyente na bago sa web at nadama ang mas komportableng pagsusuri sa mga naka-print na pahina ng site. Pagkatapos ay binigyan nila kami ng feedback at pag-edit sa mga piraso ng papel sa halip na tumitingin sa screen upang talakayin ang website. Habang ang mga tao ay naging mas komportable sa mga screen sa kanilang mga buhay, at habang ang mga screen ay may maraming beses na na-multiply, nakita namin ang mas kaunti at mas kaunting mga tao na nagsisikap na mag-print ng mga web page papunta sa papel, ngunit ito ay nangyayari pa rin. Baka gusto mong isaalang-alang ang kababalaghang ito kapag pinaplano mo ang iyong website. Nais mo bang i-print ng mga tao ang iyong mga web page? Siguro wala ka. Kung ganiyan ang kaso, mayroon kang ilang mga pagpipilian.

Paano Mag-block ng isang Web Page Mula sa Pagpi-print Sa CSS

Madaling gamitin ang CSS upang pigilan ang mga tao na i-print ang iyong mga web page. Kailangan mo lamang na lumikha ng isang 1 line stylesheet na pinangalanang "print.css" na kinabibilangan ng sumusunod na linya ng CSS.

katawan {display: none; }

Ang isang estilo na ito ay magpapasara sa elemento ng "katawan" ng iyong mga pahina upang hindi maipakita - at dahil ang lahat ng bagay sa iyong mga pahina ay isang anak ng elemento ng katawan, nangangahulugan ito na ang buong pahina / site ay hindi ipapakita.

Sa sandaling mayroon ka ng stylesheet na "print.css", nais mong i-load ito sa iyong HTML bilang isang print na stylesheet. Narito kung paano mo gagawin iyan - idagdag lamang ang sumusunod na linya sa elemento ng "ulo" sa iyong mga pahina ng HTML.

Ang impormasyong ito ay nagsasabi sa browser na kung ang web page na ito ay nakatakda na i-print, gamitin ang stylesheet na ito sa halip na anumang default na stylesheet na ginagamit ng mga pahina para sa display sa screen. Habang lumilipat ang mga pahina sa "print.css" na sheet na ito, ang estilo na gumagawa ng buong pahina na hindi ipinapakita ay kick in at ang lahat ng naka-print ay magiging isang blangkong pahina.

I-block ang Isang Pahina sa isang Oras

Kung hindi mo kailangang i-block ang maraming mga pahina sa iyong site, maaari mong i-block ang pag-print sa isang pahina ayon sa pahina na may mga sumusunod na mga estilo na nailagay sa ulo ng iyong HTML.

Ang estilo ng in-page na ito ay may mas mataas na pagtitiyak kaysa sa anumang mga estilo sa loob ng iyong mga panlabas na estilo ng sheet, na nangangahulugang ang pahina ay hindi i-print sa lahat, habang ang iba pang mga pahina na walang linya na ito ay normal pa rin na naka-print.

Kumuha ng Fancier Sa Iyong Mga Na-block na Pahina

Paano kung nais mong i-block ang pag-print, ngunit ayaw mo na ang iyong mga customer ay maging bigo? Kung nakakita sila ng isang blangko na pahina sa pagpi-print, maaari silang mabigat at isipin na ang kanilang printer o computer ay nasira at hindi napagtanto na mayroon kang ganap na pinigilan na pag-print!

Upang maiwasan ang pagkabigo ng bisita, maaari kang makakuha ng kaunting interes at ilagay sa isang mensahe na ipapakita lamang kapag na-print ng iyong mga mambabasa ang pahina - pinapalitan ang iba pang nilalaman. Upang gawin ito, buuin ang iyong karaniwang web page, at sa tuktok ng pahina, pagkatapos ng tag ng katawan, ilagay ang:

At isara ang tag na iyon pagkatapos na nakasulat ang lahat ng iyong nilalaman, sa pinakailalim ng pahina:

Pagkatapos, matapos mong isara ang "noprint" div, buksan ang isa pang div na may mensahe na nais mong ipakita kapag ang dokumento ay nakalimbag:

Ang pahinang ito ay inilaan upang makita online at maaaring hindi ma-print. Mangyaring tingnan ang pahinang ito sa http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Isama ang isang link sa iyong naka-print na dokumento ng CSS na may pangalang print.css:

At sa dokumentong iyon isama ang mga sumusunod na estilo:

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

Panghuli, sa iyong pamantayang stylesheet (o sa isang panloob na estilo sa iyong ulo ng dokumento), isulat ang:

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

Ito ay titiyak na ang print na mensahe ay lilitaw lamang sa naka-print na pahina, habang ang pahina ng web ay lilitaw lamang sa online na pahina.

Isaalang-alang ang Karanasan ng User

Ang pag-print ng mga web page sa pangkalahatan ay isang mahinang karanasan dahil ang mga site sa ngayon ay madalas na hindi nag-translate nang maayos sa naka-print na pahina. Kung hindi mo nais na lumikha ng isang ganap na hiwalay na sheet ng estilo upang magdikta ng mga estilo ng pag-print, maaari mong isaalang-alang ang paggamit ng mga hakbang mula sa artikulong ito upang "i-off" ang pag-print sa isang pahina. Alamin ang epekto nito sa mga gumagamit na umaasa sa mga website sa pag-print (marahil dahil mayroon silang mahinang pangitain at pakikibaka sa pagbabasa ng teksto sa screen) at gumawa ng mga desisyon na gagana para sa madla ng iyong site.

Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard.