Anpassning till olika enheter

På denna sida så kommer stilsättningen ändras beroende på vad för enhet man använder för att se den. Dom olika enheter är: Handhållna enheter, Skrivare och Resten. Många smartphones räknas inte in till handhållna enheter.

Om man tittar på förhandsgranskningen för att skriva ut kan man se att mycket av stilsättningen har försvunnit. Detta gör att det blir enklare att se på en utskriven sida och att det inte går åt någon färg att skriva ut.

Om man tittar på sidan med en handhållen enhet så har menyn på sidan försvunnit. Detta för att underlätta läsning av texten på sidan. Det går att navigera med knapparna på footern istället.

Man kan kontrollera ännu mer hur en utskrift ska se ut med CSS. Det finns flera attribut för att göra detta.
Ett sätt är att använda @page regeln. Inom denna kan man sedan ändra storleken, orienteringen och marginalerna på sidan som ska skrivas ut. Detta görs med size och margin taggar. Storleken och orientering ändras både med size.
Förutom @page så finns flera attribut för att sköta hur en sida ska se ut för utskrift. Man kan ändra hur sidavbrott sköts med page-break-before, page-break-after och page-break-inside. Page-break-before och page-break-after är ganska självklara. Man styr sidavbrott innan och efter det element man lagt attributet i. Värdena som kan anges är: auto, always, avoid, left och right. Auto är default, always så bryter man alltid, avoid så så bryts det inte direkt innan eller efter elementet (beroende på vilket attribut man valt), left och right är sidavbrott för att styra om sidan skall ligga på en vänster- eller högersida. Page-break-inside är för att styra hur sidavbrott fungerar inne i ett element. Värden som bör användas är auto och avoid. Med avoid kan man helt enkelt styra så att ett element inte hamnar på två sidor (förutsatt att elementet får plats på 1 sida).
Man kan också styra hur många rader av en paragraf som det minst måste vara i slutet och i början av en sida. Dessa anges i @page och man använder orphans för de rader som är på slutet av sidan och widows för de på början av en sida. De kan ta emot nummervärden där nummret är antal rader.
Det finns ytterligare ett attribut för att styra utskrift. Detta attribut är marks. Vad detta attribut gör är att lägga till en markering på en sida fast utanför utskriftsdelen (se size). Det finns två värden: crop och cross. Crop är till för vart en sida ska klippas och cross är till för att rikta en sida. I skrivande stund verkar ingen av de vanliga webläsarna ha stöd för denna funktion.

Här är en länk till en sida som har olika av dessa attribut. Titta på förhandsgranskning för utskrift för att se resultatet. Sidan har page-break-before på article elementen. Detta gör att man får en tom sida innan första articlen och att det tvingas fram en sidbrytning innan nästa. Storleken på page boxen (alltså den ytan med innehåll) är satt till 20cm bredd och 30cm höjd vilket gör att den inte tar upp hela sidan. Page-break-inside har satts till avoid i <p> taggarna. Detta gör att ingen paragraf sprids ut över två sidor.