Indice
- Unità di lunghezza Assolute
- Unità Tipografiche
- Unità Relative
- Ulteriori unità relative
- Unità viewport
- Variabili
- Conclusione
In CSS esistono numerose unità di misura da poter scegliere per specificare i valori delle proprietà.
1. Unità di lunghezza Assolute
Le unità assolute di lunghezza sono centimetro (cm), millimetro (mm) e pollici (in). Sebbene queste unità abbiano lo stesso aspetto, indipendentemente dalla risoluzione dello schermo, può capitare che i browser non riescano sempre a rispettare la visualizzazione corretta.
.cm { font-size: 1cm; }
.mm { font-size: 1mm; }
.in { font-size: 1in; }
Queste unità di misura sono utili soprattutto quando le dimensioni del supporto di output sono note a priori, ad esempio per il contenuto che verrà stampato su carta.
Non è consigliato utilizzare queste unità di misura quando abbiamo a che fare con monitor con diverse risoluzioni, soprattutto con dispositivi mobile.
2. Unità Tipografiche
I punti (pt) e i pica (pc) sono unità tipografiche. Per definizione ci sono 72 punti per pollice e 12 punti per una pica. Come le unità assolute, le unità tipografiche sono più utili per i fogli di stampa che non per l'utilizzo su schermo.
.point { font-size: 1pt; }
.pica { font-size: 1pc; }
3. Unità Relative
Le unità relative di lunghezza sono i pixel (px) e la percentuale (%). Una percentuale è un'unità proporzionale al valore del genitore di quella proprietà; un pixel è relativo al pixel fisico sul dispositivo di visualizzazione utilizzato (i pixel dei monitor).
.pixel { font-size: 1px; }
.percent { font-size: 1%; }
I Pixel e le percentuali sono due delle unità più utili in CSS. I pixel hanno dimensioni fisse, quindi consentono un controllo molto preciso sugli stili di un documento web.
Le percentuali, d'altra parte, sono utili per definire le dimensioni dei caratteri per il contenuto del testo scalabile, che risulta molto importante quando parliamo di dispositivi con schermi piccoli e per scopi legati all'accessibilità.
4. Ulteriori unità relative
Due ulteriori misure relative sono em-height (em) e ex-height (ex).
Em-height è una misura relativa uguale alla grandezza già assegnata al carattere. ex-height invece è circa la metà della dimensione del carattere.
.ex { font-size: 1ex; }
.em { font-size: 1em; }
em-height è una buona unità relativa che è comunemente utilizzata per impostare la dimensione del carattere del testo del documento Web. Questa unità rispetta la scelta dell'utente per quanto riguarda la dimensione del carattere nel proprio browser e risulta essere di più facile lettura sui piccoli schermi. Bisogna però riconoscere che questa unità di misura non è molto utilizzata.
CSS3 ha introdotto altre due unità di misura: i rem e i ch. L'unità rem (root em-height) è una misura relativa basata sulla grandezza dei font presenti nell'elemento root (<html>), che di base corrisponde a 16px per molti browser.
Può essere usata al posto di em per prevenire variazioni nella grandezza dei font soggetta ai cambiamenti nelle grandezze degli elementi antenati.
html { font-size: 16px; }
.rem { font-size: 1rem; }
L'unità di carattere (ch) misura la larghezza del carattere zero (0) per il font dell'elemento. Può essere utile per definire la larghezza di un box contenente del testo, poiché l'unità ch corrisponde approssimativamente al numero di caratteri che possono riempiono il box.
/* Stessa largherzza nei div, 5ch uguale a 5 zeri */
<div style="width: 5ch;"></div>
<div>00000</div>
5. Unità viewport
La larghezza viewport (vw) e l'altezza viewport (vh) sono due unità di misura che permettono agli elementi di avere una dimensione relativa alla propria viewport, cioè la porzione visibile all'utente del documento.
Ogni unità rappresenta una percentuale della propria viewport.
width: 50vw; /* 50% della larghezza della viewport */
height: 25vh; /* 25% dell'altezza della viewport */
Esistono anche due unità di misura addizionali relative alle viewport: vmin e vmax, che restituiscono il minimo e il massimo del valore delle dimensioni della viewport.
width: 1vmin; /* 1vh o 1vw, che è il più piccolo */
height: 1vmax; /* 1vh o 1vw, che è il più largo */
È possibile impostare la lunghezza usando i decimali. Alcune proprietà consentono anche valori negativi per lunghezza.
p { font-size: 0.394in; } /* valore decimale */
p { margin: -1px; } /* valore negativo */
Si noti che una regola non funziona se c'è uno spazio prima dell'unità o se non viene specificata l'unità, ad eccezione del valore zero. Includere un'unità dopo lo zero è facoltativo, ma è buona norma ometterlo.
p { font-size: 1ex; } /* corretto */
p { font-size: 0; } /* corretto */
p { font-size: 0ex; } /* corretto */
p { font-size: 1 ex; } /* non corretto */
p { font-size: 1; } /* non corretto */
Ogni volta che una dichiarazione CSS contiene un errore, viene ignorata dal
browser. Qualsiasi altra dichiarazione senza errori nella propria regola rimane valida e viene stampata a monitor.
6. Variabili
CSS 3 ha aggiunto il supporto alle variabili per consentire un modo semplice di memorizzare un valore in una singola posizione, che potrà poi essere riutilizzata in tutto il foglio di stile.
I nomi delle variabili iniziano con due trattini (--) e fanno distinzione tra maiuscole e minuscole. Possono essere specificate all'interno di un selettore per limitarne l'ambito o all'interno del selettore html per consentire alle variabili di fare riferimento a qualsiasi selettore all'interno del foglio di stile.
html { --bg-color: black; }
La funzione var viene utilizzata per inserire il valore della variabile, che in questo esempio applica uno sfondo nero agli elementi che utilizzano questa classe.
Un ulteriore vantaggio delle variabili è che forniscono un valore più leggibile e semanticamente significativo anche per chi legge il codice.
.content { background-color: var(--bg-color); }
Un secondo parametro può essere passato alla funzione var. Questo valore
verrà utilizzato se la variabile non è disponibile, ad esempio se non è ancora stata
definita.
.content { width: var(--content-width, 80%); }
7. Conclusione
In questo articolo abbiamo visto quali sono le unità di misura in CSS e come applicarle all'interno dei nostri fogli di stile.
Il mio consiglio è quello di cercare di mantenere una consistenza nella scelta delle unità di misura da applicare all'interno dei CSS.
