Jeg mener at man i de aller fleste tilfeller kan bruke `px` for å angi størrelse i stilregler.
Man trenger ikke andre absolutte måleenheter som `cm` eller `in`, da disse uansett er definert i forhold til `px`. Heller ikke `em` eller `rem` er nødvendige, verken for responsiv design, universell utforming eller for å lette vedlikehold av koden, til tross for at disse fordelene ofte fremheves.
Personer med nedsatt syn justerer sjelden skriftstørrelsen i nettleseren, de bruker vanligvis zoom-funksjoner i stedet. Når designet endres, må man ofte justere relative størrelser uansett. Ved bruk av `em` for å definere padding og margin, vil en endring av fontstørrelsen få en "cascading" effekt.
Konklusjonen er derfor: Det er vanligvis bedre å bare bruke px.
Men for å komme helt frem til denne konklusjonen, må vi først forstå hva `px` egentlig betyr i CSS.
En CSS-piksel er ikke en piksel
En viktig ting du må forstå før du kan kalle deg en CSS-maestro, er at en CSS-piksel ikke tilsvarer en en piksel på skjermen. I CSS representerer `1px` en "prikk på skjermen", men denne prikken kan bestå av flere skjermpiksler. Dette er spesielt vanlig med dagens høyoppløselige skjermer.
Hvorfor er det slik?
For det første øker skjermoppløsningen stadig. Hvis en CSS-piksel tilsvarte en skjermpiksel, ville nettsider blitt knøttsmå og uleselige på disse skjermene.
For det andre varierer avstanden mellom skjermen og brukeren. Reklameskjermer eller rutetabell-tavler er ofte langt unna, mens andre skjermer er derimot, tilsynelatende, ment å være presset langt opp i øyet til mottaker, slik som smarttelefonen.
Dette krever at en CSS-piksel tilpasser seg skjermens pikseltetthet for å sikre lesbarhet og brukervennlighet, uavhengig av skjermtype og brukssituasjon.
Derfor har W3C-standarden laget en definisjon av en CSS-piksel som tar høyde for både oppløsning på skjermen, og avstanden mellom skjerm og tilskuer.
Savna Y2K-design. Nå gir han ut løsningen
Så, hva er en CSS-piksel?
En CSS-piksel beskrives som vinkelen man ser én piksel i på en skjerm med en oppløsning på 96 DPI (punkter per tomme), når skjermen er plassert i en armlengdes avstand fra betrakteren. Derfor kan vi også kalle en CSS-piksel for "den visuelle vinkelenheten" (visual angle unit).
Formålet med denne definisjonen er å sikre at webinnhold vises i tilnærmet samme størrelse på ulike enheter, uavhengig av skjermoppløsning eller avstand til skjermen. Dette gjør at nettsider kan være konsistente og lesbare, uavhengig av enheten de vises på.
Med andre ord: Har du en ordinær dataskjerm med 96 DPI, kan du (kanskje) anta at en CSS-piksel vist på denne skjermen, tilsvarer en skjermpiksel. Hvis du derimot leser denne artikkelen på en 31.5 tommers 8K-skjerm med 280 DPI, burde vi håpe at en CSS-piksel består av noen flere skjermpiksler. Hvis ikke må du forstørre skjerminnholdet betraktelig for å lese denne teksten.
"The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc, Q) and the visual angle unit (pixel unit) (px)."
- CSS Values and Units Module Level 4 (w3C).
Dette prosjektet tar av på Kickstarter
En CSS-tomme er definert til å være 96 CSS-piksler. Dette burde ikke være så rart, gitt definisjonen av en piksel over, knyttet til en skjerm på 96 DPI. En CSS-centimeter er igjen 96/2.54 piksler, da en tomme er 2.54 centimeter.
Absolutt alle absolutt-enheter i CSS er altså definert i forhold til en CSS-piksel. Det er i praksis ingen forskjell på å skrive “width: 1in”; eller “width: 96px”; i stilarket. Dette betyr at du trenger ingen andre absolutte enheter enn pikselen!
Det kan kanskje være nyttig å vite at en CSS-tomme alltid er 96 CSS-piksler, eller at, eller at en CSS-centimeter er rundt 37.8 CSS-piksler, som en slags guide til hvor mange piksler du trenger. I stilarket kommer du uansett bedre ut ved å bare forholde deg til piksler, når det kommer til absolutte størrelser.
«Absolutt alle absolutt-enheter i CSS er altså definert i forhold til en CSS-piksel.»
Hva med relative CSS-enheter?
Ok, så det er kanskje ikke nødvendig å fylle stilarket med `cm` eller `pt`.
Men hva med `em` og `rem`, som sikrer responsiv og skalerbar design og sørger for at applikasjonen er tilgjengelig og universelt utformet? Det må jo være superbra, ikke sant?
Sannheten er at både em og rem også er knyttet til piksler; forskjellen er at du må gjøre denne koblingen selv.
For eksempel er `1em` lik skriftstørrelsen i elementet. Så hvis skriftstørrelsen er satt til `14px` for et element, er `1em` det samme som `14px` (bruker du derimot em i `font-size`, er `em` relatert til skriftstørrelsen på forelder-elementet). `1rem` er lik skriftstørrelsen i rotelementet.
Dette betyr at hvis du bruker tilsvarende pikselverdier i stedet for disse relative enhetene, vil skjermen se identisk ut, med mindre du endrer nettleserens standardstørrelse.
Lager felles designsystem: – Interessen sier litt om behovet
Fontstørrelse vs. zoom
Å endre browserens standard font-størrelse kommer derimot ikke uten problemer. Mange sider blir rett og slett ødelagt av dette, fordi mange sider ikke tar høyde for at fontene på siden kan få en annen størrelse enn de angitt i designtegninger og CSS-stilark. Tekster havner utenfor bokser som de er ment å være inni. Noen tekster som er ment å være skjult, popper frem.
For eksempel vil p-ene i lenken "Hopp til hovedinnhold" på sidene til kode24 dukke opp hvis man setter fontstørrelsen i Chrome til 72. Dette er et problem svaksynte unngår hvis de bruker nettleserens eller operativsystemets zoom-funksjonalitet i stedet. Ved å bruke zoom-funksjonen kan de forstørre alt innholdet på siden uten å bryte layouten, noe som sikrer at siden fortsatt er brukbar og lesbar.
I tillegg er zoom-funksjonene mye mer tilgjengelige enn å endre innstillingene for standard fontstørrelse. Det er enklere å zoome inn eller ut etter behov, fremfor å navigere seg dypt inn i innstillingene for å justere størrelsen. Zoom fungerer også på bilder og annen grafikk, noe som ikke skjer når man bare endrer fontstørrelsen.
Min erfaring indikerer at de fleste som trenger større tekst, enten bruker zoom i nettleseren/OS eller reduserer skjermoppløsningen på enheten sin. Dette gir en helhetlig og brukervennlig løsning for å tilpasse innholdet til deres behov uten å kompromittere designet eller funksjonaliteten på nettsidene.
Kjøpte og drepte CSS-Tricks: «Prøvde å få det tilbake!»
La oss sammenlikne
Hvis du altså har laget en responsiv side, som støtter WCAGs reflow-krav, (noe du absolutt burde hvis du mener at tilgjengelighet er viktig), så holder det å bruke piksel som en enhet hele veien. Når bruker zoomer inn på siden for å se bedre, skal siden oppføre seg eksemplarisk.
Hvis du fremdeles insisterer på å bruke `em` og `rem` på grunn av tilgjengelighet, burde du også sørge for at applikasjonen du utvikler støtter både reflow/400% zoom og vanlig zoom med nettleserens fontstørrelse blåst opp til en tilsvarende størrelse som man får ved 400% zoom. Dette sikrer at siden er fullt tilgjengelig for alle brukere, uavhengig av hvilke innstillinger de foretrekker å bruke.
En øvelse du kan gjøre, er å sammenligne 400% zoom på en nettside, versus å oppjustere fontstørrelsen i nettleser-innstillingene til den største mulige (72 piksler i Chrome). I alle tilfeller jeg har undersøkt, så fungerer 400% zoom mye bedre enn oppblåst font.
Her følger et par eksempler fra kode24, hvor vi kan se forsiden når fontstørrelsen i browseren er satt til 72px, og hvor vi har zoomet inn 400%. For å samtidig teste ut suksess-kriterie 1.4.10, er nettleserens bredde satt til 1280 CSS-piksler.
Eksempel #1: Forside med fontstørrelse satt til 72px
Tekstene flyter ut av boksene og blir ofte uleselige.
Skjulte elementer kan dukke opp og forstyrre layouten.
Navigasjonselementer kan overlappe eller bli utilgjengelige.
Eksempel #2: Forside med 400% zoom
Tekst og bilder skalerer proporsjonalt, og layouten forblir intakt.
Siden er fortsatt brukbar og lesbar, med alle elementer på sine tiltenkte plasser.
Brukeren kan enkelt navigere og lese innholdet uten at det blir rotete.
Skalerbarhet og vedlikeholdbarhet
Denne sammenligningen viser tydelig at bruk av zoom gir en bedre opplevelse for brukerne, spesielt de med synshemminger, og understreker viktigheten av å designe nettsider som støtter WCAGs reflow-krav.
Men hva som med skalerbarhet og vedlikeholdbarhet? Et annet argument som ofte går igjen, er at det er mye lettere å vedlikeholde layouten til en applikasjon, om man definerer størrelser med `em`. Argumentet går på at alle størrelser vil automatisk tilpasse seg, i det man endrer på fontstørrelsen.
Jeg er derimot ikke overbevist om dette. Hvis du vedlikeholder en applikasjon som sjelden endrer design eller skriftstørrelser, er det sjelden du trenger denne automatiske justeringen. Med px-enheten har du mer kontroll over de faktiske størrelsene i stilen din.
Scenario: Designeren ønsker å bytte ut fonten dere bruker i applikasjonen. Men denne fonten ser litt mindre ut, så designeren vil også øke fontstørrelsen fra 14px til 16px (eller fra 1rem til 1.2rem).
Utfordringen nå er at alle steder hvor margin og padding er definert med `em`, så vil det nå bli mer luft rundt elementene, noe som ikke var ønsket. Designeren ønsket kun å bytte ut fonten. Dette resulterte i en omfattende justering av stilarkene for å korrigere margin og padding. En øvelse man hadde vært foruten om `px` ble brukt til å definere størrelser i stedet.
– Bruker denne snutten på alle sidene mine
Trygg på px
Påstanden er altså at med `em` og `rem`, når man endrer grunnfontstørrelsen, skalerer alt annet med, noe som sparer tid og arbeid ved større redesign.
Jeg hevder at denne automatiske skaleringen like gjerne kan føre til mer arbeid som mindre.
Hvorvidt bruk av `em` fører til mindre vedlikehold av koden sammenlignet med `px`, må undersøkes empirisk. Jeg er ikke overbevist om at dette nødvendigvis er tilfelle.
Derimot er jeg trygg på at ved å bruke `px` i stilarkene mine, kan jeg være sikker på at nettsiden oppfører seg konsekvent på tvers av skjermer, nettlesere og oppløsninger. CSS-pikselen er allerede definert relativt til DPI og avstanden mellom brukeren og skjermen, og er derfor en relativ størrelse som skaleres etter behov!
Finnes det da enheter som ikke er px, men som fremdeles er verdt å bruke i CSS? Ja visst! Både `%`, `vh` og `vw` er uunnværlige, og kan ikke reduseres til CSS-piksler uavhengig av skjerm-dimensjoner.
