CSS-enheter & tillgängliga mått

Ett enhetsval är ett tillgänglighetsbeslut

CSS har många måttenheter och det kan kännas både överväldigande och konstigt. Varför behöver vi så många och när ska jag ens använda dem? Anledningen är att webben är en flexibel plattform som ska fungera för alla, oavsett skärmstorlek, upplösning och användarens inställningar. Måtten har dessutom utvecklats över tid, och vissa är kvar av historiska skäl.

Men syftet är i slutändan att din kod och layout behöver fungera på många olika enheter med olika skärmstorlekar. Därför finns det två familjer av mått: absoluta enheter som px, som betyder exakt samma sak överallt, och relativa enheter som rem, em och %, som beskriver förhållanden och anpassar sig när omgivningen ändras.

Du har redan använt relativa mått. I temat webbens byggstenar fick menyns länkar padding i rem, med en snabb motivering: klickytor ska växa med användarens textstorlek. Nu tar vi hela bilden, vad enheterna egentligen är relativa till och varför valet av enhet är ett tillgänglighetsbeslut, inte bara ett tekniskt val.

Enhetsguiden

Enhet	Relativt till	Typisk användning
`px`	Ingenting (absolut)	Borders, box-shadow, ikoner med fast storlek
`rem`	`<html>`-elementets fontstorlek	Typografi, spacing, max-width
`em`	Föräldraelementets fontstorlek	Padding i relation till komponentens text
`%`	Förälderns dimension	Flexibla bredder i flex/grid-layout
`vw`	Fönstrets bredd	Hero-sektioner, heltäckande bakgrunder
`vh`	Fönstrets höjd	Fullskärmssektioner

De flesta webbläsare har en standardfontstorlek på 16px. Det betyder att 1rem = 16px i en omodifierad webbläsare. Men du ska aldrig anta att alla användare kör standard.

Tillgänglighetsprovet

Föreställ dig en användare med synnedsättning. Det första hen gör i en ny webbläsare är att öppna inställningarna, leta upp teckenstorlek och skruva upp den. När din sida sedan laddas händer en av två saker:

Sida byggd med px: Ingenting förändras. Pixlarna ignorerar inställningen.
Sida byggd med rem: Allt skalar upp proportionellt. Text, padding, bredder, allt.

Det är inte ett sällsynt edge case. Det är en av de vanligaste anpassningarna bland användare med synnedsättning. WCAG Web Content Accessibility Guidelines, riktlinjer för att göra webbinnehåll mer tillgängligt, särskilt för personer med funktionsvariation. Innehåller principer som att innehållet ska vara uppfattbart, hanterbart, begripligt och robust. Se: Navigationsstruktur -kravet 1.4.4 (Resize Text) säger att text ska kunna förstoras till 200% utan att innehåll eller funktionalitet försvinner. En sida byggd med px för typografi och spacing riskerar att bryta det kravet. I uppgiften nedan får du göra provet själv.

Uppgift: Relativa vs absoluta enheter

Bygg en liten testsida och se skillnaden med egna ögon. Samtidigt repeterar du CSS-variablerna från Tema 2, för med måtten samlade i variabler kan hela sidan byta enhet på ett enda ställe.

Skapa en ny HTML-fil med en <h1>, en <p> och en <div class="box">.

Lägg måtten som variabler i :root, med absoluta värden:

:root {
    --text-size: 16px;
    --space: 16px;
    --max-width: 600px;
}

Använd variablerna i din CSS: font-size: var(--text-size), padding: var(--space) och max-width: var(--max-width) på .box.
Öppna webbläsarens inställningar, leta upp standardteckenstorlek och skruva upp den till maximum. Ladda om sidan. Vad händer? Vad händer inte?
Byt de tre värdena i :root till rem: 1rem, 1rem och 37.5rem. Tre rader, och hela sidan byter måttsystem.
Ladda om igen. Vad händer nu?
Skriv en kommentar i din CSS-fil som förklarar valet. Kommentarer i CSS skriver du /* så här */.

Vad händer om…

Sätt font-size: 5vw på din <h1>. Öppna sidan i DevTools mobilvy och dra handtaget från bred till smal skärm. Är texten alltid läsbar, eller kan den bli för liten på en smal skärm?

Motivera & reflektera

Skriv i din readme.md varför rem är ett tillgänglighetsbeslut och inte bara ett tekniskt val. Vilken av dina enheter skulle du aldrig byta till rem, och varför är just den ett undantag?