Jag bloggar numera på http://blog.dileno.com ».

Stilmallar och media-attributet

en CSS-artikel av Martin S., publicerad den 2 maj 2005
Med hjälp av attributet media i elementen style och link kan man skapa och använda sig av stilmallar för olika ändamål. Man kan anpassa en sidas utseende för olika plattformar. I denna artikel visar jag hur man skapar stilmallar speciellt för utskrifter.

Olika medier


Man kan i elementen style och link använda sig av attributet media för att specifiera vilken stilmall som ska användas till vad. Man kan välja att visa en specifik stilmall för dem som surfar på en webbsida på en vanlig datorskärm och en specifik stilmall för dem som surfar på exempelvis en mobil eller handdator. Har vi en stilmall vi skulle vilja använda för både skärm, utskrift och mobila enheter så sätter vi egenskapen till ”screen, print, handheld”:

<style type=”text/css” media=”screen, print, handheld”>
/* massa stilar */
</style>

Det finns ett flertal olika egenskaper för attributet media. Här är en närmre beskrivning på de mest använda:
Tabell: media-attributet och dess mest använda egenskaper
mediatypbeskrivning
allpassar alla enheter
screenför att visas på skärm
printför utskrifter
handheldför enheter med små skärmar och begränsas bandbredd, t.ex. mobiler och handdatorer

En lista på samtliga mediatyper finns på w3.org: Media descriptors

Har du en stilmall som passar till alla media (se länken ovan om du är osäker) så kan du använda dig av egenskapen all:

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

Screen och print


Tack vare egenskaperna screen och print hos media-attributet kan vi använda separata stilmallar för att presentera en sida på en skärm och att presentera i form av utskrift.
En helt vanlig stilmall för en sida som ska visas på en vanlig datorskärm skulle kunna se ut så här:

<style type="text/css" media="screen">
* { font: 12px Verdana,Arial,Helvetica,sans-serif; }
h1 { font: bold 14px Verdana,Arial,Helvetica,sans-serif; color: #800; }
#wrap { margin: 0 auto; width: 750px; }
#wrap div { margin: 0 0 10px 0; padding: 10px; }
#header { float: left; height: 60px; width: 728px; }
#main { float: left; width: 546px; }
#sidebar { float: right; width: 150px; }
#footer { float: left; width: 546px; }
</style>

Med hjälp av attributet media talar vi om att stilmallen ska gälla för screen, det vill säga stilmallen är till för att presentera en sida på en vanlig skärm. En sidan enligt ovan kan se ut så här: Exempel på användning av media-attributet

Om du tittar i källkoden så ser du att jag lagt till en stilmall för utskrifter: media=”print”. Om vi vill skriva ut sidhuvudet (loggan) och själva huvudinnehållet på sidan men inte högerkolumnen eller sidfoten så är det tack vare CSS möjligt - man kan gömma lager på en sida, med hjälp av deklarationsblocket display: none;. För att huvudtexten inte ska försvinna i lagret main så anger vi en bredd på 85%:

<style type="text/css" media="print">
#sidebar, #footer { display: none; }
#header, #main { width: 85%; }
</style>

Väljer du att förhandsgranska utskrift i din webbläsare så ser du hur resultatet av CSS-koden ovan blir.

Vill du ha dina stilar i separata stilmallar är det bara att använda link-elementet i stället för style-elementet. Så här:

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

Slutligen



Visst kan du använda dig av en stilmall och anpassa den så att den fungerar bra för både attributen screen och print (eller varför inte för attributet all?). I så fall är relativa värden det du ska satsa på. De enkla exemplen i denna artikel syftar till att på ett enkelt sätt visa hur pass enkelt det ändå är att skapa stilmallar för olika ändamål. Som vanligt – testa dig fram efter tycke och smak!