CSS Unit Guide: enheter, egenskaper och viewport
Postad: 24 november 2021 | CSS · CSS-guider | No CommentsDenna artikel handlar om CSS units och hur dess egenskaper på ett bra sätt kan samverka för en responsiv web design.
För att möta kravet på en responsiv css-design måste vi först börja med definitionen Viewport. Så vad är det?
När vi talar om Viewport så handlar det således inte bara om ett visningsalternativ för små skärmstorlekar eller fönster, vilket ofta är en felaktig uppfattning, utan det är ett specifikt område som visas på en skärm oavsett storlek och fönster. Du kan ju själv testa hur stor just din viewport är i förhållande till din skärmstorlek.
Viewport
Webbläsarens viewport har ofta inte i samma storlek som den renderade sidan. I de fall webbläsaren tillhandahåller rullningslister kan då användaren skrolla runt och komma åt allt innehåll.
Den del av visningsvyn som är synlig kallas den visuella visningsvyn. Denna kan vara mindre än viewporten, till exempel om användaren nypzoomar. Layout viewport förblir dock densamma, det är den visuella visningsvyn som blir mindre.
Enheter med smal skärm (t.ex. mobiler) renderar sidor i ett virtuellt fönster eller viewport, som vanligtvis är bredare än skärmen, och förminskar sedan det renderade resultatet så att allt kan ses på en gång. Användare kan sedan panorera och zooma för att se olika delar av sidan. Om exempelvis en mobilskärm har en bredd på 640px kan sidor renderas med en virtuell visningsvy på 980px för att den krymps ned för att passa in i utrymmet för 640px.
Det här sker på grund av att många sidor inte är mobiloptimerade så de antingen kraschar eller ser hemska ut när de renderas med en liten viewportbredd. Denna virtuella viewport är ett sätt att få icke-mobiloptimerade webbplatser i allmänhet att se bättre ut på enheter med smal skärm.
Viewport metatagg
Det finns en lösning på ovanstående problem. Viewport metatagg i <head> i HTML-koden används för att möjliggöra så att innehållet i fönstret visas på rätt vis. En felaktig viewport kommer att leda till att användaren tvingas sidskrolla när de surfar på webbplatsen istället för att webbplatsen passar perfekt på deras enhetsskärmar. En mobiloptimerad webbsite använder sig att nedanstående metatagg.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Width-egenskapen styr storleken på visningsvyn. Den kan ställas in på ett specifikt antal pixlar som exempelvis width=600 eller till specialvärdet device-width vilket är skärmens bredd i CSS-pixlar i en skala av 100 %. Det finns motsvarande värden för höjd och enhetshöjd vilket kan vara användbart för sidor med element som ändrar storlek eller position baserat på visningsportens höjd.
Vi kommer att kika närmare på css-enheterna längre fram i artikeln.
Egenskapen för initialskalan styr zoomnivån när sidan läses in första gången. Egenskaperna för maximal skala, minsta skala och användarskalbara egenskaper styr hur användare tillåts zooma in eller ut på sidan.
Visual Viewport
Den del av visningsvyn som för närvarande är synlig kallas den visuella visningsvyn. Detta kan vara mindre än layoutvyn, till exempel när användaren har nypzoomat. Den visuella visningsvyn är den visuella delen av en skärm exklusive skärmtangentbord, områden utanför ett nypzoomområde eller någon annan artefakt på skärmen som inte skalas med dimensionerna på en sida.
Den mobila webben innehåller två viewports, layoutvisningsvyn och den visuella visningsvyn. Layoutvisningsvyn täcker alla element på en sida och den visuella visningsvyn är det som faktiskt syns på skärmen. När användaren nypzoomar in på sidan, krymper den visuella visningsvin men layoutvyn är oförändrad. Användargränssnittsfunktioner som tangentbordet på skärmen (OSK) kan krympa den visuella visningsvyn utan att påverka layoutvisningsvyn.
Vad händer när ett webbsideselement måste vara synligt på skärmen oavsett den synliga delen av en webbsida? Till exempel, vad händer om du behöver en uppsättning bildkontroller för att förbli på skärmen oavsett enhetens zoomnivå? Nuvarande webbläsare varierar i hur de hanterar detta. Den visuella visningsvyn låter webbutvecklare lösa detta genom att placera element i förhållande till det som visas på skärmen.
Layout Viewport
layout Viewport är visningsvyn i vilken webbläsaren visar en webbsida. I huvudsak representerar det vad som är tillgängligt att se, medan den visuella visningsvyn representerar vad som för närvarande är synligt på användarens displayenhet.
Detta blir viktigt, till exempel på mobila enheter, där en nypzoom vanligtvis kan användas för att zooma in och ut på en sajts innehåll. Det renderade dokumentet ändras inte på något sätt, så layoutvyn förblir densamma när användaren justerar zoomnivån. Istället uppdateras den visuella visningsporten för att indikera området på sidan som de kan se.
En pixel är inte en pixel
Under de senaste åren har skärmupplösningarna ökat till pixelstorlekar som är svåra att urskilja för det mänskliga ögat. Till exempel har nyare smartphones i allmänhet en 5-tumsskärm med upplösningar uppåt på 1920—1080 pixlar (~400 dpi). På grund av detta visar många webbläsare sina sidor i en mindre fysisk storlek genom att översätta flera hårdvarupixlar för varje CSS-”pixel”. Till en början orsakade detta problem med användbarhet och läsbarhet på många beröringsoptimerade webbplatser. Peter-Paul Koch skrev om detta problem i En pixel är inte en pixel.
På skärmar med hög dpi kommer sidor med initial-scale=1 effektivt att zoomas in av webbläsare. Texten kommer att vara jämn och skarp i fullskärmsupplösningen. För att även få skarpa bilder på dessa skärmar kan man som webbutvecklare välja att designa bilder – eller hela layouter – i en högre skala än deras slutliga storlek för att sedan skala ner dem med hjälp av CSS- eller viewport-egenskaper. Detta överensstämmer med w3c:s CSS 2.1-specifikation.
Quirkes Mode har skrivit en bra överskådlig artikelserie där de tar upp delar av det jag har skrivit och förklarar hur viewport och width fungerar på olika viktiga element såsom elementet , fönstret och skärmen. Första artikeln riktar sig mot desk top-datorer medan den andra fokuserar på mobilers webbläsare. A tale of two viewports — part one, A tale of two viewports — part two.
Några slutord om viewport
Dina besökare på webbsidan är vana att skrolla webbsidor vertikalt på både stationära och mobila enheter – men inte horisontellt! Tvingas man då skrolla horisontellt eller zooma ut för att se hela webbsidan resulterar det i en dålig användarupplevelse. Här nedan listar jag några bra tips att lägga på minnet.
- Använd inte stora element med fast bredd. Om exempelvis en bild visas med en bredd som är bredare än visningsvyn kan det få denna att skrolla horisontellt. Kom ihåg att justera innehållet så att det passar inom visningsvyns bredd.
- Låt inte heller innehållet förlita sig på en viss visningsbredd för att kunna renderas bra. Eftersom skärmdimensioner och bredd i CSS-pixlar kraftigt varierar mellan olika enheter, bör innehållet inte förlita sig på en viss visningsvybredd för att renderas bra.
- Använd i första hand CSS media queries för att tillämpa olika stilar för små och stora skärmar. Om du ställer in stora absoluta CSS-bredder för sidelement kommer elementet att bli för brett för visningsvyn på en mindre enhet. Överväg istället att använda relativa breddvärden, som bredd: 100 %. Var också försiktig med att använda stora absoluta positioneringsvärden. Det kan göra att elementet faller utanför visningsporten på små enheter.
Söker du en speciell enhets viewports storlek?
Beroende på både webbläsaren och användarens zoominställningar relaterar alla mobila enheter i responsiv webbdesign till en specifik CSS-bredd (känd som ”enhetsbredd”). Hitta storleken på din telefonskärm nedan i denna praktiska lista över visningsvystorlekar per enhet.
CSS Units: px, em, rem, vh, vw och många fler
Många CSS-egenskaper som width, padding, margin, font-size och så vidare kan utgöra en längd. CSS har ett sätt att uttrycka längden på i flera enheter. För vissa CSS-egenskaper är negativa längder tillåtna. En del tar sina avstamp i den typografiska historian såsom point (pt) och pica (pc). Andra är mer kända från vårt vardagsbruk såsom centimeter (cm) och tum (in). Men det finns också en väldigt speciell enhet som enkom uppfanns specifikt för CSS, nämligen px – den så kallade csspixeln.
Det här betyder inte att olika egenskaper behöver olika enheter, för de har ingenting att göra med egenskaper, inte förrän de hanteras som ett media på en skärm och/eller ett papper. Det finns inte heller någon begränsning för vilka enheter som kan användas var. Om en egenskap accepterar ett värde i px (margin: 5px) så accepterar den också ett värde i tum eller centimeter (margin: 1,2 tum; margin: 0,5 cm) och vice versa. Det kan vara bra att veta.
Det finns två typer av längdenheter: absolute och relative. Vi ska börja med att kika på de som har en absolut längd.
Absoluta längdenheter
De så kallade absoluta enheterna (cm, mm, in, pt och pc) betyder detsamma i CSS som överallt annars, men bara om din output har tillräckligt hög upplösning. CSS i sig själv definierar nämligen inte vad ”hög upplösning” betyder. Dock börjar många lågprisskrivare nuförtiden på 300 dpi, och avancerade skärmar på 200 dpi, så gränsen ligger troligtvis någonstans där mittemellan.
| mm | Millimeter |
| in | Inches – 1 inche är detsamma som 1 tum = 25,4 mm = 2.54 cm = 72pt = 6pc = 96px |
| px | Pixel. Pixlar (px) är relativa till visningsenheten. För enheter med låg dpi är 1px en enhetspixel (punkt) på skärmen. För skrivare och högupplösta skärmar innebär 1px flera enhetspixlar. |
| cm |
Centimeter |
| pt |
Points (punkt) – 1 pt är detsamma som 1/72 inch |
| pc |
Pica – 1 pica är detsamma som 12pt (points) |
Relativa längdenheter
| em | Relativt till teckensnittsstorleken på elementet (2em betyder 2 gånger storleken på det aktuella teckensnittet) |
| ex | Relativt x-höjden på det aktuella teckensnittet (används sällan) |
| rem | ”r” står för ”root”: ”root em”, vilket är lika med teckenstorleken som är fixerad till rotelementet (nästan alltid ). :root { font-size: 16px;} ger oss värdet att 1 rem = 16px |
| vw |
Viewport Width. Relativ till 1% av bredden på webbläsarens fönster (viewport). Om viewport är 50cm vid så är 1vw = 0.5cm eller 1/100-del av viewport bredd |
| vh |
Viewport Height. Relativ till 1% av höjden på webbläsarens fönster (viewport). |
| vmin |
Relativ till webbläsarens fönster mindre dimension |
| vmax |
Relativ till webbläsarens fönster större dimension |
| % |
Relativ till föräldrarelementet |
https://www.freecodecamp.org/news/css-unit-guide
Tack för att du har varit med mig ända hit!
[Källor: https://developer.mozilla.org/en-US/docs/Glossary/Viewport, https://www.quirksmode.org/css/units-values/viewport.html]