💡 dvh, lvh, svh: rivoluzione per i layout dinamici in CSS!
Se hai mai lottato con layout che non si adattano perfettamente alle dimensioni variabili dei dispositivi, allora è il momento di aggiornarti su queste nuove unità relative alla viewport che stanno cambiando il web design.
🌍 Cos’è la viewport?
La viewport è l’area visibile del browser. Finora, le unità più comuni che abbiamo usato in CSS sono state vh (1% dell’altezza) e vw (1% della larghezza). Ma c’è un problema: le interfacce dinamiche (ad esempio, quando appare la tastiera su mobile) possono alterare le dimensioni della viewport, rompendo i layout.
🚀 Ecco dove entrano in gioco le nuove unità:
dvh → Altezza della viewport dinamica (si adatta ai cambiamenti in tempo reale, come l’apertura della tastiera).
lvh → Altezza della grande viewport (dimensioni massime della finestra con tutte le interfacce espanse).
svh → Altezza della piccola viewport (dimensioni minime con le interfacce ridotte).
🔑 Quando e perché usarle?
dvh è perfetto per garantire che il contenuto sia sempre visibile, indipendentemente da come cambia la UI del dispositivo (es. per mobile-first design).
lvh aiuta a progettare layout che sfruttano il massimo spazio disponibile.
svh è utile quando vuoi adattarti a contesti di viewport ridotti.
📐 Non solo altezza!
Queste unità hanno anche varianti per la larghezza (dvw, lvw, svw), completando il quadro per layout veramente fluidi.
👉 Conclusione: è tempo di innovare.
Le unità come dvh, lvh e svh portano il controllo dei layout su un altro livello, soprattutto per scenari dinamici. Le stai già usando? Se sì, quali sono i tuoi casi d’uso preferiti? Se no, quali ostacoli stai incontrando?
