Se apri un foglio di stile di un sito Web, ti imbatterai in rem, ems o pixel o qualsiasi combinazione di questi. Nello stile CSS, queste sono le principali unità di misura utilizzate. Sia che tu stia progettando un sito da zero, sia che tu abbia "ereditato" un sito progettato in precedenza che devi mantenere, questi sono importanti per la tipografia, la spaziatura e altre dimensioni nel design visivo.

Cosa rende un'unità di misura migliore di un'altra? Non c'è una risposta definitiva e, a seconda della situazione, uno potrebbe essere preferito a un altro. Conoscere il caso d'uso e cosa funzionerà meglio aiuterà a determinare la misurazione migliore per il tuo styling.

Pixel

Sin dai primi giorni del Web, i pixel sono stati un'opzione che si trova ovunque nei fogli di stile. Sono affidabili, precisi e la loro consistenza non può essere eguagliata. I pixel sono supportati in tutti i browser, il che li rende facili da usare.

Sebbene i pixel siano fantastici, hanno alcune limitazioni. Poiché sono una misurazione così definita, gli utenti non possono modificare la dimensione del testo predefinito del browser nelle impostazioni del browser. Le cose non si espandono come fanno con ems e rem, rendendo difficile la modifica delle dimensioni dal punto di vista dell'accessibilità per l'utente. Si può obiettare che un utente può semplicemente ingrandire, anziché accedere alle impostazioni del browser. Non c'è una risposta giusta o sbagliata, è solo qualcosa da tenere a mente.

Quali sono?

I pixel sono un'unità di misura basata sul dimensionamento impostato. Sono l'unità per misurare le dimensioni su uno schermo e vengono utilizzate quando è richiesta una progettazione precisa. Diciamo cose come "risoluzione pixel", quindi siamo abituati a questa misurazione.

Un esempio sarebbe simile a questo:

.main-header p {
font-size: 14px;
}

I pixel trovano impiego nel web design, ma nell'era del web design indipendente dal dispositivo, le misurazioni dello schermo non sono l'obiettivo principale. Si tratta di come adattare al meglio i nostri contenuti su innumerevoli dispositivi, quindi ci sono ems e rem che possono aiutare in questo.

Ems

Questa unità di misura ha una lunga storia. Risale al 1996 ed esiste dai primi giorni della CSS. I pixel erano considerati la migliore pratica, quindi gli ems non erano così popolari in quei primi giorni. Da allora hanno guadagnato popolarità perché il loro scopo è fungere da unità relativa alla dimensione del carattere in contenuti specifici e aiutano con coerenza.

Quali sono?

Se sei un grande appassionato di tipografia classica, probabilmente li hai riconosciuti, perché è un'unità di misura che ha origine dal mondo dei caratteri stampati. Usando questo come unità nella tipografia, questa misura è uguale alla dimensione in punti attualmente specificata. Ad esempio, un em in un carattere tipografico a 16 punti è 16 punti. Questa unità è la stessa per tutti i caratteri di una determinata dimensione in punti.

Non stiamo parlando di stampa qui, quindi come fanno gli ems a figurare nel web design? Il dimensionamento relativo è un grande punto di forza per ems perché aiuta a controllare il dimensionamento degli elementi in relazione agli altri. Gli em possono fungere da grandi mattoni per gli elementi del sito Web a causa del fatto che i valori em sono composti. Tuttavia, è importante capire davvero come funziona questo compounding.

Capire l'em

Nella maggior parte dei casi, a meno che l'impostazione predefinita del browser non sia impostata su qualcos'altro, un em è 16 px. Quando vedi 1,5 em, ciò renderebbe 24 pixel. Non è sempre così semplice però. Cosa succede quando è coinvolta la nidificazione? Può essere sia conveniente che confuso. Sapere come funzionano le cose quando si lavora con gli ems aiuterà sicuramente a risolvere qualsiasi mistero. Qual è la dimensione del paragrafo "Sono annidato" di seguito?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Ci sono tre div qui e il paragrafo è abbastanza annidato. Con la cascata del DOM, potresti dover fare un po' di lavoro investigativo. Diciamo che stiamo lavorando con un em di 16px, poiché è il più comune.

La classe .one sta moltiplicando 1em per 0,5, che è 0,5 em o 8 px. Con la classe .two , questo viene moltiplicato ancora una volta per 0,5, che è .25 em o 4px. Le cose stanno diventando piuttosto piccole, quindi la classe .three aiuterà. Prenderemo .25 em e lo moltiplichiamo per 2. Il risultato è 0,5 em o 8px.

Una cosa che può aiutare è impostare una dimensione sull'elemento HTML. Qualcosa del genere specificherà la dimensione em impostata, invece di fare affidamento su em impostate dal browser. Impostiamo 1 em su 20px. Se questo fosse usato con l'esempio sopra, si applicherebbero gli stessi principi con l'annidamento. Tieni presente, tuttavia, che abbiamo specificato una dimensione in pixel, in modo che influisca sulla capacità di ridimensionare il testo utilizzando l'opzione di impostazione del browser.

html {

font-size: 20px;

}

Oltre ai pixel, la dimensione del carattere può essere impostata anche con una percentuale. Il punto è che gli ems possono funzionare insieme ad altre unità di misura. Lo incontrerai sicuramente, poiché è abbastanza comune impostare il carattere del corpo su una percentuale per aiutare a impostare una linea di base. Diciamo che la dimensione del carattere inizia come il 62,5% della dimensione em. Con una dimensione em di 16px, la dimensione del carattere sarebbe 10px.

body {

font-size:62.5%;

}

Una volta che hai una comprensione, ems può essere una buona risorsa per il tuo progetto. Il ridimensionamento del testo dei sottoelementi rispetto ai loro elementi padre può sicuramente tornare utile. Inoltre, ems rende facile specificare un riempimento più grande sul contenitore di testo rispetto a quello che può essere trovato nella spaziatura delle parole, facendo seguire la regola visiva della prossimità. Gli elementi correlati verranno raggruppati visivamente, con meno ingombro e forniranno un layout organizzato.

Un'altra grande caratteristica di ems sono i vantaggi di accessibilità. Poiché è relativo alla radice del DOM, ems lo rende perfetto per ridimensionare l'intero design in base alle preferenze dell'utente. Nelle preferenze del browser, puoi facilmente modificare la dimensione del carattere predefinita, che poi cambia i calcoli, in ems, sull'intero sito web.

Rem

Quali sono?

I rem sono un'aggiunta abbastanza recente alla timeline CSS. Questa unità di misura è stata introdotta con CSS3 e risolve alcuni dei problemi con pixel ed ems. Con un nome simile a "ems", potresti chiederti cosa significa la "r". Viene dal termine di "Root EM".

La radice è l'elemento HTML. Il dimensionamento specificato sull'elemento HTML è la base per questa misurazione. Vedrai che abbiamo usato em dimensionamento sull'elemento HTML; va bene combinare i due tipi di misurazione.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

I browser moderni supportano i rem, ma assicurati di controllare con BrowserStack quali browser più vecchi devi supportare prima di impegnarti in rems. Tuttavia, non lasciare che i browser più vecchi ti trattengano; puoi sempre specificare un pixel di fallback per qualsiasi cosa al di sotto di IE9. I browser moderni ignorano i pixel perché preferiscono i rem. Potrebbe assomigliare a questo:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Capire i rem

Ricordi la matematica che dovevamo fare per gli elementi annidati di ems? Questo non è necessario con i rem. È tutto basato su quell'elemento radice. Non dobbiamo preoccuparci degli elementi padre, è sempre basato sulla radice.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Ci sono tre div qui e il paragrafo è abbastanza annidato come abbiamo visto nell'esempio em. Di nuovo, diciamo che stiamo lavorando con una dimensione em di 16px.

Le classi .one e .two hanno dimensioni assegnate, ma qui non contano perché la nidificazione non è influenzata da rem come lo è con ems. Tutto ciò che conta davvero è lo stile di .three, che è 2 ems. Il paragrafo sarebbe basato sull'elemento HTML di 1em. Questa misura verrebbe raddoppiata, ottenendo 2 rem o 32 pixel.

Vuoi ridimensionare tutto in modo uniforme? Basta regolare la dimensione dell'elemento radice. Ciò è utile anche quando si regola la dimensione predefinita del browser. Potresti vedere come gli ems lo hanno permesso, anche i rem.

C'è molto meno di cui preoccuparsi riguardo al comportamento di nidificazione imprevedibile con i rem. È facile capire dove entra in gioco l'elemento radice e come questo influisca sul tuo stile quando usi le rem.

Confrontando le diverse misurazioni, puoi vedere che hanno i loro pro e contro. Comprendere davvero come funzionano le unità di misura e come funzionano con le impostazioni del browser ti aiuterà a scegliere quale funzionerà meglio per la situazione o il progetto.