Digital Transformation
Viewport Units (Satuan Viewport CSS)
TL;DR: Viewport units seperti vh, vw, dvh, svh, dan lvh adalah satuan CSS yang dihitung relatif terhadap dimensi viewport browser. Sejak diperkenalkan dynamic viewport (dvh) di 2022, masalah klasik "100vh terpotong di mobile Safari" akhirnya bisa diselesaikan tanpa hack JavaScript.
Apa itu Viewport Units?
Viewport units adalah satuan panjang CSS yang nilainya dinamis terhadap ukuran area tampilan browser. 1vh sama dengan 1 persen tinggi viewport, 1vw sama dengan 1 persen lebar viewport. Praktis, ini memungkinkan elemen seperti hero section, modal, atau drawer mengisi proporsi layar yang konsisten lintas perangkat.
Masalah lama: di browser mobile, address bar yang muncul-tenggelam mengubah tinggi viewport, sehingga height: 100vh sering terpotong. Solusinya adalah keluarga satuan baru: svh (small), lvh (large), dan dvh (dynamic). Ketiganya didukung penuh di Chrome, Safari, dan Firefox sejak akhir 2022. Untuk konteks layout responsif, pasangkan dengan responsive design dan container queries.
Jenis Viewport Units
| Satuan | Perilaku |
|---|---|
| vh / vw | Tetap, mengabaikan UI browser dinamis |
| svh / svw | Selalu pakai viewport terkecil |
| lvh / lvw | Selalu pakai viewport terbesar |
| dvh / dvw | Berubah real-time ikut UI browser |
Kenapa Penting?
Bagi tim yang membangun website bisnis Indonesia dengan trafik mayoritas mobile, kesalahan menggunakan 100vh untuk hero atau full-screen modal sering menimbulkan layout yang terpotong di iPhone Safari. Mengganti ke 100dvh adalah perbaikan satu baris yang menghilangkan kelas keluhan ini. Untuk komponen yang harus stabil tinggi (seperti hero LCP), lvh atau svh lebih cocok karena tidak ikut bergerak ketika user scroll.
Pertanyaan Umum
Apakah dvh menggantikan vh sepenuhnya?
Belum. vh tetap valid untuk layout statis. dvh dipakai khusus ketika Anda ingin elemen mengikuti perubahan tinggi viewport secara real-time, biasanya untuk full-screen UI di mobile.
Apakah viewport units mempengaruhi CLS?
Bisa. Komponen yang memakai dvh akan re-layout ketika address bar berubah, memicu cumulative layout shift. Untuk konten kritis di atas fold, gunakan svh agar tinggi tetap konsisten.
Istilah Terkait