HTML & CSS

Unità di Misura di lunghezza dei CSS

In questo articolo vedremo tutte le unità di misura di lunghezza dei CSS, dalle più popolari a quelle sconosciute. Scegliere la corretta unità di misura può toglierci molti pensieri, specialmente in fase di progettazione responsive.Le unità di misura di lunghezza dei CSS che analizzerò nell’articolo sono quelli relativi all’ultima Candidate Recommendation del W3C che potete trovare qua.

Prima però di addentrarci in tutti i valori e unità, conviene chiarire la distinzione tra unità di misura assolute e unità di misure relative, che tornerà utile nell’analisi di ogni singola unità di misura.

 

Unità di Misura Assolute

Per unità di misura assolute dei CSS si intendono unità di misura fissate rispetto a qualche misura fisica e che, quindi, rimangono costanti nel tempo.

Ad esempio sono unità di misura assolute i centimetri, definiti come la centesima parte del metro, e i pixel, definiti come la 96esima parte di un pollice.

Tutte le unità di misura assolute vengono ricondotte e possono essere convertite in pixel.

 

Unità di Misura Relative

Per unità di misura relative dei CSS si intendono, al contrario, unità di misura che dipendono da altre misure fissate e che possono variare in base al contesto in cui si trovano.

Sono unità di misura relative i “vw” (viewport’s width) che dipendono dalla larghezza del dispositivo, così come i vh che invece dipendono dall’altezza del dispositivo.

Iniziamo dalle unità di misura di lunghezza dei CSS più semplici e intuitive, cioè le unità di misura assolute.

 

Centimetri, Millimetri, Q e Inches

Le più conosciute nella nostra quotidianità, anche se sconsigliate e praticamente mai utilizzate in ambito di web development, sono centimetri (cm), millimetri (mm) e il quarto di millimetro (Q).

Il centimetro equivale a 96 pixel / 2.54, circa 37,8 pixel.

Il millimetro è, chiaramente un decimo, quindi 3,78 px, mentre il quarto di millimetro sono 0,95 px.

Non ci credete? Queste righe che vedete su CodePen hanno tutte esattamente la stessa lunghezza (5cm – 50mm – 196px) espressa in maniera diversa.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bKzbbL” default_tab=”css,result” user=”webassistente”]See the Pen <a href=’https://codepen.io/webassistente/pen/bKzbbL/’>Cm, Mm and Pixel</a> by webassistente (<a href=’https://codepen.io/webassistente’>@webassistente</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Infine, gli inches (pollici), che rappresentano precisamente 96 px, 2.54 cm.

Pica e Punti

Entrambi sono prevalentemente utilizzati per la misura del font da parte dei grafici e tipografici.

La pica (pc) rappresenta 12 punti che equivale a 1/6 di pollice, lo potete trovare se lavorate ad esempio con Adobe InDesign.

Il punto (pt) equivale a 1/72 di pollice, quindi a 1,3 pixel. Utilizzato spesso dai grafici in programmi come Adobe Illustrator.

Anche in questo caso, il mio consiglio è di rimanere fedeli ai pixel in fase di progettazione e, quindi, di riconvertire tutto o di progettare direttamente in px (o em come vedremo sotto).

Sotto un esempio delle grandezze sopra citate per la dimensione del font.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MXLaby” default_tab=”css,result” user=”webassistente”]See the Pen <a href=’https://codepen.io/webassistente/pen/MXLaby/’>MXLaby</a> by webassistente (<a href=’https://codepen.io/webassistente’>@webassistente</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Pixel

Infine, i pixel! L’unità di misura principe e di riferimento per tutte le altre misure assolute (almeno nel mondo dell’informatica).

Come abbiamo visto sopra, infatti, tutte le misure del mondo fisico possono essere riconvertite in un certo numero di pixel nel mondo digitale.

I pixel vengono utilizzati sia per stabilire le misure dei div o delle immagini, sia per la grandezza dei font che per i margini o il padding e per molto altro ancora!

Indubbiamente è l’unità di misura di lunghezza dei CSS che utilizzerete di più nella vostra carriera di web developer.

A questo punto, finita la rassegna delle unità di misura assolute, possiamo passare alle unità di misure relative.

 

Em, ex, ch e rem

A seguito della diffusione del responsive web design, gli “em” sono diventati le unità di misura di lunghezza dei CSS più utilizzate nella definizione della grandezza del font.

La grandezza per gli “em” è ricavata moltiplicando il coefficiente degli “em” per il font-size che sarebbe applicato dalle regole CSS che avete scritto.

Un esempio per chiarire meglio: mettiamo che abbiate impostato come unica font-size, quella del documento pari a 14px, allora 1em sarà esattamente 14px, 2em varrebbero invece il doppio, cioè 28px.

Per maggiore chiarezza guardate l’esempio di seguito:

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GGzoRR” default_tab=”html,result” user=”webassistente”]See the Pen <a href=’https://codepen.io/webassistente/pen/GGzoRR/’>GGzoRR</a> by webassistente (<a href=’https://codepen.io/webassistente’>@webassistente</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Se non viene definito il font-size nel vostro documento CSS, 1 em equivale a 16px, ma solo in questo caso.

Una piccola particolarità, se utilizzate gli “em” ed è stato già fissato il font-size precedentemente in “em”, la misura finale si otterrà moltiplicando gli “em”.

Chiarisco con un esempio, il documento è stato specificato con font-size:16px, un div risulta avere font-size: 2em e al suo interno c’è un altro div con font-size:3em, allora la misura finale del font-size di quest’ultimo div sarà 16 * 2 * 3 = 96px

Come potete vedere in quest’esempio sotto:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dKaGGL” default_tab=”html,result” user=”webassistente”]See the Pen <a href=’https://codepen.io/webassistente/pen/dKaGGL/’>Em Moltiplicato</a> by webassistente (<a href=’https://codepen.io/webassistente’>@webassistente</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Per questo motivo è definita come unità di misura relativa, perché dipende sempre dal contesto in cui si trova.
Ex” è un’unità di misura di lunghezza dei CSS utilizzata più raramente ed equivale all’altezza del carattere “x” nel font definito dal documento. E’ sempre un’unità di misura relativa, infatti al cambiare del font cambia l’altezza del carattere “x” e di conseguenza il valore “ex”.
Se “ex” prende in riferimento l’altezza del carattere x, i “ch” utilizzano come riferimento la larghezza dello zero. Quindi un box con width:1ch contiene in larghezza un solo 0.
Anche questa unità è poco utilizzata, può però avere un suo impiego, appunto, nel definire la larghezza di un div, così da sapere quanti caratteri saranno contenuti in ogni riga.
Sotto un esempio:
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”gKqPgP” default_tab=”css,result” user=”webassistente”]See the Pen <a href=’https://codepen.io/webassistente/pen/gKqPgP/’>Ch Example</a> by webassistente (<a href=’https://codepen.io/webassistente’>@webassistente</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Infine, chiudiamo questo paragrafo con i “rem”, che si comporta come gli “em” con la grossa differenza di fare sempre riferimento all’elemento radice del documento.
Quindi, i valori in rem vengono calcolati sempre in base al font-size definito nell’elemento radice del documento (solitamente il tag html), e non vengono ricalcolati in base all’elemento contenitore, questo li rende molto più leggibili e chiari.

Vw, vh, vmin e vmax

Queste unità di misura sono relative più che altro alla larghezza e altezza del dispositivo, ma possono essere usate anche per specificare la grandezza del font.

Vw indica viewport width, quindi la larghezza del dispositivo in uso. 1vw equivale all’1% della larghezza del dispositivo.

Vh, invece sta per viewport height, e quindi prende come riferimento l’altezza del dispositivo. Il funzionamento è lo stesso dei vw.

Vmin e Vmax invece sono relativi rispettivamente alla dimensione minore e maggiore del dispositivo in uso. Quindi, se usate un computer dove la larghezza del monitor è maggiore dell’altezza, allora il vmin sarà relativo all’altezza e il vmax sarà relativo alla larghezza.

Queste sono le unità di misura di lunghezza dei CSS, che è giusto saper usare per costruire siti responsive e stare al passo. Apro una piccola parentesi per quanto riguarda il valore percentuale, che appunto non è un’unità di misura ma un valore utilizzato moltissimo nel responsive web design.

Il valore %

Molto intuitivamente, rappresenta una percentuale (in altezza o larghezza) del box che lo contiene. Supponendo di avere un div con width:80%, specificando un div all’interno con width:50% otterremo una larghezza finale del 40% (cioè la metà dell’80%).

 

Se avete delle domande, volete chiarimenti o aggiungere qualsiasi cosa commentate in fondo al post oppure scrivetemi un email tramite il form contatti

Read more
HTML & CSS

Una Lettera su Google AMP

Una lettera su Google AMP, è questo il titolo della lettera che diversi web designer e web developer hanno sottoscritto con destinatario Google.

Che cos’è Google AMP?

AMP o Accelerated Mobile Pages è un progetto open source promosso da Google con il fine di rendere l’esperienza utente il più piacevole possibile, garantendo velocità di caricamento pagine elevatissime a discapito di alcuni elementi grafici.

E fino a qui tutto sembra filare per il meglio.

Se non fosse che Google mantiene i visitatori delle pagine AMP su dominio Google, pertanto, non manda il visitatore sul sito web che ha generato la notizia o il contenuto. Da qui l’oggetto della lettera su Google AMP che vi traduco interamente nel prossimo paragrafo.

 

Una lettera su Google AMP

“Siamo una comunità di individui che hanno un interesse significativo nello sviluppo e nel benessere del World Wide Web (“Il Web”), e siamo profondamente preoccupati riguardo alle Accelerated Mobile Pages (“AMP”), un progetto Google che presumibilmente cerca di migliorare l’esperienza utente sul Web.

Di fatto, AMP mantiene gli utenti all’interno del dominio Google e devia il traffico da altri siti web a beneficio di Google. Su una scala di miliardi di utenti, questo ha l’effetto di rafforzare ulteriormente il dominio di Google sul Web.

Conosciamo il problema delle pagine lente a caricare, in relazione anche alle alternative, tecnologie proprietarie come Facebook Instant Articles e Apple News. Gli editori (specialmente di news e media) da tempo hanno affrontato scelte difficili e pochi incentivi, andando incontro a cattive decisioni e compromessi e, infine, a terribili user experience.

I motori di ricerca sono in una potente posizione per esercitare influenza per risolvere il problema. Tuttavia, Google ha scelto di creare una posizione premium al top dei risultati di ricerca (per gli articoli) e una icona con un fulmine (per tutti i tipi di contenuto), le quali sono accessibili solo per gli editori che utilizzano una tecnologia controllata da Google (n.d. AMP), fornita da Google e dalla loro infrastruttura, su un URL Google e con la user experience Google.

Il formato AMP non è di per sé il problema, ma due aspetti della sua implementazione rinforzano la posizione di Google come una piattaforma standard per il contenuto, mentre Google cerca di guidare l’assorbimento di AMP da parte degli editori:

1. I contenuti che scelgono AMP e l’hosting associato all’interno di Google ha una via preferenziale nella ricerca, includendo (per gli articoli) una posizione sopra a tutte le altre.

2. Quando un utente naviga da Google ad un contenuto che Google consiglia, questo rimane involontariamente all’interno del dominio Google.

Se l’obiettivo di Google con AMP è quello di migliorare l’esperienza utente sul Web, allora suggeriamo alcuni semplici cambiamenti che perseguano sempre questo obiettivo ma consentendo al Web di rimanere dinamico, competitivo e consumer-oriented:

1. Invece di garantire un posizionamento premium nei risultati di ricerca solo ad AMP, fornire lo stesso vantaggio a tutte le pagine che soddisfano un obiettivo neutrale di performance, ad esempio lo Speed Index. Gli editori potranno così utilizzare qualunque soluzione tecnica di loro scelta.

2. Non mostrare contenuto di terze parti all’interno di Google a meno che non sia spiegato in maniera chiara all’utente che stanno guardando un prodotto Google. E’ perfettamente accettabile che Google lanci un news reader, ma non è altrettanto accettabile che Google mostri una pagina con loghi e contenuti di sole terze parti all’interno di un dominio Google, né tanto meno di richiedere a queste terze parti di utilizzare un hosting Google per apparire nei risultati di ricerca.

Non vogliamo che Google fermi lo sviluppo di AMP, e questi cambiamenti non lo richiedono. Siamo felici del fatto che i motori di ricerca diano priorità alle pagine con le migliori velocità di caricamento. AMP può rimanere una delle tecnologie che da agli editori una scelta di alta qualità per dare ai propri utenti del contenuto in maniera veloce e con una user experience soddisfacente.

Tuttavia, gli editori non dovrebbero essere costretti a mettere il loro contenuto sotto l’ombrello di Google a causa del suo dominio nella ricerca. Il Web non è Google, e dovrebbe non essere soltanto Google.

Questo il contenuto della lettera su Google AMP, che è stata sottoscritta anche dalla famosa rivista/pubblicazione A List Apart. E voi cosa ne pensate? Fatemelo sapere nei commenti!

Read more
Back to Top