Måttenheter i CSS
Vi har nu tittat på ett par CSS-egenskaper som är viktiga för att kunna skapa layout, dvs width och height. Dessa används för att styra bredd och höjd på block-element. För att kunna använda oss av dessa måste vi lära oss lite om de olika måttenheter som finns tillgängliga i CSS.
Observera att alla måttenheter i CSS måste följa direkt efter värdet, annars kommer det inte att fungera. Det går alltså inte att ha något mellanslag mellan mått och måttenhet. Följande är korrekt; 80%, medan följande inte kommer att fungera 80 %. Så se upp med det!
Det finns ett enda måttvärde som inte behöver någon efterföljande enhet och det är talet noll. Anledningen till det är förstås att 0% är lika mycket som 0em, som är det samma som 0px, osv...
Den första enhet som vi ska titta på är ”px”, vilket är en CSS-pixel. Definitionen för en ”px”, skiljer sig lite ifrån vad vi vana att en pixel är...
Standardpixel
Som du kanske vet är en pixel ett bildelement på skärmen. Varje pixel byggs oftast upp av minst tre sub-pixlar, en röd, en grön och en blå. När dessa lyser med olika styrka så bildas olika färgkombinationer. Pixlarna är så små, och ligger så nära varandra att du oftast inte kan urskilja dem med blotta ögat. Tillsammans bildar dessa pixlar det innehåll du ser på skärmen. En vanliga HD-skärm har 1920 x 1080 pixlar.
CSS-pixel eller px
CSS px är inte riktigt det samma som en pixel på en vanlig skärm. Olika skärmar har olika egenskaper; de är olika stora, de har olika upplösning osv, på grund av detta kan det skilja sig stort på vad en pixel är ifrån skärm till skärm. Därför har W3C valt att definiera px på så sätt att den blir mindre beroende av olika typer av hårdvara och mer likformig. Den verkliga definitionen på en px är mer komplicerad och baseras sig på hur man ser ett bildelement på ett visst avstånd.
Rent generellt kan du utgå ifrån att px är mer eller mindre en pixel eller i alla fall att det är en rätt så liten måttenhet. På riktigt högupplösande skärmar, kan en px bestå av flera skärmpixlar. Det gör att man kan ange bråkdelen av en px.
Det finns dock ett par specialfall...
För bilder gäller att en px motsvarar en "normal" pixel i bilden. Så en bild som är 100 x 100 pixlar stor, kommer att vara 100 x 100 px i CSS.
När man ska återge en webbsida på papper ska en px ska vara exakt 1/96-dels tum stor.
Om du skulle använda px för att skapa en box skulle du göra något i stil med detta:
Procent
Procent är ofta en användbar måttenhet. Anger man saker i procent, är det lätt att få till en sida som ser bra ut oavsett hur stort användarens webbläsarfönster är.
När man anger procent, anger man oftast hur stort elementet ska vara i förhållande till föräldraelementet, dvs det är inte relativt till hela sidan eller hela webbläsarfönstret. Om man vill relatera till webbläsarfönstrets storlek, får man använda sig av vh och vw.
Om man anger ett procentuellt värde för en teckensnittsstorlek, så kommer det vara i förhållande till hur stort teckensnittet är där regeln används. Vi provar på ett exempel, först behöver vi lite HTML-kod.
Vi har alltså ett i-element placerat inuti ett em-element, som i sin tur ligger inuti ett p-element. Nu kopplar vi till lite CSS till det:
Texten i vårt yttersta p-element får alltså storleken 16px. Det nästlade em-elementet sätt till 200%, det vill säga dess text blir 32px. Vi har ytterligare ett nästlat element, dvs i-elementet. Även detta har font-size: 200%. Detta innebär alltså att den ska vara 200 % större än sin förälder, som är em-elementet, så vi får textstorleken 64px.
Det finns ett antal egenskaper med vilka man inte kan använda procent. Det gäller främst de element där inte det finns någon logisk koppling till ett föräldraelement, eller som inte har en koppling till något som man kan använda i en procentsats. Se upp med detta och kolla i CSS-egenskapslistan för att se om procent stöds eller ej.
em
Storleken sätts relativt till den beräknade storleken på det teckensnittet som gäller för elementet. Denna är antingen ärvt ifrån ett föräldraelement eller satt explicit för elementet i fråga. Följande skulle alltså sätta en bredd som är tio gånger större än teckensnittets bredd:
width: 10em;
Man kan inte alltid utgå ifrån att det får plats precis så många tecken som det antal em man anger. Detta är på grund av att de flesta teckensnitt är proportionella, dvs tecknen tar upp olika storlek beroende på hur bred bokstaven är. Så i ovanstående exempel kanske vi till och med skulle kunna få in 20 tecken, om det vore smala tecken - såsom t.ex. "!". Medan det inte skulle få plats lika många breda tecken.
Om man anger denna måttenhet för font-size, beräknas storleken utifrån den teckenstorlek som ärvts ifrån föräldraelementet. Det blir alltså ungefär samma sak som att använda %. Därmed är följande likvärdigt:
font-size: 200%;
font-size: 2em;
Man använder sig ofta av em för att skapa layouter som är skalbara med avseende på skärmstorleken.
rem
Storleken sätts relativt till den beräknade storleken på det teckensnitt som gäller för rotelementet. Det vill säga den teckenstorlek som gäller för html-elementet. Detta används ofta för att skapa skalbara layouter, där man vill komma åt den teckenstorlek som gäller för dokumentet.
ex
Inom typografi är detta det samma som höjden på lilla x i fonten. I webbsidor är det dock den beräknade höjden på fonten, vilket oftast är samma höjd som de gemena (små) bokstäverna. Denna enhet används inte så ofta. När den används är den till för att skapa skalbara layouter, t.ex. när en bild ska visas med samma höjd som ett textblock.
vh
En hundradel av höjden på den synliga delen av webbsidan.
vw
En hundradel av bredden på den synliga delen av webbsidan.
Om det finns en scrollbar på kanten, kommer ytan under denna att räknas som den är synlig. Vilket kan vara lite lurigt och något som man måste se upp med.
vmin
En hundradel av den ledd som är minst på den synliga delen av webbsidan, dvs om vi har en skärm som är 1000px bred och 500px hög så kommer vmin att vara en hundradel av 500px.
vmax
En hundradel av den ledd som är störst på den synliga delen av webbsidan, dvs om vi har en skärm som är 1000px bred och 500px hög så kommer vmax att vara en hundradel av 1000px.
Absoluta enheter
Det finns andra enheter, såsom t.ex. mm, cm och in.
De absoluta enheterna hänger samman på följande vis: 1 tum = 2,54cm = 25,4mm = 72pt = 6pc
På grund av hur de är definierade är dessa enheter inte pålitliga. Vi kan inte utgå ifrån att 1cm verkligen motsvarar en centimeter på skärmen. Det är därför lika bra att undvika dessa enheter. I alla fall så länge du designar saker som ska visas på en skärm. Om du däremot gör ett stylesheet som ska användas för utskrift är dessa enheter korrekta och därmed användbara.
Övningar
Här hittar du några Enhetsövningar.