Skip to content

Estä sivujesi tulostuminen CSS: n avulla

19 de maaliskuu de 2021

Verkkosivut on tarkoitettu katsottaviksi ruudulla. Vaikka sivuston katseluun voidaan käyttää monia erilaisia ​​laitteita (pöytätietokoneet, kannettavat tietokoneet, tabletit, puhelimet, puettavat tarvikkeet, televisiot jne.), Niissä kaikissa on jonkinlainen näyttö. 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 verkossa 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 ihmisistä on tullut mukavampia näytöt elämässään ja koska nämä näytöt ovat moninkertaistuneet monta kertaa, olemme nähneet yhä vähemmän ihmisiä, jotka yrittävät tulostaa verkkosivuja paperille, mutta niin tapahtuu silti. Voit harkita tätä ilmiötä suunnitellessasi verkkosivustoasi. Haluatko ihmisten tulostavan verkkosivusi? Ehkä et. Jos näin on, sinulla on joitain vaihtoehtoja.

Kuinka estää verkkosivun tulostaminen CSS: llä

CSS: n avulla on helppo estää verkkosivujasi tulostamasta. Sinun tarvitsee vain luoda yhden rivin tyylitaulukko nimeltä ”print.css”, joka sisältää seuraavan CSS-rivin.

body { display: none; }

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

Kun sinulla on print.css-tyylitaulukko, lataat sen HTML-koodiin tulostustyylitaulukkona. Näin tekisit sen – lisää vain seuraava rivi HTML-sivujen ”head” -elementtiin.

<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Nämä tiedot kertovat selaimelle, että jos tämä verkkosivu on asetettu tulostamaan, käytä tätä tyylitaulukkoa sen sijaan, mitä oletustyylitaulukkoa sivut käyttävät ruudulla. Kun sivut siirtyvät tälle ”print.css” -arkille, tyyli, joka saa koko sivun näyttämättä, 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.

<style type=”text/css”> @media print { body { display:none } } </style>

Tällä sivun tyylillä olisi korkeampi spesifisyys kuin millä tahansa tyylillä ulkoisissa tyylitaulukoissa, mikä tarkoittaa, että sivu ei tulostu lainkaan, kun taas muut sivut ilman tätä riviä tulisivat silti 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, eivätkä 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 tavallisen verkkosivusi ja laittamalla sivun yläosaan, heti body-tagin jälkeen, seuraavasti:

<div id=”noprint”>

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

</div>

Kun olet sulkenut ”noprint” div, avaa toinen div viestillä, jonka haluat näyttää, kun asiakirja tulostetaan:

<div id=”print”>
<p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm</p>
</div>

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

<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Ja siinä asiakirjassa on seuraavat tyylit:

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

Lopuksi kirjoita tavalliseen tyylitaulukkoon (tai sisäiseen tyyliin asiakirjapäässä):

#print { display: none; }
#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 sillä voi olla käyttäjille, jotka luottavat verkkosivustojen tulostamiseen (ehkä siksi, että heillä on huono visio ja heillä on vaikeuksia lukea ruudun tekstiä) ja tehdä päätöksiä, jotka toimivat sivustosi yleisön hyväksi.

Alkuperäinen artikkeli Jennifer Krynin. Toimittaja Jeremy Girard.