Anpassa din hemsida för skrivaren

Alla som byggt en hemsida från grunden vet att själva formgivningen görs med CSS medan själva innehållet hanteras av HTML (eller XHTML). Det många inte tänker på är att CSS inte är bundet till formgivning just för skärmen, utan låter dig formge även för andra media.

Ett av dessa är skrivaren, något som kan vara mycket intressant för just hemsidesskapare.

Gör om, gör rätt

Alla har vi sett webbsidor med länkar kallade klicka här för en utskriftsvänlig version eller något snarlikt, länkar som i sin tur laddar en nedbantad version av samma sida.

Problemet med detta förfarande för utskrift av webbsidor, är att det kräver att hemsidesskaparen (eller för den delen ett skript) hela tiden skapar två versioner av samma dokument – och det är bland annat sådant som CSS finns till för att lösa.

Så, hur berättar du då för webbläsaren att du har CSS-kod för både skärm och skrivare? Jo, genom att ange följande i head-sektionen av ditt HTML-dokument:

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

Genom att ange olika media-attribut så kan du tillhandahålla olika formatering beroende på media (print och screen är alltså bara två av ett flertal olika alternativ).

När besökaren i detta fall besöker din sida och sedan väljer att skriva ut den, formaterar webbläsaren automatiskt om innehållet så att det följer de riktlinjer du angivit i filen print.css – detta medan riktlinjerna angivna i filen screen.css gäller för presentationen på skärmen.

Det finns dock en del skillnader vad gäller formateringen för skrivare, gentemot vanlig formatering för skärm. Egenskaper unika för pappersmedia finner du samlade här. Läs gärna även den välskrivna handledningen i ämnet hos A List Apart och börja nyttja den verkliga kraften hos CSS redan idag (och sluta jobba dubbelt bara för att kunna låta dina besökare skriva ut din webbsida ordentligt).

Lycka till!

Dela: Facebooktwittergoogle_pluslinkedinmail

En reaktion på “Anpassa din hemsida för skrivaren

Kommentera

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