Forsiden » Design » Stylesheets til udskrift

Stylesheets til udskrift

Du kan lave ét stylesheet til visning på skærmen og et andet til udskrift på printer. Browseren vælger selv det rigtige stylesheet.

En moderne browser er i stand til at vælge forskellige stylesheets til forskellige formål.

Hvis du for eksempel har ét stylesheet, der formaterer dine websider til visning på en skærm, og et andet, der formaterer websiderne til udskrift, vil browseren, hvis du markerer dine stylesheets korrekt, automatisk vælge det korrekte stylesheet til den konkrete opgave, i dette tilfælde visning på skærm eller udskrift til printer.

Et eksempel på teknikken er denne side. Den omfatter forskellige elementer, som jeg mener, en læser godt kan undvære, hvis hun sender siden til printeren. Det gælder følgende elementer:

Jeg fjerner også baggrundsfarver og -grafik, så udskriftens baggrund ikke er afhængig af, om brugeren har indstillet sin browsers udskriftsfunktion korrekt.

Ved hjælp af et lille trick, som sparer dig for papir og printerblæk, kan du se siden i "printervenlig" udgave her: Printervenlig udgave. Du skal bruge browserens tilbage-knap for at komme tilbage til den "rigtige" side.

De nyeste browsere har alle en "Vis udskrift"-funktion i Filer-menuen. og den kan du selvfølgelig også ruge til at vise, hvorledes denne side ser ud i udskrift.

Læg vel mærke til, at alt dette er opnået med den selvsamme webside. Bogstav for bogstav, komma for komma, punkt for punktum er det den samme side, der er tale om. Altså ikke længere bøvlet med at lave særlige sider til udskrift.

Media typer

Denne teknik beror på begrebet "Media typer". Til denne webside er der knyttet to stylesheets:

<style type="text/css" media="screen">
@import url([sti]res/style/style101.css);
</style>
<link rel="stylesheet" media="print" 
type="text/css" 
href="[sti]res/style/printstyle101.css"> 

Browseren vælger automatisk det importerede stylesheet til visning på skærmen, og vælger automatisk det linkede stylesheet til udskriften.

Link eller @import?

Bemærk, at du kan linke til begge eller importere begge, som du lyster. Til visning på skærm bruger jeg dog altid importerede styles, fordi det sikrer, at Netscape 4 og visse andre ældre browsere og browsertyper ikke læser stylesheet'et. Det er er fordel, som det er forklaret en passant i artiklen Se mor, uden tabeller!

Jeg har siden jeg oprindeligt skrev denne artikel iagttaget, at Internet Explorer 5 "lækker" imellem de to stylesheets, hvis du ikke er tilstrækkeligt omhyggelig med at omdefinere alle dine formregler i print-stylesheet'et. Denne lækage forekommer kun, hvis de begge importeres. Derfor bruger jeg nu altid den metode, der er vist i tekstboksen herover.

10 slags stylesheets

Der er i alt 10 media typer:

  1. all
  2. aural
  3. braille
  4. embossed
  5. handheld
  6. print
  7. projection
  8. screen
  9. tty
  10. tv

Betegnelserne er nærmest selvforklarende, men de er under alle omstændigheder gennemgået i detaljer i kapitel 7 i CSS2 specifikationen hos W3C. CSS-guruen Eric Meyer har skrevet en fremragende artikel om emnet: Print Different, samt en artikel om forskellige specifikke problemer med browserfortolkningen på websiten A List Apart.

Det vil ofte vise sig, at en printervenlig udgave er særdeles velegnet til talemaskiner og braillegeneratorer, så det kan, hvis du har omtanke for blinde og svagtseende, være en fordel af bruge det samme stylesheet til disse:

<link rel="stylesheet" media="print, aural, braille" 
type="text/css" href="[sti]printstyle101.css">

Udførelse i praksis

Om du indlæser de to stylesheets i den orden, der er gengivet ovenfor, er sådan set ligegyldigt. Men der er nogle faldgruber her: I det aktuelle tilfælde indlæser jeg print-stylesheetet til sidst. Det er i dette ikke nok f.eks. at fjerne baggrundsgrafikken. Alle formregler, der er givet i skærm-stylesheet'et, skal gentages med nye værdier i print-stylesheet'et, således f.eks.

background-image:none;

Det er ganske let at kontrollere, om du har nået det ønskede resultat ved at bytte om på de to media typer, mens du arbejder med dit print-stylesheet, i mit eksempel:

<style type="text/css" media="print">
@import url([sti]style101.css);
</style>
<link rel="stylesheet" media="screen" 
type="text/css" href="[sti]printstyle101.css"> 

Det er i princippet det, jeg har gjort ved den demoside jeg har lavet: Printervenlig udgave.

Udskrivning af websider med HV-menu

HV-menu er en meget anbefalelsesværdigt dynamisk menu API, som jeg har brugt i adskillige år, og som jeg har skrevet nogle artikler om: Ger Versluis' hierarkiske menu .

Når du opretter et stylesheet med medietypen "print" er standard­metoden til skjule elementer, du ikke ønsker skal optræde på udskriften, at sætte elementernes display-værdi til none. På denne webside som på de fleste andre på denne site er menuen knyttet til en ellers tom div med id="menubox", sålunde:

<div id="menubox">
</div>

Hvis jeg vil skjule HV-menuen er det imidlertid ikke tilstrækkeligt at sætte dette elements display-værdi til none i et stylesheet. Menu er ikke indeholdt i elementet, der kun tjener som et referencepunkt, og menuen arver derfor ikke elementets egenskaber.

Tricket til at skjule menuen har jeg fra menuens ophavsmand, Ger Versluis, der meget venligt har svaret på mine forespørgsler om sagen. Hans løsning får du her:

I den fil, hvor du finder alle variable vedrørerende menuen, findes umiddelbart efter variabel-deklarationerne 4 funktionsdeklarationer:

function BeforeStart(){return}
function AfterBuild(){FrstCntnr.className='noprint'}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

I eksemplet herover har jeg tilføjet en linie i funktionen Afterbuild(), der hæfter en class på elementet FrstCntnr. Det er det med grøn skrift, det handler om.

Tilføjer du nu i dit printstylesheet formreglen .noprint {display:none;} vil menuen forsvinde, når websiden skrives ud til printeren.

Mere er der sådan set ikke i den sag, som er speciel for HV-menu. Men man skal jo vide det for at kunne gøre det.

Denne side er senest opdateret: January 29, 2006

E-mail nyhedsbrev

Læs også

Layout-eksempel 4c, der er en trin for trin gen­nemgang af, hvorledes du bærer dig ad med at lave et style­sheet til printeren, samt Favoritlayout, der demon­strerer et konkret ek­sem­pel.

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.