Può sembrare quasi un argomento banale, e di poco interesse, ma spesso si da per scontato l’uso del “pixel” per definire le misure di elementi HTML o dei font, senza rendersi conto che il CSS (soprattutto dalla versione 3) mette a disposizione una vasta gamma di alternative, spesso più efficaci in ambito responsive.
Lo scopo di questo articolo è proprio quello di analizzarle in dettaglio, provando a mettere in luce punti di forza e loro utilizzi pratici. Il tutto dando uno sguardo anche alla compatibilità sui browser attuali.
Unità assoluta “px”
Partiamo dall’unità più usata nel web. Fa riferimento alla dimensione dello schermo ed essendo un’unità di misura assoluta, risulta la più semplice da capire e usare. E spesso l’unica usata da molti Web Designer.
Pro: Semplice la gestione e l’interpretazione delle dimensioni sullo schermo.
Contro: Non si sposa bene con i layout responsive, costringendo lo sviluppatore a ridefinire le misure nei dispositivi mobili mediante media-query CSS.
Utilizzo: Potenzialmente ovunque, è effettivamente il sistema più veloce e comodo per montare un sito web, ma ricordatevi che probabilmente dovrete andare a riscrivere queste misure nei layout mobile.
Unità assolute “pt, pc, cm, mm, in”
Altre unità assolute, usate esclusivamente per la stampa. Quindi se avete necessità di creare pagine HTML/CSS per grafiche cartacee (ad esempio per la generazione di PDF) possono fare al caso vostro, altrimenti lasciatele stare. Rispettivamente corrispondono a: Punti (pt), Pica (pc, cioè 12 punti), centimetri (cm), millimetri (mm) e pollici (in).
Pro: Fondamentali per la generazione di documenti cartacei
Contro: Inutili per le pagine web.
Utilizzo: Come detto poco fa, solo per la creazione di layout di stampa.
Unità relativa “%”
La prima unità di misura relativa. Queste tipologie di unità sono molto più potenti e flessibili delle unità assolute viste poco fa, ma questo rende la loro lettura e interpretazione non sempre immediata.
Nel caso della percentuale, normalmente, il risultato si calcola rispetto al valore della stessa proprietà presente nell’elemento padre. Quindi se abbiamo un tag padre con “width:600px;” andando a creare un elemento figlio al suo interno con “width:50%;” avremo effettivamente creato un elemento con larghezza del contenuto pari a 300px. Se decidessimo di aumentare la larghezza del padre a 800px, in automatico aumenterebbe anche il figlio a 400px (che per l’appunto è sempre il 50%).
Questa definizione presenta però delle eccezioni, che vi elenco qui sotto:
- margin/padding: fanno riferimento al “width” del padre
- line-height: viene calcolato relativamente al font-size dell’elemento stesso, e non del padre
- width/height: con elemento in “position:fixed;” fanno riferimento alla dimensione della finestra del browser (viewport)
Pro: Unità molto comoda per gestire le dimensioni del box-model, soprattutto per quanto riguarda width/height. Permette di creare elementi fluidi, utili soprattutto nel layout smartphone. Possiamo infatti adattare i contenuti ad ogni schermo senza conoscere a priori la sua dimensione.
Contro: Meno indicato nella gestione delle dimensioni carattere e con eccezioni da tenere a mente. Altro elemento negativo è che non sempre avere layout fluidi semplifica l’organizzazione grafica della pagina.
Utilizzo: Molto utile nel dimensionamento fluido del box-model (width, height, margin e padding). Soprattutto quando non conoscete a priori la dimensione del contenitore in cui andrete a lavorare.
Unità relativa “em”
Questa rappresenta l’unità di misura relativa più usata per i font. Infatti 1em rappresenta il 100% del font-size dell’elemento padre. Quindi se ho un elemento padre con “font-size:16px;” e imposto l’elemento figlio con “font-size:1.5em;”, avrò che l’elemento figlio avrà caratteri la cui dimensione sarà 24px.
Anche qui l’eccezione è il “line-height” che calcola il valore relativo analizzando il font-size dell’elemento stesso.
Pro: Strumento molto valido per mantenere la proporzione tra titoli, sottotitoli e testi, così da poter ridimensionare in fase di responsive questi elementi, mantenendo però coerente la loro relazione.
Contro: Come per tutte le misure relative, la difficoltà maggiore è tradurre il valore calcolato, cioè la dimensione finale che quell’elemento assume.
Utilizzo: Strumento molto comodo da usare per il dimensionamento dei caratteri, Sconsigliato invece per la gestione del box-model.
Unità relativa “rem”
Il “rem” si può vedere come un’evoluzione dell’unità “em”. Molto simile a quest’ultima, presenta però una particolarità fondamentale: 1rem rappresenta il 100% del font-size definito nell’elemento root della pagina, cioè “<html>”. Quindi non è un’unità relativa “a cascata”, ma tutti i rem fanno riferimento ad un’unico valore definito in <html>.
Pro: Rispetto ad “em” è semplificata la gestione relativa delle misure, soprattutto quando abbiamo em impostati su elementi inclusi tra di loro.
Contro: Anche qui le difficoltà maggiori sono quelli di traduzione del reale valore.
Utilizzo: Vale lo stesso discorso fatto per gli “em”. L’unica differenze è che qui, se non ridefiniamo il font-size dell’html, il nostro utente avrò un sito totalmente accessibile: protrà infatti gestire la dimensione di tutti i caratteri del sito tramite impostazioni del browser, mantenendo comunque coerenza tra titoli e testo.
Le unità relative “vh, vw, vmin, vmax”
Le unità “vh” e “vw”, sono acronimi rispettivamente di “viewport height” e “viewport width” e fanno parte degli aggiornamenti portati con il CSS3. In pratica 1vh rappresenta 1% dell’altezza della finestra del browser e 1vw l’1% della larghezza della finestra del browser.
Queste 2 unità di misura risultano utilissime quando vogliamo dimensionare elementi in base allo spazio fornito dal browser stesso (ad esempio mettere un banner full-screen).
Le versioni vmin/vmax (non pienamente compatibili), permettono di scegliere un valore in base al valore minimo (o massimo) tra larghezza e altezza della finestra.
Pro: L’unico strumento CSS a disposizione per avere un chiaro riferimento il relazione alla dimensione del viewport, cioè la finestra del browser.
Contro: Unità di misura nuova e non del tutto compatibile, soprattutto con browser precedenti. Unità utile in casi ben specifici.
Utilizzo: Strumento molto utile per lavorare alle dimensioni del box-model il relazione alla finestra del browser.
Le unità relative “ch, ex”
Sono unità relative che impostano la loro dimensioni sulla base della larghezza del carattere “0” (zero) nel caso di “ch”, e dell’altezza del carattere “x” nel caso di “ex”. Sono unità di misura usate molto raramente perchè poco utili a livello pratico.
L’unica utilità che posso immaginare è data da “ch” quando si utilizzano font “monospace”. Occhio però alla retro-compatibilità (novità CSS3).
Compatibilità
Ora che abbiamo visto tutte le unità di misura disponibili è giusto vedere la loro compatibilità. Anche perchè alcune di loro nascono con il CSS3 e questo ne limita l’uso sui browser più datati.
Qui sotto una tabella riassuntiva presa direttamente dal sito W3schools:
Come gestire il line-height
Prima di lasciarvi, vi voglio parlare del line-height. Questo elemento infatti, come saprete, serve a definire l’altezza della riga di un testo. Potete usare delle unità di misura assolute o relative. Ma potete anche usare numeri senza alcuna unità di misura. In questo caso, il valore sarà un moltiplicatore del font-size dell’elemento stesso.
Molti pensano che questo sia la stessa cosa che succede usando le unità relative come em, rem o %. Ma non è così. Nel caso di unità relative, infatti, tale valore calcolato, si riperquoterà così com’è anche agli elementi figlio, indipendentemente dal font-size.
Mentre, usando un valore “senza unità”, avrete un normalissimo moltiplicatore che sarà usato così com’è anche agli elementi figli. Quindi, il mio consiglio è di usare quasi sempre un line-height SENZA unità di misura.
Ancora nessun commento