svh, lvh e dvh sono unità di misura in CSS utilizzate per definire l’altezza di un elemento in base all’altezza del viewport (l’area visibile del browser). Appartengono al gruppo delle unità viewport, insieme a vw (viewport width), ma differiscono nel modo in cui calcolano l’altezza. Capire la differenza tra loro è fondamentale per progettare siti web responsive, soprattutto su dispositivi mobili.
vh (viewport height): Inizialmente, vh era definito come l’1% dell’altezza iniziale del viewport. Tuttavia, sui dispositivi mobili, l’interfaccia utente (UI) del browser può cambiare dimensione durante lo scorrimento, causando incoerenze nel calcolo dell’altezza. Attualmente, vh viene solitamente calcolato in base all’altezza massima del viewport, ovvero quando l’UI del browser è ridotta al minimo. Questo può causare l’overflow del contenuto quando l’UI del browser è più grande.
lvh (large viewport height): lvh è definito come l’1% dell’altezza massima del viewport, simile al funzionamento attuale di vh. lvh è utile quando si desidera che un elemento abbia sempre l’altezza massima del viewport, indipendentemente dalle dimensioni dell’UI del browser.
svh (small viewport height): svh è definito come l’1% dell’altezza minima del viewport, ovvero quando l’UI del browser è completamente espansa. svh consente di progettare elementi con un’altezza che si adatta allo schermo, anche quando l’UI del browser occupa molto spazio. L’uso di svh aiuta a evitare che il contenuto venga oscurato dall’UI del browser.
dvh (dynamic viewport height): dvh è definito come l’1% dell’altezza dinamica del viewport, il che significa che l’altezza viene calcolata continuamente in base alle dimensioni attuali del viewport, anche quando l’UI del browser cambia. Sebbene dvh sembri ideale per adattare sempre il contenuto al viewport, il ridimensionamento continuo può causare un’esperienza utente a scatti e influire sulle prestazioni. Pertanto, è consigliabile limitare l’uso di dvh solo quando strettamente necessario. Può causare salti o ridimensionamenti improvvisi del contenuto durante lo scorrimento.
In sintesi, svh e lvh offrono un approccio più stabile per definire l’altezza in base al viewport, mentre dvh dovrebbe essere usato con cautela. La scelta dell’unità appropriata dipende dall’obiettivo del design e dall’esperienza utente desiderata. lvh mantiene le dimensioni, svh si riduce in base all’UI del browser, mentre dvh cambia dimensione continuamente.
