Kuinka estää verkkosivua tulostamasta CSS: llä

click fraud protection

verkkosivut on tarkoitettu katsottavaksi ruudulla. Vaikka sivuston katseluun voidaan käyttää monia erilaisia ​​laitteita (pöytätietokoneet, kannettavat tietokoneet, tabletit, puhelimet, puettavat tarvikkeet, televisiot jne.), ne kaikki sisältävät jonkinlaisen näytön. On toinen tapa, jolla joku voi tarkastella verkkosivustoasi, tavalla, joka ei sisällä näyttöä. Viittaamme verkkosivujen fyysiseen tulosteeseen.

Vuosia sitten huomaat, että verkkosivustoja tulostavat ihmiset olivat melko yleinen skenaario. Muistamme tapaamisemme monien asiakkaiden kanssa, jotka olivat uusia Internetissä ja tuntuivat mukavammilta tarkastellessaan sivuston painettuja sivuja. Sitten he antoivat meille palautetta ja muokkauksia noista papereista sen sijaan, että katsovat näyttöä keskustellakseen verkkosivustosta. Kun ihmiset ovat elämäänsä entistä mukavampia näytöillä, ja kun nämä näytöt ovat lisääntyneet monta kertaa olemme nähneet yhä vähemmän ihmisiä, jotka yrittävät tulostaa verkkosivuja paperille, mutta silti tapahtua. Voit harkita tätä ilmiötä suunnitellessasi verkkosivustoasi. Haluatko ihmisten tulostavan verkkosivusi? Ehkä et. Jos näin on, sinulla on joitain vaihtoehtoja.

instagram viewer

Kuinka estää verkkosivua tulostamasta CSS: llä

Sitä on helppo käyttää CSS estää ihmisiä tulostamasta verkkosivujasi. Sinun tarvitsee vain luoda yhden rivin tyylitaulukko nimeltä "print.css", joka sisältää seuraavan CSS-rivin.

body {display: none; }

Tämä yksi tyyli muuttaa sivusi "body" -elementin ei näytetä - ja koska kaikki sivuillasi on body-elementin alataso, tämä tarkoittaa, että koko sivua / sivustoa ei näytetä.

Kun sinulla on print.css-tyylitaulukko, ladat sen HTML tulostustyylitaulukkona. Näin tekisit sen - lisää vain seuraava rivi HTML-sivuidesi "head" -elementtiin.


Nämä tiedot kertovat selaimelle, että jos tämä verkkosivu on asetettu tulostettavaksi, käytä tätä tyylitaulukkoa minkä tahansa oletustyylitaulukon sijasta, jota sivut käyttävät ruudulla. Kun sivut siirtyvät tälle "print.css" -arkille, tyyli, joka tekee koko sivun näkymättömäksi, käynnistyy ja kaikki tulostettavat sivut ovat tyhjiä.

Estä yksi sivu kerrallaan

Jos sinun ei tarvitse estää paljon sivuja sivustollasi, voit estää tulostamisen sivu kerrallaan liittämällä seuraavat tyylit HTML-koodisi päähän.


Tällä sivun tyylillä olisi korkeampi spesifisyys kuin millä tahansa tyylilläsi ulkoiset tyylisivut, mikä tarkoittaa, että sivu ei tulostu lainkaan, kun taas muut sivut ilman tätä riviä tulostuvat edelleen normaalisti.

Hanki harrastaja estettyjen sivujen kanssa

Entä jos haluat estää tulostuksen, mutta et halua asiakkaidesi turhautuvan? Jos he näkevät tyhjän sivun tulostamisen, he saattavat järkyttyä ja ajatella, että heidän tulostimensa tai tietokoneensa on rikki, eikä tajua, että olet käytännössä poistanut tulostamisen käytöstä!

Vierailijoiden turhautumisen välttämiseksi voit saada pienen harrastajan ja laittaa viestin, joka näkyy vain, kun lukijasi tulostavat sivun - korvaamalla muun sisällön. Voit tehdä tämän rakentamalla normaalin verkkosivusi ja laittamalla sivun yläosaan heti body-tagin jälkeen:


Ja sulje tämä tunniste, kun kaikki sisältösi on kirjoitettu, sivun alaosaan:


Sitten, kun olet sulkenut "ei-tulostaa" divin, avaa toinen div viestin kanssa, jonka haluat näyttää, kun asiakirja tulostetaan:


Tämä sivu on tarkoitettu katsottavaksi verkossa, eikä sitä saa tulostaa. Katso tämä sivu osoitteessa http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm



Liitä linkki tulostettuun CSS-asiakirjaan nimeltä print.css:


Ja siinä asiakirjassa on seuraavat tyylit:

#noprint {display: ei mitään; }
#print {display: block; }

Lopuksi tavallisessa tyylitaulukossa (tai sisäinen tyyli kirjoita:

#print {näyttö: ei mitään; }
#noprint {display: block; }

Tämä varmistaa, että tulostusviesti näkyy vain tulostetulla sivulla, kun taas verkkosivu näkyy vain online-sivulla.

Harkitse käyttäjäkokemusta

Verkkosivujen tulostaminen on yleensä huono kokemus, koska nykypäivän sivustot eivät usein käänny hyvin tulostetulle sivulle. Jos et halua luoda täysin erillistä tyylitaulukkoa tulostustyylien sanelemiseksi, voit harkita tämän artikkelin ohjeiden avulla sivun tulostamisen "sammuttamista". Ole tietoinen vaikutuksista, joita tällä voi olla käyttäjille, jotka luottavat verkkosivustojen tulostamiseen (ehkä siksi, että heillä on) huono visio ja taistelu lukemalla ruudun tekstiä) ja tee päätöksiä, jotka toimivat sivustollesi yleisö.

Alkuperäinen artikkeli Jennifer Krynin. Toimittaja Jeremy Girard.

instagram story viewer