Hvorfor du virkelig må slutte å bruke piksler for webdesign (og bytte til Rem)
La oss være ærlige et øyeblikk – webdesign pleide å være utrolig enkelt. I gamledager stirret alle på de nøyaktig samme klumpete stasjonære skjermene. Du kunne bare kaste en skriftstørrelse på 16px på et avsnitt, sette en fast bredde på hovedbeholderen, og si deg ferdig med det.
Men ting har endret seg. Mye. Nå prøver vi å få nettsteder til å se bra ut på telefoner i lommestørrelse, gigantiske ultrabrede skjermer, nettbrett og til og med smarte kjøleskap. Internett er ikke lenger en statisk plakat; det er en flytende, levende ting. Og hvis du fortsatt stoler utelukkende på piksler (px) for å bygge det? Da prøver du i bunn og grunn å sette en tvangstrøye på vann.
Det er på tide å snakke om relative enheter. Ærlig talt, å droppe px til fordel for rem er en av de beste vanene du kan legge til deg. Det sparer deg for frustrasjon, gjør koden din renere, og viktigst av alt: det er mye bedre for brukerne dine.
Problemet med piksler (A.K.A. Betongmetoden)
For å se hvorfor rem er så bra, må vi først se på hvorfor piksler er litt dårlige for moderne webdesign.
Tenk på piksler som å støpe betong. Når den først har herdet, sitter du fast med den. Hvis du forteller en nettleser at en overskrift er 24px, kommer den til å forbli 24px – uansett hva. Piksler er i utgangspunktet kontrollfrikene i CSS-verdenen. De bryr seg ikke om brukeren din myser mot skjermen, og de bryr seg i hvert fall ikke om noen spesifikt gikk inn i nettleserinnstillingene for å øke standard skriftstørrelse fordi de har dårlig syn.
Pikselen står på sitt. Den sier: «Nei, designeren sa 24 piksler, så du får nøyaktig 24 piksler.»
Denne stivheten er et mareritt for universell utforming. Når vi tvinger absolutte størrelser på folk, tar vi fra dem muligheten til å kontrollere hvordan de konsumerer innholdet vårt.
Her kommer REM: Din smarte termostat for CSS
Hvis piksler er støpt betong, er rem som en smart termostat for hele huset ditt.
Rem står for «Root Em.» Jeg skal ikke kjede deg med den tekniske historien, men alt du egentlig trenger å vite er at en rem-enhet baserer størrelsen sin utelukkende på roten av dokumentet ditt (<html>-taggen). Som standard setter nesten alle nettlesere sin rot-skriftstørrelse til 16px.
Så hvis du setter avsnittsteksten din til 1rem, oversetter nettleseren det til 16px. Hvis du setter overskriften din til 2rem, gjør nettleseren bare regnestykket: 2 x 16 = 32px.
Magien med skalering i den virkelige verden
Her er det analogien med den smarte termostaten faktisk gir mening.
La oss si at en bruker besøker siden din, men har dårlig syn. De har gått inn i nettleserinnstillingene sine og endret standard skriftstørrelse fra standard 16px til noe større, som 24px.
- Hvis du bygde nettstedet ditt med piksler: Koden din ignorerer dem fullstendig. Teksten din på 16px forblir nøyaktig 16px. Brukeren må zoome inn på en klønete måte, noe som ødelegger det nøye utformede oppsettet ditt og tvinger dem til å rulle horisontalt bare for å lese en enkelt setning. Det er utrolig frustrerende.
- Hvis du bygde nettstedet ditt med Rems: Nettstedet ditt respekterer faktisk brukeren. Fordi teksten din er satt til
1rem, ser nettleseren på deres nye standard (24px) og sier: «Kult, 1rem tilsvarer nå 24px.» Alt på nettstedet ditt – skrifttypene, padding, marger – skaleres opp perfekt og proporsjonalt.
Du trengte ikke å skrive en eneste ekstra linje med CSS. Layouten tilpasset seg bare det brukeren trengte.
Hvorfor du må gjøre byttet som, i går
Å gå fra px til rem er ikke bare en trendy utvikler-greie. Det er et grunnleggende skifte i hvordan vi håndterer brukeropplevelse.
- Det er en stor seier for universell utforming (A11y): Internett bør fungere for alle. Ved å bruke rems sørger du for at svaksynte brukere som stoler på egne nettleserinnstillinger, faktisk kan lese innholdet ditt uten å kjempe mot din CSS.
- Responsivt design blir mye enklere: Vil du skalere ned hele nettstedets typografi for mobil? Hvis du brukte piksler, ville du blitt sittende og skrive dusinvis av media queries for å endre hver eneste skriftstørrelse. Med rems endrer du bare rot-skriftstørrelsen én gang, og alt annet skaleres ned automatisk. Det føles ærlig talt som juks.
- Fremtidssikring: Nye enheter med rare skjermstørrelser lanseres hele tiden. Relative enheter sørger for at designet ditt er fleksibelt og puster i stedet for å bryte sammen under press.
Jukselappen for «Hva du skal bruke når»
Hør her, du trenger ikke å kaste piksler i søpla helt. De har fortsatt en liten plass i moderne design. Her er en rask og enkel guide for å gjøre overgangen:
Bruk rem for:
- Skriftstørrelser (Overskrifter, avsnitt, knapper)
- Avstand (Marger og padding)
- Bredder og høyder på store layout-beholdere
Bruk px for:
- Små, nøyaktige detaljer som aldri, aldri skal skaleres opp. Tenk på 1px rammer (borders) rundt et kort eller en subtil skygge (box-shadow).
Gullformelen:
- 1rem = 16px (Standard i nettleseren)
- 1.5rem = 24px
- 2rem = 32px
(Proff-tips: Hvis du hater å ta mattestykker i hodet, bare bokmerk et verktøy som konverterer Px til Rem og la det gjøre jobben for deg!)
Å omfavne rem betyr å gi opp en liten bit av absolutt kontroll slik at du kan bygge en langt overlegen, fleksibel og tilgjengelig opplevelse for menneskene som faktisk bruker nettstedet ditt. Betongen sprekker uansett – det er på tide å begynne å bygge ting som flyter.