La regola vh (viewport height) è una delle unità di misura in CSS che fa riferimento all’altezza del viewport del browser, ovvero l’area visibile della finestra di navigazione. Se utilizzata correttamente, può essere uno strumento molto utile per la creazione di layout responsive e moderni. Ma conviene davvero usarla? Vediamo i pro e i contro.
Cos’è vh?
L’unità di misura vh rappresenta l’1% dell’altezza del viewport. Ciò significa che se impostiamo un elemento con un’altezza di 100vh, questo occuperà esattamente l’altezza totale della finestra visibile del browser.
Quando è utile usare vh?
1. Creazione di sezioni a schermo intero
Uno degli utilizzi più comuni di vh è la creazione di sezioni a schermo intero, dove ogni sezione della pagina occupa l’intera altezza del viewport. Questo è molto utilizzato nei siti moderni, per dare un impatto visivo maggiore e per facilitare la navigazione con lo scrolling verticale.
In questo modo, ogni sezione del sito sarà alta quanto l’intera finestra, creando un effetto visivo di “slide” tra una sezione e l’altra.
2. Hero image responsive
L’utilizzo di vh è anche popolare per le hero image, immagini di apertura spesso collocate nella parte superiore del sito web. Impostando l’altezza con vh, l’immagine sarà sempre visibile in tutta la sua grandezza senza necessità di scrollbar aggiuntive.
3. Layout flessibili
In alcuni layout, vh può essere utilizzato per mantenere un aspetto equilibrato tra le diverse sezioni della pagina, garantendo che il contenuto si adatti al viewport senza creare spazi vuoti indesiderati o troppi scroll.
I limiti di vh
Nonostante i suoi vantaggi, vh non è sempre la scelta migliore e può comportare alcuni problemi, specialmente su dispositivi mobili.
1. Problemi con il viewport mobile
Uno dei principali limiti di vh si manifesta sui dispositivi mobili. Nei browser mobili, la dimensione del viewport può cambiare in base alla presenza o meno di elementi di interfaccia come la barra degli indirizzi e la barra di navigazione inferiore. Questo fa sì che il valore di 100vh possa cambiare dinamicamente, creando comportamenti imprevisti e portando a layout non correttamente visualizzati.
Ad esempio, un elemento con altezza 100vh potrebbe apparire più grande o più piccolo rispetto a quanto previsto a seconda della posizione delle barre del browser.
2. Esperienze utente non ottimali
In alcuni casi, forzare gli elementi a occupare l’intero viewport con vh può risultare in un’esperienza utente non ottimale, specialmente su schermi molto piccoli. Un layout eccessivamente rigido potrebbe costringere l’utente a fare troppo scrolling o a vedere contenuti sovrapposti se non si considera correttamente la quantità di spazio occupato dal testo o altri elementi.
3. Compatibilità variabile
Anche se la maggior parte dei browser moderni supporta vh correttamente, su alcuni dispositivi più vecchi o browser particolari potrebbero verificarsi discrepanze nel modo in cui viene calcolata l’altezza del viewport. Sebbene questo sia meno comune oggi, è un aspetto da considerare.
Quando evitare vh?
- Testi lunghi: Quando si lavora con contenuti testuali particolarmente lunghi, evitare di forzare la loro altezza con
vhpotrebbe essere una scelta migliore, per evitare di sacrificare la leggibilità e l’esperienza utente. - Mobile design: Se non si adottano accorgimenti per gestire i comportamenti sui dispositivi mobili, può essere meglio usare unità relative come
%oemper garantire una maggiore flessibilità.
Conclusioni
La regola vh in CSS è un potente strumento per creare layout moderni, flessibili e responsive, particolarmente efficace per hero image e sezioni a schermo intero. Tuttavia, il suo utilizzo deve essere valutato attentamente in base al contesto, soprattutto sui dispositivi mobili, dove può causare problemi di visualizzazione. Se ben gestito, con opportune considerazioni per mobile e contenuti flessibili, vh può migliorare significativamente l’estetica e l’usabilità di un sito web.
