Enote v CSS

Pri pisanju CSS pogosto uporabljamo različne številčne vrednosti in enote. Te določajo velikost pisave, širino, višino, razmike, odmike in druge mere. Za pravilno uporabo je pomembno, da poznamo pravilen zapis enot ter razliko med absolutnimi, relativnimi in odstotkovnimi vrednostmi.

Pomni: V CSS med številčno vrednostjo in enoto ne pišemo presledka. Pravilno je 23pt, ne pa 23 pt.

Osnovna pravila

Mere v CSS pišemo brez presledka med številčno vrednostjo in enoto. Tako je zapis 23 pt napačen, pravilno pa je 23pt. Za vrednost 0 enote navadno ni treba pisati, zato lahko napišemo samo 0. Vrednosti so lahko cela ali realna števila, po potrebi pa lahko pred njimi zapišemo tudi predznak + ali -.

Enote v CSS so lahko absolutne ali relativne. Absolutne enote so vezane na fizične merske enote ali na referenčni piksel, relativne enote pa so odvisne od drugih lastnosti, na primer od velikosti pisave ali od velikosti vidnega območja brskalnika.

Pri sodobnih zaslonih moramo razlikovati med fizičnimi piksli in CSS piksli. Fizični piksel je dejanska najmanjša točka na zaslonu naprave, CSS piksel pa je logična merska enota, ki jo uporablja brskalnik pri prikazu spletne strani.

Na sodobnih mobilnih napravah je lahko več fizičnih pikslov uporabljenih za prikaz enega samega CSS piksla. Zato vrednost 1px v CSS ne pomeni nujno enega fizičnega piksla na zaslonu, ampak eno referenčno enoto, ki omogoča bolj enoten prikaz na različnih napravah.

Zaradi tega so mere v CSS na telefonih in tablicah lahko videti podobno velike kot na drugih napravah, čeprav imajo zasloni teh naprav pogosto veliko večjo gostoto fizičnih pikslov.

Pri sodobnem oblikovanju spletnih strani se pogosto uporabljajo relativne enote, ker omogočajo bolj prilagodljiv prikaz na različnih zaslonih in pri različnih velikostih pisave.

Primerjave

Absolutne in relativne enote

Absolutne enote imajo določeno referenčno velikost, relativne enote pa svojo velikost določijo glede na drug podatek.

Vrsta enote	Značilnost
absolutne enote	njihova velikost je vezana na fizične merske enote ali referenčni piksel
relativne enote	njihova velikost je odvisna od druge lastnosti, na primer od velikosti pisave ali velikosti vidnega območja

Relativne enote in odstotki

Odstotki so posebna vrsta vrednosti. Vedno pomenijo vrednost glede na neko referenčno osnovo, ki je odvisna od lastnosti, pri kateri jih uporabimo. Pogosto jih uporabljamo pri širini, višini, velikosti pisave in razmikih.

Pozor: Enaka odstotkovna vrednost ne pomeni vedno iste stvari. Pomen odstotka je odvisen od lastnosti, pri kateri ga uporabimo.

Zgledi

Absolutne enote

cm: centimetri
mm: milimetri
Q: četrtina milimetra
in: palci
pt: tipografske točke
pc: pike
px: piksel oziroma referenčni piksel

Relativne enote

em: glede na velikost trenutne pisave
rem: glede na velikost pisave korenskega elementa
ex: približna višina male črke x v trenutni pisavi
ch: približna širina znaka 0 v trenutni pisavi
lh: glede na višino vrstice
vw: 1 % širine vidnega območja
vh: 1 % višine vidnega območja
vmin: 1 % manjše mere vidnega območja
vmax: 1 % večje mere vidnega območja

Odstotki

Odstotek zapišemo kot število, ki mu brez vmesnega presledka sledi znak %. Primeri pravilnega zapisa:

110%
0.90%
.75%
-50%

Primeri pravilnega zapisa mer:

font-size: 1.2em;
width: 75%;
margin-top: 0;
height: 50vh;

Priporočila

Pri zapisovanju mer vedno piši enoto brez presledka za številom.
Za vrednost 0 enote navadno ni treba navajati.
Pri prilagodljivem oblikovanju pogosto raje uporabi relativne enote ali odstotke.
Pred uporabo odstotkov preveri, na katero referenčno osnovo se nanašajo.

Pogoste napake

Presledek med številom in enoto, na primer 12 px.
Napačna predstava, da vse enote pomenijo absolutno velikost.
Uporaba odstotkov brez razumevanja, glede na kaj se izračunajo.
Navajanje enote pri vrednosti 0, če to ni potrebno.

Pri CSS ni pomembna samo številčna vrednost, ampak tudi pravilna izbira enote. Napačno izbrana enota lahko povzroči, da element ni prikazan tako, kot smo pričakovali.

Nazaj

Naprej