Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Confused about rem and em?” di Jeremy Church. L’unità di misura rem può creare confusione, specialmente senza una solida conoscenza degli em e dei pixel.

Unità di misura relative

Di seguito, l’esempio dimostra come ogni child nidificato assume che il parent è 1em (100%). Così i child ereditano la dimensione di font size in relazione alla dimensione del font del proprio parent.

I valori in em ereditano dai loro parents

See the Pen rCcIh by Jeremy Church (@jeremychurch) on CodePen.

I valori in pixel non ereditano

See the Pen dlyqw by Jeremy Church (@jeremychurch) on CodePen.

Anche se il valore resta 0.773em, l’attuale font size viene calcolato al 77.3% del suo parent, che a sua volta viene ricalcolato sempre rispetto al suo parent. Questo comportamento continua lungo l’albero del DOM ogni volta che un parent ha un font-size definito.

Nell’esempio, diversi elementi, ognuno con un font size, sono nidificati per creare un effetto visuale. Potrai notare che non è una buona pratica da adottare, può infatti generare risultati indesiderati. Tuttavia, non dovresti preoccuparti se il tuo CSS e il tuo markup sono pronti a cominciare.

Salva vite con gli em

Bene, forse non salverai vite, forse salverai solo linee… di codice. I seguenti esempi fanno esattamente la stessa cosa; aggiornano il valore di font size e di padding all’interno di una media query. I valori iniziali sono calcolati incrementando di 1em (16px) con un rapporto di 1:1.2

/* Gli em scalano aggiornando un solo valore */
html {font-size: 1em;}
h1 {font-size: 2.074em;}
h2 {font-size: 1.728em;}
h3 {font-size: 1.44em;}
h4 {font-size: 1.2em;}
small {font-size: 0.833em;}
.box {padding: 1.25em;}

@media screen and (min-width: 1400px){
    html {font-size: 1.25em; }
}
/* Per i pixel bisogna riaggiornare tutte le occorrenze */
html {font-size: 16px;}
h1 {font-size: 33px;}
h2 {font-size: 28px;}
h3 {font-size: 23px;}
h4 {font-size: 19px;}
small {font-size: 13px;}
.box {padding: 20px;}

@media screen and (min-width: 1400px){
    html {font-size: 20px;}
    h1 {font-size: 41px;}
    h2 {font-size: 35px;}
    h3 {font-size: 29px;}
    h4 {font-size: 24px;}
    small {font-size: 17px;}
    .box {padding: 25px;}
}

Nel primo esempio c’è un solo valore in em da sovrascrivere nel media query, poiché gli em ereditano e scalano in relazione al font size del loro parent (html in questo caso).

Il codice quasi raddoppia quando adoperiamo i pixel, perché ogni valore deve essere ricalcolato e ridefinito nel media query.

Rem: Root em

Mentre em è relativo al font size del suo diretto o più vicino parent, rem è relativo al font size dell’html (root). Mi piace pensare a lui come a un reset. Se un foglio di stile è costruito in maniera modulare, teoricamente il rem non dovrebbe essere necessario molto spesso, ma solo a volte.

Per esempio, se stai cercando di creare spaziature coerenti senza markup aggiuntivo, il rem può essere usato per definire padding e margini.

Em scalerà troppo padding e margini

See the Pen AlxHk by Jeremy Church (@jeremychurch) on CodePen.

Usa rem per padding e margini coerenti

See the Pen qjEBs by Jeremy Church (@jeremychurch) on CodePen.

Anche i pixel possono essere usati per creare padding e margini coerenti, ma non riescono ad essere ugualmente performanti come em e rem durante l’utilizzo delle media queries.

Conclusioni

Io uso em per quasi tutto, rem occasionalmente per padding e margini, ma senza esagerare, e i pixel qualche volta per i bordi.

Se una sidebar ha un font size più piccolo, allora mi aspetto che tutti i suoi nodi figli si riducano proporzionalmente senza che debba calcolare e ridefinire ogni singolo selettore.

Faccio fatica a pensare a delle buone ragioni per usare rem come unità di misura per il font size, ma sono sicuro che ci sono delle eccezioni. Se sto cercando di ridefinire un font size con rem, è probabilmente un segno che il mio CSS non è molto modulare.

Resources

Il mio convertitore di em preferito è pxtoem.com. In aggiunta al convertitore, è presente una tabella molto comoda da consultare, applicabile tranquillamente anche ai rem, bisogna solo ricordarsi che la relazione va fatta con il font size della root.

  • Luca B

    Conciso e chiaro, grazie!

  • Sognox77

    Ciao, sto cercando di usare gli em… son partito dando un dimensione
    font al body di 13px… e poi ho usato gli em in tutti gli elementi
    calcolandomi la conversione px->em per ogni elemento. (http://pxtoem.com/)

    La questione è che mi sono accorto che gli em fanno riferimento al
    primo elemento genitore in cui è definita la dimensione font… non
    fanno riferimento sempre e solo al body…. non c’è la possibilità di
    farlo puntare solo al font base del body?

    faccio un esempio di quel che io considero un problema…

    codice:


    font body 13 px…

    div principale.. voglio un font di 16 px e quindi metto 1.231em

    in un div interno a quello principale vorrei un font di 18px… se facessi il calcolo in base al body risulterebbe 1.385em

    MA è sbagliato.. perchè l’em prende come base il primo genitore.. quindi il div principale con i suoi 1.231em (16px)

    di conseguenza il valore giusto per avere 18px di font nel div interno è 1.125em

    Da qui si capisce che diventa… un casino calcolarsi gli em per tutti gli elementi…

    bisogna ricordarsi qual’è il primo elemento genitore dove è stato settata una dimensione font…

    bisogna ricordarsi che dimensione font in px ha quell’elemento.. perchè leggere 1.385em non chiarisce certo che dimensione sia..

    sbaglio qualcosa?

    non c’è la possibilità di far puntare tutti gli em… allo stesso font genitore principale.. cioè quello del body?

    oltretutto se gli em si riferiscono al primo genitore.. vuole dire che una classe CSS vale solo per quell’elemento…

    non posso creare uan classe generica tipo

    .font16px {

    font-size: 1.231em;

    }

    e applicarla in giro nel doc htlm sui vari elementi.. perchè quegli 1.231em non saranno sempre 16px ma dipenderà dal primo contenitore che avrà un font-size settato…

  • ronnie

    l’articolo è veramente incomprensibile, detto da uno che usa attivamente em e mediaquery in sostituzione dei pixel.

    • laboratorioCSS

      Siamo veramente addolorati, speriamo che tu possa trovare altrove la verità. Have a good day!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github