Introducere în Web Development

Anumite proprietăți CSS setează o dimensiune. De exemplu: width, height, margin, padding, border-width, font-size, ș.a.

Dimensiunea se dă printr-un număr întreg sau cu virgulă. Fiindcă CSS se bazează pe limba Engleză, în loc de virgulă se folosește punct. De exemplu: 3.14.

După dimensiune, se pune imediat unitatea de măsură. Azi învățăm cele mai folosite unități de măsură în CSS.

Unități pentru web

Pixeli

                    width: 100px;
                

În mod tradițional, un pixel în CSS ar trebui să reprezinte un pixel pe afișat pe ecran.
Însă odată cu popularizarea ecranelor mici care au rezoluții mari, precum ecranele telefoanelor mobile, un pixel în CSS poate să reprezinte mai mulți pixeli reali.

Raportul dintre pixelii reali și pixelii CSS se numește DPR (Display Pixel Ratio), iar în Developer Tools, folosind funcția de emulare se poate testa o pagină folosind diferite valori pentru DPR.

Așadar, chiar dacă telefonul tău are rezoluție de 1080x1920, dacă are un DPR 3, rezoluția cu care lucrăm în CSS va fi 360x640. Browserul va ști să ajusteze valorile corespunzător.

EM

                    padding: 1em 2em;
                

Folosirea de pixeli nu este recomandată, din motive de accesibilitate. Unii oameni vor avea nevoie să schimbe dimensiunile fontului, ceea ce ne poate strica design-ul. În schimb, se pot folosi unități legate de font, precum em.

1em reprezintă dimensiunea fontului în elementul curent. Dacă elementul curent nu are explicit setată o dimensiune a fontului, se caută la elementul părinte, apoi mai sus, până se găsește ceva.

Eu folosesc em foarte rar. Uneori poate pentru a dimensiona butoanele în funcție de font.

REM

                    height: 10rem;
                

Asemănător cu em, rem se referă la dimensiunea fontului, însă nu fontul elementului selectat, ci la fontul de bază al documentului. Asta înseamnă că 1rem va avea aceeași dimensiune oriunde ar fi folosit.

Dacă avem un design cu mărimi date în pixeli, putem să transformăm în rem împărțind valoarea la 16. De exemplu, 12px înseamnă 0.75rem

CH

O altă unitate de măsură bazată pe font, dar mai puțin folosită de programatori este ch. 1ch reprezintă de obicei lățimea caracterului 0 (Zero) în fontul folosit.

Mie îmi place să folosesc ch cu elementele ce conțin mult text, pentru că înseamnă că va apărea un număr aproape fix de caractere indiferent de font-ul folosit.

Viewport (vh vw vmax vmin)

O familie relativ nouă de unități de măsură o reprezintă cele legate de dimensiunea ferestrei în care este afișată pagina (viewport).

1vw reprezintă 1% din lățimea (width) viewport-ului.
1vh reprezintă 1% din înălțimea (height) viewport-ului.

Așadar, dacă vrem să avem un element care se întinde pe tot ecranul, ne trebuie:

                    width: 100vw;
height: 100vh;
                

1vmin reprezintă 1% din cea mai mică latură a viewport-ului. Adică minimul dintre 1vh și 1vw.

Similar, 1vmax reprezintă 1% din cea mai mare latură a viewport-ului.

                    padding: 1vmin;
                

Atunci când fereastra se redimensionează, elementele care au setate dimensiuni în funcție de viewport vor fi automat modificate.

Procente

                    font-size: 150%;
                

Unele proprietăți permit folosirea de procente ca dimensiuni. Însă ce înseamnă 1% diferă de la caz la caz. Recomand să eviți procentele cât poți.

Unități pentru print

Dacă ajungi vreodată să construiești o pagină ce va fi imprimată, precum un ziar, revistă, broșură, ș.a., și cumva vei folosi CSS pentru asta, poți folosi dimensiuni fizice:

Nu e recomandat să folosești aceste unități atunci când pagina ta va apărea pe un ecran, pentru că nu ai garanție că valoarea dată de tine va fi cea calculată de browser.

Dimensiuni calculate: calc()

Uneori, o simplă dimensiune nu este suficientă. Avem la dispoziție o funcție specială prin care putem face operațiuni între unități de măsură diferite. Se pot folosi operații de adunare (+), scădere (-), înmulțire (*) și împărțire (/).

În trecut se foloseau pre-procesoare de CSS (precum Sass) pentru ceva similar, dar limitarea acolo era că se putea folosi o singură unitate de măsură într-un calcul.

Această limitare nu mai există când folosim calc. Putem combina diferite unități de măsură.

                    .full-screen {
  height: calc(100vh - 2rem);
}