Se ti stai affacciando adesso al mondo del Web Design sicuramente avrai notato che per identificare la grandezza di un contenitore o di una stringa di testo ci sono delle specifiche unità di misura (CSS Unit, come dal titolo), e sono anche piuttosto sicuro che se hai già letto qualcosa sull’argomento ti saranno rimaste impresse come unità i pixel (px) e le percentuali (%). Come avrai ben intuito, ce ne sono diverse altre, alcune più conosciute e di conseguenza più usate ed altre meno. Ma come fare a scegliere quale CSS Unit fa al caso nostro? Bhe, prima di rispondere a questa domanda, facciamo un passo indietro e suddividiamo tutte le CSS Unit in due grandi famiglie: lunghezze assolute e lunghezze relative (che a loro volta poi, vengono suddivise in altre sotto categorie).
Lunghezze Assolute
Come anticipa già il nome le lunghezze assolute indicano un valore ben definito in origine che in virtù della precisa unità di misura non può cambiare. Prendiamo in esame per esempio, l’unità di misura assoluta pixel (da adesso px per comodità). Un contenitore o una stringa di testo definita in px non può variare al cambiamento di fattori esterni come la risoluzione di uno schermo o la tipologia di dispositivo (in realtà però vedremo più avanti che grazie all’uso delle media queries, questo è possibile, ma ne parliamo un’altra volta). Vediamo adesso un elenco delle lunghezze assolute utilizzate nei CSS3.
cm
È possibile espreimere una lunghezza di un contenitore o di un elemento in centimetri poiché è una misura comparabile anche con gli oggetti reali, quindi usato come supporto per la stampa. È anche possibile convertire i cm in pixel: sullo schermo 1cm = 37.8px .
mm
Per quanto riguarda le CSS unit del sistema metrico, è possibile anche usare i millimetri, e in quanto sottomultiplo dei centimetri viene da da se calcolare anche nella seguente maniera la conversione in px: 1mm = 3.78px .
in
Così come per il sistema metrico decimale c’è come unità di misura per il sistema metrico americano: i pollici. Anche qui il motivo della loro esistanza deriva dal fatto che servono a comparare le lunghezze con gli oggetti reali .Anch’esso utilizzato per la stampa. La conversione è: 1in = 96px .
Lunghezze Relative nel testo
Le contrariamente a quelle assolute, le lunghezze relative stanno a significare chepossono mutare in base afattori esterni al codice, come ad esempio la dimensione dello schermo. Di seguito l’elenco delle misure.
em
Gli em fanno riferimento all’elemento tipografico della lettera maiuscola “M”. Il loro stato cambia con la proprietà font-size ma non con font-family. Funzionano relativamente alla grandezza impostata del contenitore padre. Facendo un esempio, se al contenitore diamo come regola font-size: 18px; allora 1em = 18px, così di conseguenza 0.5em = 9px e 2em = 36px. Il valore di default di un em è 16px.
rem
I rem, detti anche root-em funzionano esattamente come gli em, con la differenza però che sono sempre soggetti alle dimensioni di :root e non a quelle dei contenitori padri. Di default 1rem = 16px.
pt
L’unità pt rappresenta i points, ovvero i punti. Se avete avuto a che fare con programmi di grafica come Adobe Illustrator (o altri software di produzione grafica) vi accorgerete che come unità di default per la definizione della dimensione dei testi. Quindi così come i precedenti cm, mm ed in i pt hanno senso di esistere quando si va a rappresentare qualcosa nella realtà con la stampa. Fisicamente 1pt = 1/72 di in.
pc
Stesso discorso analogo ai pt, va fatto per i pica, abbreviato pc. Fisicamente 1pc = 12pt.
ex
Gli ex ricordano per certi versi gli em poiché sono basati sulla tipografia della lettera minuscola “x”. A differenza degli em però, gli ex cambiano dimensione in base alla dimensione della “x” del font utilizzato. Anche questa unità di misura è poco usata al contrario delle precedenti.
ch
I ch sono una unità di misura in tutto e per tutto uguali ai precedenti ex, con la differenza che la loro dimensione è relativa al carattere “0” (“zero”) del font-family usato. Anche in questo caso
Lunghezze relative allo schermo
La seconda parte delle lunghezze relative è rappresentata dai valori che permettono agli elementi di occupare lo spazio nello schermo. Partiamo da quella sicuramente più diffusa anche ai neofiti.
%
La percentuale, % per comodità, è sicuramente l’unità relativa più conosciuta ed è utilizzata soprattutto per indicare la dimensione di un elemento o di un contenitore ed è soggetta alla dimensione dell’elemento padre. Se per esempio abbiamo un contenitore di 1000px e indentiamo un secondo contenitore con proprietà width:50%; otterremo uno spazio di 500px ma se indentiamo ulteriormente un altro contenitore e diamo come proprietà width:100%; noteremo che lo spazio sarà sempre 500px; allo stesso modo, se diamo al contenitore di terzo livello la proprietà width:50%; otterremo uno spazio occupato di 250px.
vw
L’unità vw sta ad indicare la viewport width, dove ogni punto dell’unità di misura corrisponde da un punto percentuale della larghezza dello schermo: 1vw = 1%. Quindi, se vi state chiedendo in cosa si differisce dall’unità di misura %, qui le percentuali non sono relative ai contenitori parenti o degli elementi. Per fare un esempio, ogni volta che inserisci in la stessa porzione espressa in vw in contenitori annidati, la porzione di pagina occupata è la medesima. Questa soluzione ricorda il principio di funzionamento tra rem e :root.
vh
La CSS unit vh sta ad indicare la viewport height, dove ogni punto dell’unità di misura corrisponde da un punto percentuale dell’altezza dello schermo: 1vh = 1%. Funziona esattamente come il precedente vw, solo che è rapportata all’altezza.
Considerazioni finali
Avrete notato che di CSS unit ce ne sono davvero tante, tuttavia solo alcune sono le più utilizzate, per diversi motivi, uno fra i primi sicuramente le tacite convenzioni (pratica comune), ma anche perché nelle misure assolute, i px sono elementi internazionali non vincolati dal sistema metrico in uso. Per quanto riuguarda le lunghezze relative invece, hanno sicuramente aiutato gli sviluppatori ed i designer nella semplificazione nei processi legati al responsive design.
Hai bisogno di aiuto o di una consunza?
Contattami senza impegno!
Contattami senza impegno!
Classe 1990, Web Designer e consulente di Digital Marketing per professione, curo blog per passione.
Cerco di leggere almeno un libro al mese, ho un debole per l’arte e per la natura.
