Con la proliferazione dei dispositivi sempre connessi alla rete nel nostro uso quotidiano, rendere i nostri siti fruibili da ciascuno di essi è sicuramente diventato il must del momento. L’idea diffusa è di creare siti o Web App capaci di adattarsi nel modo più appropriato al display in cui sono visualizzati, permettendo agli utenti di trarne un’esperienza sempre piacevole.
Oggi vorrei parlarvi di come sia possibile raggiungere questo obiettivo, sfruttando una novità di CSS3: i rem.
Premessa sulle unità di misura
Fino a non molto tempo fa, eravamo abituati a trattare i nostri siti prevalentemente con i pixel, un unità di misura assoluta, corrispondente ad un punto dello schermo. Poichè il pixel è fisso non ci permette di renderlo adattabile alle nostre esigenze. Qui entrano in gioco gli em, unità di misura scalabile relativa all’elemento in sono contenuti, calcolati come
font-size(padre) : 1em = font-size(figlio) : x → font-size(figlio)/font-size(padre)
[code type=”css”]
body { font-size: 16px; }
li{ font-size: 0.875em;} /* =14px */
li li{ font-size: 0.857em; } /* =12px */
[/code]
Purtroppo però, essendo l’em relativo al proprio padre, i calcoli cominceranno a complicarsi quando avremo una struttura con più elementi annidati, compromettendo anche la scalabilità del nostro sito. Un comportamento analogo hanno le unità di misura espresse in percentuale, anch’esse quindi relative e con dimensioni variabili rispetto all’elemento contenitore.
Rem, il salvagente
Per risolvere queste complicanze, CSS3 ci presenta una nuova unità di misura: i rem. Grazie ai rem, possiamo infatti adottare un’unità di misura relativa con il vantaggio di riferirci alla misura root del nostro sito.
[code type=”css”]
html { font-size: 16px }
li{ font-size: 0.875rem;} /* =14px */
li li{ font-size: 0.75rem; } /* =12px */
[/code]
Per ottenere quindi le unità di misura desiderate relative dividiamo per il valore root per ottenere l’unità rem: il valore calcolato sarà sempre lo stesso per qualsiasi elemento del sito. Basandoci quindi sull’esempio, tutti gli elementi di cui desideriamo avere un valore di 12px saranno sempre di 0.75rem su una base di 16px.
Sfruttando i rem per i nostri progetti, possiamo agevolmente cambiare le dimensioni dei nostri font in vari contesti, cambiando semplicemente il valore dello stile dell’html.
In un sito responsive, ad esempio, potremmo agire con una media Query:
[code type=”php”]
@media screen and (min-width: 600px) {
html{font-size: 14px;}
}
[/code]
Et voilà! Tutti gli elementi a cui è stato attribuito un valore in rem adatteranno la loro dimensione proporzionalmente, risparmiandoci molto tempo rispetto all’utilizzo dei pixel. Ho creato questo semplice esempio per farvi vedere i rem in azione.
Compatibilità
Il supporto dei rem dai diversi browser è abbastanza soddisfacente, fatta eccezione per le versioni di Internet Explorer < 9. Per non avere problemi possiamo utilizzare un fallback, specificando il valore dei rem successivamente al valore dei pixel: [code type="css"] html { font-size: 16px } p { font-size: 14px; font-size: 0.875rem; } [/code]
Conclusioni
Se riusciamo a impostare il nostro lavoro nel modo corretto sin da subito, riusciremo poi a rendere il nostro sito molto flessibile ad un costo minore rispetto a farlo in un secondo momento. Spendiamo quindi del tempo in più per rendere un sito adattabile alla miriade di dispositivi attualmente sul mercato: ne varrà la pena.
