Pixellinjal

Två sorters pixlar, och varför skillnaden spelar roll

Ordet pixel betyder två olika saker beroende på vem som säger det, och nästan all förvirring kring mätning på skärm bottnar i det.

• En CSS-pixel är den enhet ett stilmall arbetar i. Skriver du width: 200px är det CSS-pixlar du menar.
• En enhetspixel är en fysisk punkt på panelen, en av de miljoner som faktiskt lyser.

På en vanlig bildskärm är de samma sak. På en telefon eller en dator med hög täthet är de det inte: en CSS-pixel ritas då med fyra eller nio fysiska pixlar. Förhållandet mellan dem är enhetens pixelkvot, och den visas överst på den här sidan tillsammans med båda måtten, så att du aldrig behöver gissa vilket tal du tittar på.

Skärmdumpsfällan

Det här är den praktiska följden och den överraskar folk varje gång. En skärmdump tas i enhetspixlar. Har din skärm kvot 2 kommer en knapp du mätte till 200 CSS-pixlar ut som 400 pixlar i bildfilen.

Två personer som mäter samma knapp, en i webbläsaren och en i en bildredigerare, får därför olika svar och båda har rätt. Lösningen är inte att välja sida utan att veta vilken pixel som avses: dela skärmdumpens tal med pixelkvoten och du är tillbaka i CSS-pixlar. För en motsvarande genomgång av vad kvoten gör med hela skärmen finns skärmstorlek.

Zoom gör tyst allt fel

Webbläsarens zoom ändrar hur många enhetspixlar som går på en CSS-pixel. Vid 110 % zoom är varje mått du tar tio procent för stort, och ingenting på skärmen antyder att något är fel. Återställ till 100 % med Ctrl+0, eller Cmd+0 på en Mac, innan du mäter något du tänker föra vidare.

Samma sak gäller systemets egen skalning, men den märks mer sällan eftersom den sällan ändras. Byter du bildskärm eller flyttar fönstret till en annan panel är det värt att kontrollera kvoten en gång till innan du litar på en siffra.

Hjälplinjer och hårkors

Ett mått räcker sällan ensamt. Dubbelklicka någonstans på ytan så läggs en hjälplinje ut, och med två eller tre av dem går det att se om kanter faktiskt ligger i linje eller bara nästan gör det. Hårkorset gör samma sak löpande, genom att dra en linje genom pekaren i båda riktningarna.

För de sista pixlarna är tangentbordet bättre än musen. Piltangenterna ändrar markeringen en pixel i taget, eller tio med skift nedtryckt, vilket är svårt att träffa exakt med en pekare.

Vad linjalen inte kan göra

Den kan inte se utanför sin egen flik. Det är en säkerhetsgräns i webbläsaren och inte något som saknas: en sida som kunde mäta andra fönster skulle också kunna läsa dem. Behöver du mäta något utanför webbläsaren, ta en skärmdump och mät den i stället, med enhetspixlar i åtanke.

Den mäter heller inte fysisk längd. Vill du veta hur många millimeter något är, är det linjalen som gäller, och den kräver en kalibrering. Pixellinjalen kräver ingen, eftersom pixlar är vad den räknar från början.

Brytpunkter och andelen av visningsytan

Ett mått i pixlar säger sällan något i sig när layouten ska fungera på flera skärmstorlekar. Att en kolumn är 640 pixlar bred är ointressant; att den upptar halva visningsytan är något som går att skriva en regel kring. Därför visas andelen bredvid pixeltalet i stället för i en separat vy.

De brytpunkter som används i praktiken har samlats kring ett fåtal tal, eftersom de följer verkliga enheter snarare än runda siffror:

• Under 480 px är telefon i stående läge;
• 768 px är den klassiska gränsen mot surfplatta;
• 1024 till 1280 px täcker mindre bärbara datorer;
• 1440 px och uppåt är bildskärm på skrivbord.

Att mäta mot dem direkt i webbläsaren är snabbare än att gissa, och det avslöjar den vanliga fällan att ett element ser rätt ut vid en bredd men inte vid nästa.

Att kontrollera avstånd i stället för storlek

Den vanligaste användningen är inte att mäta ett element utan mellanrummet mellan två. Ett gränssnitt som ser oregelbundet ut har nästan alltid ojämna avstånd snarare än fel storlekar, och avstånd är svårare att se på ögonmått än längder är.

Dra en markering mellan två kanter och siffran säger direkt om marginalen är den du tänkt dig. Med några hjälplinjer utlagda går det dessutom att se om en serie element ligger på samma linje eller bara nästan gör det, vilket är den sortens fel som märks utan att man kan peka ut varför.

Ett sista råd som sparar tid: notera pixelkvoten innan du börjar, inte efteråt. Nästan alla motsägelser mellan två mätningar går att lösa med den enda siffran, och den är svår att rekonstruera i efterhand när måtten redan är nedskrivna och det inte längre framgår vilken skärm de togs på. Står det ingenting om kvoten är ett pixeltal bara halva uppgiften.

Enheter som inte är pixlar

Modern CSS mäter allt oftare i relativa enheter i stället för pixlar, och då är ett pixelvärde ett mellansteg snarare än ett svar. En rem är storleken på rotelementets typsnitt, normalt sexton pixlar, så ett mått på 48 px motsvarar 3 rem så länge inget ändrat grundstorleken.

Procent och enheter som vw och vh räknas mot visningsytan, vilket är exakt den andel som visas bredvid pixeltalet här. Att mäta i pixlar först och räkna om sedan är i praktiken snabbare än tvärtom, eftersom pixeln är det enda som går att observera direkt på skärmen.