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

Questo post è più vecchio di 3 anni. Potrebbe contenere informazioni non aggiornate.

Le 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:

<html>
<body style=font-size:12px>
    Questo testo avrà la dimensione di 12px;
    <div class=figlio>
       Questo testo avrà la dimensione di 12px
       <div class=nipote>
          Questo testo avrà la dimensione di 12px
       </div>
    </div>
</body>
</html>

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):

<html>
<body style=font-size:12px>
    Questo testo avrà la dimensione di 12px;
    <div class=figlio style=font-size: 1.5em;>
       Questo testo avrà la dimensione di 12px * 1.5em = 18px
       <div class=nipote>
         Questo test avrà la dimensione di 1.5em = 18px;
       </div>
    </div>
</body>
</html>

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.

<html>
<body style=font-size:12px>
    Questo testo avrà la dimensione di 12px;
    <div class=figlio style=font-size: 1.5em;>
       Questo testo avrà la dimensione di 12px * 1.5em = 18px
       <div class=nipote style=font-size: .55em>
         Questo test avrà la dimensione di 10px / (12px * 1.5em) = .55em = 10px
       </div>
    </div>
</body>
<html>

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:

<html style=font-size:12px;>
<body>
    Questo testo avrà la dimensione di 12px;
    <div class=figlio style=font-size: 1.5rem;>
       Questo testo avrà la dimensione di 12px * 1.5rem = 18px
       <div class=nipote style=font-size: .83rem;>
         Questo test avrà la dimensione di 10px / 12px = .83rem = 10px
       </div>
    </div>
</body>
<html>

Il che evita tutta una serie di problemi nello sviluppo dei layout con le dimensioni relative.

Ultime dal blog

Visualizzare i commenti recenti, con avatar, usando uno shortcode

Pubblicato da Il Jester il 20 Giugno 2024

Creazione di un tema figlio su Wordpress e Classicpress

Pubblicato da Il Jester il 19 Giugno 2024

Usare il markdown per scrivere post su Wordpress e Classicpress

Pubblicato da Il Jester il 18 Giugno 2024

Gestire la query string di un url con Javascript

Pubblicato da Il Jester il 16 Giugno 2024

Sicurezza. Disabilitare XMLRPC sul vostro sito Wordpress

Pubblicato da Il Jester il 15 Giugno 2024

Gravatar. Un plugin per tutelare la privacy

Pubblicato da Il Jester il 14 Giugno 2024