Gömma delar av sidan vid utskrift med CSS

Idag ställdes jag inför en liten men delikat uppgift. På en webbsida där det finns en ”skriv ut” knapp så skall denna knapp gömmas då man skriver ut sidan. Efter en stunds funderande så hade jag en krånglig lösning i huvudet och bestämde mig för att googla efter en bättre lösning. Och som vanligt så har någon haft samma problem.

Det jag inte visste var att det i CSS-2 finns direktiv för hur man lägger till olika stilar (styles) för en sida beroende på vilket medium som används för att titta på den. Så man kan alltså enkelt ha olika stilar för en bunt olika mediatyper. Läs mer om CSS och mediatyper. I mitt fall så var det print-mediatypen den som löste problemet.

Enkelt exempel nedan:

<HTML>
<HEAD>
<STYLE type=”text/css”>

@media print {
.printOnly {display:block;}
.screenOnly {display:none;}
}

@media screen {
.screenOnly {display:block;}
.printOnly {display:none;}
}
</STYLE>
</HEAD>
<BODY>
Sidans innehåll som visas på både skärm samt då sidan skrivs ut
<div class=”screenOnly”>På skärmen enbart, ||min-knapp||</div>
<div class=”printOnly”>På utskriften enbart</div>
</BODY>
</HTML>

2 reaktioner till “Gömma delar av sidan vid utskrift med CSS”

  1. Hejsan Marcus!
    Jag läste ditt inlägg om CSS och utskrift. Jag jobbar nu met ett problem som kanske du skulle kunna hjälpa mig med?

    Jag vill skapa en utskriftsvänlug sida. Jag har gjort en CSS mall för screen och en för media=print. Jag vill nu att den print mallen sk ha ett syggt sidhuvude och sidfoten med upplysningar ex kontakt adress etc i företagets typsnitt

    Vet du hur man gör? Mycket tacksam för svar!

    Jag spånar på en lösning att skapa lager som är hidden i CSS mallen skärm? och synlig i CSS mallen print, fast det ligger ju default någon typ av sidhuvud och fot som kommer ut per automatik med fult typsnitt…

    Annette

  2. Annette: Som jag uppfattar det så vill du få bort sidhuvudet och sidfoten som man får då man skriver ut sidor från webben. Dessa läggs till av webbläsaren och går inte att få bort genom att lägga in kod på webbsidan. Tyvärr!

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.