CSS merne jedinice
Veliki broj atributa CSS-a, kao vrednost prihvata numeričku vrednost koju nazivamo metrika (length). Obično su to atributi kojima se zadaju neke dimenzije, pozicije i sl. Ove vrednosti moraju imati zadatu i mernu jedinicu.
Specijalan oblik metrike su procenti. Mogu se uvesti na velikom broju mesta gde se navodi metrika, ali njihovo značenje zavisi od atributa do atributa.
Inače metričke vrednosti mogu biti celi ili decimalni brojevi. Za neke atribute su definisane čak i negativne vrednosti.
Metrika se mora navesti na tačno određen način - numerička vrednost i jedinica mere se navode bez razmaka. Takođe, merna jedinica mora biti navedena. Ako ne navedemo mernu jedinicu, web browser će ignorisati vrednost atributa (u smislu "ok, treba da bude pedeset, ali čega?").
ISPRAVNO: atribut: 10px;
NEISPRAVNO: atribut: 10 px;
NEISPRAVNO: atribut: 10;
ISPRAVNO: atribut: 0;
Razlikujemo tri grupe mernih jedinica:
- apsolutne - tačno zadate vrednosti
- relativne - u odnosu na nešto
- specijalne
Pri tom se apsolutne i relativne merne jedinice odnose na dimenzije (npr. širinu, visinu...), a specijalne na sve ostalo (trajanje, uglove i sl). Osim toga, razlikujemo ih po mediju za koji su prevashodno namenjene (ekran ili papir).
Noviji web čitači podržavaju i CSS funkciju calc(), kojom je moguće izračunati metriku čak i na osnovu vrednosti zadatih u različitim mernim jedinicama.
Apsolutne merne jedinice
| px | piksel (pixel), označava tačkicu na ekranu, dok je u štampi (i na ekranima veoma visoke rezolucije) 1px = 1/96 inča |
| pt | point najčešće se koristi za zadavanje veličina slova (ovo je jedinica mere koja odgovara veličini slova u Word-u). Inače, 1pt = 1/72 inča. |
| pc | pika (pica), jedinica mere koja, kao i point, potiče iz tipografije. Ređe se koristi, a nama je bitno da znamo da je 1pc = 12pt. |
| mm | milimetar, retko se zadaju za stilove koji se prikazuju na ekranu, ali su korisni kada se dokument priprema za štampanje |
| cm | centimetar - za njih važi isto što i za milimetre. Kao što znamo 1cm = 10mm. |
| in | inč - još jedna jedinica mere namenjena štampi - 1in = 2.54cm. Uobičajena rezolucija ekrana je 72dpi, što bi značilo da je 1 inč na ekranu u stvari 72px |
Apsolutne merne jedinice znače da će zadate veličine biti prikazane tačno kako je navedeno, a ne "u odnosu na nešto". Obično i polazimo od ovakvih jedinica za neke osnovne elemente, a kasnije "gradimo" druge veličine relativno u odnosu na njih.
Primeri za apsolutne merne jedinice
font-size: 18pt; /* veličina slova od 18 pointa */
font-size: 1pc; /* 1 pika je veličina slova od 12pt */
margin-top: 15mm; /* gornja margina od 15mm */
margin: 2.5cm; /* sve margine postavljene na 2 i po cm */
left: -30px; /* leva ivica bloka pomerena ulevo */
Relativne merne jedinice
| em | element - veličina u odnosu na veličinu fonta elementa. Ako je font veličine 12pt, onda će 2em predstavljati veličinu od 24pt. |
| rem | osnovni element (root element) - relativna mera u odnosu na veličinu fonta koja važi za osnovni element, odnosno <body>. |
| ex | x visina, još jedna relativna mera u odnosu na veličinu slova. 1ex je jednak visini malog slova "x" (što je otprilike polovina veličine fonta). |
| ch | 0 širina, i ovo je relativna mera u odnosu na veličinu fonta, 1ch je jednak širini znaka "0" (nula) u trenutnom fontu, što bi bila prosečna širina slova. |
| vw | širina prozora (viewport width) - veličina u odnosu na širinu prozora/ekrana korisnika, 1vw = 1% širine prozora. |
| vh | visina prozora (viewport height) - veličina u odnosu na visinu prozora korisnika, 1vh = 1% visine prozora. |
| vmin | manja dimenzija (viewport minimum) - veličina u odnosu na manju dimenziju ekrana korisnika, 1vmin = 1% širine ili visine ekrana, zavisno šta je manje. |
| vmax | veća dimenzija (viewport maximum) - veličina u odnosu na veću dimenziju ekrana korisnika, 1vmax = 1% širine ili visine ekrana, zavisno šta je veće. |
Relativne merne jedinice su izuzetno korisne kod kreiranja responzivnog dizajna (responsive design), odnosno stranica koje se lako prilagođavaju svim rezolucijama i ekranima. Ovo je "vruća tema" još od trenutka kada mobilni telefoni postaju uređaji kojim se može komforno koristiti internet.
Ovde naročito ističemo em i rem jedinice, kao preporučljive za postavljanje dimenzija teksta, ali i drugih elemenata. Na taj način se cela stranica automatski "skalira" prema potrebi.
Jedinice koje su relativne u odnosu na prozor (viewport) mogu da nam budu posebno korisne ako nam treba stroga kontrola dimenzija elemenata, posebno kada kreiramo web aplikacije. Na primer kvadrat veličine 100vmin (100% manje dimenzije prozora) će se raširiti koliko god može u prozoru web čitača, ali tako da uvek bude vidljiv u celini, nebitno da li se ekran rotira u uspravan ili vodoravan položaj.
Procenti
Posebna relativna jedinica mere koja se može zadati u većini slučajeva je procenat:
| % | procenti - ne spadaju zaista u jedinice mere, ali mogu se koristiti skoro svuda gde se zadaje neka metrika. |
Kod procenata je zeznuto što uvek moramo da se zapitamo - "relativno u odnosu na šta"? Svaki atribut ima svoje pravilo prema čemu se određuju procenti.
Na primer - ako zadamo širinu width, kao procentualnu vrednost, ona će sasvim logično biti izračunata kao procenat od širine nadređenog blok elementa. Isto tako, ako zadamo procenat kao visinu elementa, u atributu height, visina će biti računata kao procenat od visine nadređenog bloka. Logično je i ako procente zadamo kao veličinu fonta u font-size, gde dobijamo veličinu teksta relativnu u odnosu na veličinu fonta nadređenog elementa.
Međutim, ako zadamo procenat kao vrednost margine margin ili unutrašnje margine padding - vrednost neće biti relativna u odnosu na nadređenu marginu. I ovi procenti se računaju u odnosu na širinu nadređenog elementa. To važi i za vertikalne margine, tj. one "odozgo" i "odozdo" - znači čak i npr. padding-top se računa u odnosu na širinu nadređenog elementa. Iako deluje besmisleno - ima neke logike. Ako npr. sa svih strana zadamo podjednak padding u procentima, očekivaćemo da on bude svuda zaista jednak, a to je moguće samo ako su svi relativni u odnosu na istu stvar.
Primeri za relativne merne jedinice
font-size: 2em; /* duplo veća slova od trenutnih */
font-size: 0.5em; /* polovina trenutne veličine slova */
font-size: 1.2em; /* malo veća slova (20% veća) */
font-size: 0.9em; /* malo manja slova (10% manja) */
font-size: 1.5rem; /* 50% veća slova od veličine slova za body element */
width: 50%; /* polovina širine nadređenog bloka */
width: 50vw; /* polovina širine prozora */
width: 90vmin; /* 90% od manje dimenzije prozora */
width: 5ch; /* širina 5 prosečnih slova u fontu */
height: 3ex; /* visina 3 prosečna mala slova u fontu */
Specijalne merne jedinice
| s | sekunde - za tranzicije koje traju neko određeno vreme. |
| ms | milisekunde - za preciznije određivanje trajanja - 1s = 1000ms. |
| deg | stepeni (degree) ova jedinica se koristi kada se vrši rotacija. Pun krug ima 360deg. Pozitivne vrednosti predstavljaju rotaciju u smeru kazaljke na satu, a negativne u suprotnom. |
Postoje i specijalne jedinice mere, koje se koriste u posebne svrhe i zadaju se samo za određene atribute:
Primeri za specijalne merne jedinice
transition-duration: 2s; /* tranzicija traje dve sekunde */
transition-duration: 0.5s; /* tranzicija traje pola sekunde */
transition-duration: 1500ms; /* tranzicija traje sekundu i po */
transform: rotate(90deg); /* rotacija od 90 stepeni */
Funkcija calc()
Ova funkcija nam rešava jedan veliki problem! Pomoću nje možemo "izračunati" veličinu na osnovu vrednosti izraženih u različitim mernim jedinicama. Šta ovo znači? Što se više bavimo web dizajnom i što više ulazimo u CSS, sve više ćemo nailaziti na situacije u kojima nam treba neka dimenzija za koju znamo da je sastavljena iz npr. procentualne vrednosti i još nekoiliko piksela pride. Sami, nemamo nikakvu šansu da ovo izračunamo unapred, ali zadavanjem tih vrednosti u funkciji calc(), nateraćemo web čitač da to izračuna umesto nas, na licu mesta.
Funkcija calc() se zadaje na mestu metrike u CSS deklaraciji, a kao parametar prima neki aritmetički izraz:
atribut: calc(izraz);
U izrazu učestvuju operandi koji mogu biti metrike ili obične numeričke vrednosti, i operatori koji mogu biti matematičke operacije. U izrazu možemo koristiti i zagrade.
Operatori koje možemo koristiti su:
| + | sabiranje (obavezni razmaci oko operatora) |
| - | oduzimanje (obavezni razmaci oko operatora) |
| * | množenje (jedan od operanda mora biti običan numerik) |
| / | deljenje (delilac mora biti običan numerik) |
Kao operand u izrazu je moguće navesti i samu funkciju calc(), s tim što se ona računa kao da je u pitanju običan izraz u zagradama.
Primeri korišćenja funkcije calc()
U prvom primeru pokazujemo kako da izjednačimo ukupnu širinu dva bloka, ako je širina sadržaja prvog bloka data u procentima, a border u em-ovima, dok je border drugog bloka zadat u pikselima.
.prvi {
width: 40%;
border: 1em solid black;
}
.drugi {
width: calc(40% + 2em - 4px);
border: 2px solid black;
}
Ako se pitate zašto su u funkciji calc() metrike duplirane (2em umesto 1em i 4px umesto 2px), setite se da imamo bordere sa obe strane elementa - dakle to nema veze sa funkcijom calc().
Drugi primer demostrira slučaj kada želimo da napravimo animaciju (putem tranzicije) bloka od leve do desne ivice web stranice. U ovom slučaju moramo da koristimo npr. samo atribut left i moramo izračunati koliko mora biti "daleko" od desne ivice.
.blok {
width: 40%;
padding: 1em;
border: 5px solid black;
position: fixed;
left: 0;
top: 0;
transition-property: left;
transition-duration: 2s;
}
.anim {
left: calc(100% - (40% + 2em + 10px));
}
Nije bilo jako neophodno ali smo ovde demonstrirali i upotrebu zagrada.
Dobar broj ovih problema nam je skinut s vrata uvođenjem CSS atributa box-sizing, ali ipak ostaju problemi koje bismo jako teško rešili bez upotrebe funkcije calc().
- Mozilla Developer Network, calc()