Rem in CSS: comprensione e utilizzo di rem

Cosa sono le unità rem?

Potresti aver incontrato il termine “Rem ” mentre ascolti la radio o il tuo lettore musicale. A differenza delle loro controparti musicali, che prendono il nome dal “Rapid Eye Movement” durante il sonno profondo, in CSS rem sta per “root em”. Non ti fanno perdere la religione né credono in un uomo sulla luna. Quello che possono fare è aiutarti a raggiungere un design armonioso ed equilibrato.

Secondo le specifiche W3C la definizione per un’unità rem è: uguale al valore calcolato della dimensione del carattere nell’elemento radice. Se specificato nella proprietà font-size dell’elemento radice, le unità rem fanno riferimento al valore iniziale della proprietà.

Ciò significa che 1rem è uguale alla dimensione del carattere dell’elemento html (che per la maggior parte dei browser ha un valore predefinito di 16px).

Unità Rem vs Unità Em

problema principale con le unità em è che sono relative alla dimensione del carattere del proprio elemento. Come tali sono a cascata e possono causare risultati imprevisti. Consideriamo l’esempio seguente, in cui vogliamo che gli elenchi abbiano una dimensione del carattere di 12px, nel caso in cui la dimensione del carattere radice sia la 16px predefinita:

font-size: 100%;
}
ul {
font-size: 0.75em;
}

Se abbiamo un elenco annidato all’interno di un altro elenco, la dimensione del carattere dell’elenco interno sarà del 75% della dimensione del suo padre (in questo caso 9px). Possiamo ancora superare questo problema usando qualcosa in questo senso:

ul ul {
font-size: 1em;
}

Tuttavia dobbiamo ancora prestare molta attenzione alle situazioni in cui la nidificazione diventa ancora più profonda. Con le unità rem, le cose sono più semplici:

html {
font-size: 100%;
ul {
font-size: 0.75rem;
}
}

Poiché viene fatto riferimento a tutte le dimensioni dalla dimensione del carattere radice, non è più necessario coprire i casi di nidificazione in dichiarazioni separate.

Ridimensionamento dei tipi di carattere con Unità Rem

Uno dei pionieri dell’utilizzo di unità rem per il dimensionamento dei caratteri è Jonathan Snook con il suo articolo Font sizing with REM, nel maggio 2011. Come molti altri sviluppatori CSS, ha dovuto affrontare i problemi che le unità em portano in layout complessi.

A quel tempo, le versioni precedenti di IE avevano ancora grandi quote di mercato e non erano in grado di ingrandire il testo che era dimensionato con i pixel. Tuttavia, come abbiamo visto in precedenza, è molto facile perdere traccia della nidificazione e ottenere risultati inaspettati con le unità em.

Il problema principale con l’utilizzo di rem
per il ridimensionamento dei tipi di carattere è che i valori sono in qualche modo difficili da usare. Vediamo un esempio di alcune dimensioni comuni dei caratteri espresse in unità rem, supponendo, ovviamente, che la dimensione di base sia borriol casual dating 16px:

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem (base)
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

Come possiamo vedere, questi valori non sono molto convenienti per fare calcoli. Per questo motivo, Snook ha usato un trucco chiamato "62.5%". Non si trattava di una nuova scoperta, in alcun modo, in quanto era già utilizzato con le unità em:

body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Poiché le unità rem sono relative all'elemento radice, la variante di Snook della soluzione diventa:

html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Uno doveva anche prendere in considerazione gli altri browser che non supportano rem. Quindi il codice dall'alto sarebbe stato effettivamente scritto in questo modo:

html {
font-size: 62.5%;
}

body {
font-size: 14px;
font-size: 1.4rem;
}

h1 {
font-size: 24px;
font-size: 2.4rem;
}

Mentre questa soluzione sembra essere vicina allo status di "regola d'oro", ci sono persone che sconsigliano di usarla alla cieca. Harry Roberts scrive his own take on the use of rem units.
A suo parere, mentre la soluzione al 62,5% semplifica il calcolo (poiché le dimensioni dei caratteri in px sono 10 volte i loro valori rem), finisce per costringere gli sviluppatori a riscrivere esplicitamente tutte le dimensioni dei caratteri nel loro sito Web.

Un'altra soluzione viene da Chris Coyier di CSS-Tricks. La sua soluzione si avvale di tutte e tre le unità che abbiamo incontrato finora. Mantiene la dimensione della radice definita in px, moduli definiti con unità rem ed elementi all'interno di moduli dimensionati con em. Questo approccio semplifica la manipolazione delle dimensioni globali, che ridimensiona il tipo nei moduli, mentre il contenuto del modulo viene ridimensionato in base alla dimensione del carattere del modulo stesso. Louis Lazaris ha discusso di quest'ultimo concetto in The Power of em Units in CSS.

Usare rems con Media Query Breakpoints

L'uso di unità em o rem all'interno delle media query è strettamente correlato alla nozione di "lunghezza ottimale della linea" e al modo in cui influenza l'esperienza di lettura. Nel settembre 2014, Smashing Magazine ha pubblicato uno studio completo sulla tipografia web chiamato Size Matters: Balancing Line Length And Font Size In Responsive Web Design. Tra le molte altre cose interessanti, gli articoli danno una stima della lunghezza ottimale della linea: tra 45 e 75-85 caratteri (inclusi spazi e punteggiatura), con 65 il valore target "ideale".

Utilizzando una stima approssimativa di 1rem = 1character, possiamo controllare il flusso di testo per una singola colonna di contenuto, in un approccio mobile-first:

.container {
width: 100%;
}
@media (min-width: 85rem) {
.container {
width: 65rem;
}
}

C'è, tuttavia, un dettaglio interessante sulle unità rem ed em quando vengono utilizzate come unità per le media query: mantengono sempre lo stesso valore di 1rem = 1em = dimensione del carattere impostata dal browser. La ragione di questo comportamento è spiegata nella media query spec (emphasis added):

Le unità relative nelle media query si basano sul valore iniziale, il che significa che le unità non sono mai basate sui risultati delle dichiarazioni. Ad esempio, in HTML, l'unità em è relativa al valore iniziale della dimensione del carattere, definito dall'agente utente o dalle preferenze dell'utente, non a nessuno stile nella pagina.

Vediamo un rapido esempio di questo comportamento:
Innanzitutto, nel nostro HTML, abbiamo un elemento in cui scriveremo la larghezza del riquadro di visualizzazione:

Document width: px

Successivamente abbiamo due media query, una con unità rem e l'altra con unità em (questo utilizza Sass per semplicità):

html {
font-size: 62.5%; /* 62.5% of 16px = 10px */

@media (min-width: 20rem) {
/* 20*16px = 320px */
background-color: lemonchiffon;
font-size: 200%;
/* 200% of 16px = 32px */
}

@media (min-width: 30em) {
/* 30*16px = 480px */
background-color: lightblue;
font-size: 300%; /* 300% of 16px = 48px */
}
}

Infine, usiamo un po 'di jQuery per visualizzare la larghezza del riquadro di visualizzazione nella pagina, aggiornando il valore quando le dimensioni della finestra cambiano:

$('span').text($(window).width());

$(window).on('resize', function(e) {
$('span').text($(window).width());
});

Iniziamo con il trucco del 62.5% per mostrare che la dimensione del carattere radice modificata non ha alcun effetto sui valori utilizzati per le media query. Quando cambiamo la larghezza della finestra del browser possiamo vedere che la prima media query inizia a 320px (20 × 16px) mentre la seconda diventa attiva a 480px (30 × 16px). Nessuna delle modifiche alla dimensione del carattere dichiarate ha avuto alcun effetto sui punti di interruzione. L'unico modo per modificare i valori dei punti di interruzione della query multimediale è modificare la dimensione predefinita del carattere nelle impostazioni del browser.

Per questo motivo, non importa se usiamo unità em o rem per i punti di interruzione delle media query. Zurb Foundation (attualmente alla versione 6.6.3 al momento della scrittura di questo articolo) utilizza le unità em nelle media query.

La ricerca dell'accessibilità

Abbiamo visto sopra che la possibilità di scalare in base alla dimensione del carattere radice rende le unità rem molto utili per l'accessibilità. Gli sviluppatori google fanno la raccomandazione di usare relative units for text sizing.

C'è un empirical study run by the people behind the Internet Archive mostrando che c'è una quantità significativa di utenti che cambiano la dimensione predefinita del carattere nelle impostazioni del browser. Utilizzando rem e altre unità relative si rispettano le decisioni degli utenti sul modo in cui vogliono navigare sul Web.

Conclusioni

Finiamo qui il nostro incontro con le unità REM CSS. È ovvio che ci sono molti vantaggi nell'utilizzo di queste unità nel nostro codice, come reattività, scalabilità, migliore esperienza di lettura e maggiore flessibilità nella definizione dei componenti. Le unità Rem non sono una soluzione universale silver bullet ma, con un'attenta distribuzione, possono risolvere molti problemi che hanno infastidito gli sviluppatori per anni. Spetta a ciascuno di noi sbloccare tutto il potenziale della rems. Sperimenta e condividi i tuoi risultati con il resto di noi.

Per ulteriori informazioni sulle unità di dimensionamento CSS, vedi:
A Look at Length Units in CSS
The New CSS3 Relative Font Sizing Units
The Power of em Units in CSS

Ti potrebbe interessare:
CSS Flow Layout
Box Model