Ciao mi chiamo Jacopo! Sono un UX/UI Designer e Front End Developer. Sul mio sito troverai articoli sullo sviluppo Front End

In CSS esistono numerose unità di misura da poter scegliere per specificare i valori delle proprietà.

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 misure quando abbiamo a che fare con monitor con diverse risoluzioni, sopratutto con dispositivi mobile.

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; }

Unità Relative

Le unità relative di lunghezza sono pixel (px) e 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 per i display. I pixel hanno dimensioni fisse, quindi consentono un controllo molto preciso sugli stili di un documento web.

Le percentuali, d'altra parte, sono utile 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à.

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 dei font 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>

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.

Variabili

CSS 3 ha aggiunto il supporto per le variabili per consentire un modo semplice per memorizzare un valore in una singola posizione, che potrà 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 specificati 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%); }

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Ti sei iscritto con successo al blog di Jacopo Kahl - UX/UI Designer e Front End Developer
Bentornato! Hai effettuo l'accesso al blog.
Ottimo! Ti sei appena registrato.
Perfetto! Il tuo account è attivo, ed hai l'accesso a tutti i contenuti.