Wordpress, PHP, CSS e Javascript tips!

CSS3. L’unita di misura in rem. Come funziona

di  /   /  Nessun commento A- A A+
  Attenzione! Questo post non è stato più aggiornato da almeno 90 giorni. Potrebbe contenere dati, notizie e scripts non aggiornati o non in linea con gli attuali standard!

internet-594148_960_720Le dimensioni nei fogli di stile normalmente si misurano in px, em o percentuale. Tra le tre la più utilizzata è indubbiamente l’unità di misura in px. Tuttavia, onde creare layout elastici, è interessante l’utilizzo delle percentuali e degli em. Si parla in questo caso di unità di misure relative, perché le unità anzidette sono calcolate in base alla dimensione del testo dell’elemento genitore.  Faccio un esempio: se ho un font base di 12px nel body, questo font viene ereditato così com’è dal contenitore “figlio” e dal contenitore “nipote”:

Supponiamo però che per un motivo o per l’altro nel contenitore figlio io voglia fissare una dimensione maggiore. Supponiamo dunque di volere un font pari a 18px, espresso però in em (in tal caso pari a 1.5em):

In questo caso, notate che, rispetto all’esempio in px, il contenitore “nipote” eredita la dimensione del font del contenitore “figlio” e non del body. Ora supponiamo io voglia che il contenitore nipote abbia una dimensione di 10px. In tal caso, il punto di partenza non saranno più i 12px del body, bensì i 18px del contenitore “figlio”.

Con le unità di misura in rem (root em), l’ereditarietà del contenitore padre viene meno e i contenitori figli calcolano le dimensioni relative sulla base della misura determinata nel contenitore di root (html). Conseguentemente:

Il che evita tutta una serie di problemi nello sviluppo dei layout con le dimensioni relative. In particolar modo con Internet Explorer 9.

La compatibilità dell’unità di misura in rem, introdotta recentemente, con i CSS3, è abbastanza buona. In particolare è presente in tutti i browser moderni.

© 2016 Il Jester – Note Legali  Commenta
0Yes0No
Archiviato in: CSS  /  Tags: , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *