Unità di misura relative classiche: vw e vh
Le unità di misura CSS vw e vh ci permettono di creare elementi HTML le cui dimensioni dipendono direttamente dallo spazio disponibile sul viewport. In pratica, vw rappresenta una percentuale della larghezza totale del viewport, mentre vh rappresenta una percentuale dell’altezza totale.
Problemi con le unità vw e vh
Col tempo, i cambiamenti nelle UI dei vari browser hanno reso impreciso il valore di queste unità, generando comportamenti inattesi. Il calcolo delle dimensioni del viewport, infatti, non tiene conto della visibilità e delle dimensioni di alcuni elementi come le scrollbars e la barra degli indirizzi. Nella visualizzazione mobile, queste caratteristiche condizionano l’aspetto dei contenuti above-the-fold, dei menu di navigazione a scomparsa e di tutti gli elementi che devono posizionarsi temporaneamente al di sopra del contenuto (modali, offcanvas, ecc…).
Le nuove unità di misura relative
Le nuove unità introducono quindi una modalità più versatile per dimensionare gli elementi HTML, che aiuta a tenere il codice pulito e riduce la necessità di codice Javascript aggiuntivo. Vediamole nel dettaglio.
lvw, lvh
Le due unità lv* equivalgono ai massimi valori assunti dalla larghezza e dall’altezza del viewport. Queste misure ignorano la presenza degli elementi di UI del browser, includendo quindi l’area occupata dagli stessi. Le unità classiche vw e vh attualmente funzionano allo stesso modo.
svw, svh
Le due unità sv* equivalgono ai minimi valori assunti dalla larghezza e dall’altezza del viewport, escludendo quindi le dimensioni degli elementi della UI del browser anche quando questi non sono visibili. Funzionano molto bene nella definizione di sezioni hero e contenuti above the fold.
dvw, dvh
Le due unità dv* equivalgono ai valori correnti assunti dalla larghezza e dall’altezza del viewport, adattandosi quindi all’area visibile della pagina quando gli elementi della UI del browser compaiono o scompaiono. Un utilizzo pratico è il dimensionamento di elementi che devono stare sopra il contenuto come banner, modali e offcanvas. Spesso si possono usare in coppia con position: absolute o position: fixed.
Un esempio pratico
Nel seguente esempio è possibile testare le 3 nuove unità di misura relative all’altezza del viewport. Utilizzando i 3 tasti in alto si possono sperimentare i cambiamenti.
See the Pen
Playground unità di misura relative al viewport by Daniele Pani (@daniele-pani)
on CodePen.
Per comprendere meglio gli effetti descritti, è possibile copiare il codice (HTML, CSS, JavaScript) e inserirlo in una propria pagina web che può essere caricata su un server locale o online. Successivamente, è possibile aprire la pagina da un dispositivo mobile e scorrere verso il basso. In particolare, si potranno notare i seguenti comportamenti:
- con 100lvh l’elemento giallo si estenderà leggermente oltre la regione above-the-fold
- con 100svh l’elemento giallo si estenderà fino al limite inferiore della regione above-the-fold, ma la sua altezza sarà inferiore a quella del viewport
- con 100dvh l’elemento giallo si estenderà fino al limite inferiore della regione above-the-fold, per poi diventare alto quanto il viewport appena la barra degli indirizzi scompare