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

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 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.

Galleriet: det du bygger i Tema 3

Från och med nu har temat ett mål. Du bygger ett bildgalleri, och varje del i Tema 3 lägger till ett lager på det: måtten här, lådan i nästa del, klickytan efter det, sedan typografi, states och till sist layouten som gör rutnätet responsivt.

Vad galleriet visar bestämmer du helt själv. Skateboardbilder, svampar, konsertaffischer, bilar, spelskärmdumpar, vad du faktiskt vill titta på. Det enda kravet är att du har rätt att använda bilderna, och den frågan tar vi på allvar längre fram.

Så här ser målet ut. Ingen design, bara lådorna:

Kom igång

Sätt upp projektet innan du går vidare, det tar tio minuter och är samma flöde som i Publicera på webben:

1. Skapa ett nytt, publikt repo på GitHub som heter galleri och klona ner det. I repot: index.html och en mapp img/. Lägg tre CC0-bilder i img/, optimerade som i Tema 2 eller nyhämtade från Unsplash.
2. Bygg sidan: en <h1> med samlingens namn, en <p> som kort ingress, och tre kort. Varje kort är en <figure class="kort"> med en <img src="img/..."> och en <figcaption> som innehåller en rubrik och en bildtext.
3. Committa, synka och slå på GitHub Pages under Settings -> Pages. Sidan ligger nu på dittnamn.github.io/galleri/. Lägg märke till att repots namn blev sökvägen i adressen, precis den delen du bröt ut i Publicera på webben. Syns inte bilderna är sökvägen till img/ fel.

Ladda om och titta: korten ligger under varandra i en kolumn, utan att du skrivit en rad layout-CSS. Det är så block-element beter sig, och det råkar vara exakt den vy en mobil behöver. Lägg den på minnet, du får användning för den i temats sista område.