Satuan viewport

Satuan viewport menghitung ukuran dari lebar dan tinggi jendela browser, bukan dari elemen induk. Topik ini membahas vw dan vh, masalah tinggi jendela pada perangkat bergerak, satuan dvh beserta variannya, dan sekilas fungsi clamp() untuk nilai yang bergerak di antara batas minimum dan maksimum. Setelah membacanya, elemen setinggi layar dapat dibuat tanpa kejutan pada perangkat bergerak.

Satuan vw dan vh#

Satuan vw dan vh masing-masing menyatakan satu persen lebar dan tinggi viewport, yaitu area jendela tempat halaman ditampilkan. Nilai 100vw sama dengan lebar penuh jendela, sedangkan 100vh sama dengan tinggi penuhnya. Nilai tersebut dihitung ulang setiap kali jendela berubah ukuran, sehingga elemen tetap mengikutinya.

Dua catatan teknis menyertai satuan tersebut. Pertama, 100vw mencakup lebar scrollbar pada beberapa browser, sehingga elemen 100vw dapat meluber sedikit melewati lebar area konten. Kedua, satuan viewport yang dipakai langsung pada ukuran teks berisiko menghasilkan huruf yang terlalu besar atau terlalu kecil pada jendela ekstrem, karena tidak ada batas bawah dan atasnya. Kedua masalah itu memiliki penanganan masing-masing, dan pembatasan batas dibahas pada bagian clamp() di akhir topik.

Satuan ini praktis untuk elemen yang harus memenuhi layar, misalnya seksi pembuka, papan informasi, dan pemisah antar bagian besar. Satuan ini tetap perlu dikombinasikan dengan padding agar konten tidak menempel pada tepi jendela.

CSS juga menyediakan vmin dan vmax. Satuan vmin mengambil nilai yang lebih kecil antara persen lebar dan tinggi viewport, sedangkan vmax mengambil yang lebih besar. Satuan ini berguna untuk elemen yang harus selalu muat pada orientasi apa pun, misalnya kotak info yang lebarnya mengikuti sisi terpendek ponsel maupun monitor.

Masalah 100vh pada perangkat bergerak#

Pada browser perangkat bergerak, bilah alamat dan antarmuka lain dapat menyembunyikan diri saat halaman digulir, sehingga tinggi area yang benar-benar terlihat berubah-ubah. Nilai vh mengacu pada viewport terbesar, yaitu keadaan ketika seluruh antarmuka dinamis tersembunyi. Ketika bilah alamat sedang terlihat, area yang tersedia lebih pendek, sehingga bagian bawah elemen 100vh terpotong dan harus digulir untuk mencapainya.

Dampaknya paling terasa pada hero, yaitu seksi pembuka berukuran besar, dan pada seksi yang menaruh tombol aksi di bagian bawahnya. Elemen tersebut tampak penuh di komputer, tetapi sebagian isinya tertutup bilah browser pada ponsel. Peristiwa ini bukan error program, melainkan selisih definisi antara ukuran yang dijanjikan vh dan area yang benar-benar tersedia.

Satuan dvh, svh, dan lvh#

CSS menjawab masalah tersebut dengan tiga kelompok satuan. Satuan dvh mengikuti viewport dinamis, sehingga nilainya berubah ketika bilah alamat muncul atau sembunyi. Satuan svh mengambil viewport terkecil, yaitu saat seluruh antarmuka terlihat, sedangkan lvh mengambil viewport terbesar.

Karena dvh berubah saat pengguna menggulir, elemen yang memakainya ikut bergeser ketika bilah alamat bersembunyi, dan pergeseran itu dapat mengganggu kenyamanan atau menambah biaya perenderan. Untuk konten yang berisi tombol aksi, svh memberikan jaminan seluruh konten selalu terlihat. Pilihan di antara keduanya bergantung pada apakah perubahan ukuran dapat diterima ataukah harus dihindari.

Pratinjau fungsi clamp()#

Fungsi clamp() menerima tiga nilai, yaitu minimum, nilai yang disukai, dan maksimum, lalu mengembalikan nilai yang disukai selama berada di antara kedua batasnya. Apabila nilai yang disukai melebihi maksimum, fungsi mengembalikan maksimum, dan apabila berada di bawah minimum, fungsi mengembalikan minimum. Dengan satu deklarasi, ukuran dapat mengikuti jendela tanpa keluar dari batas yang aman.

Kombinasi clamp() dengan satuan viewport paling sering dipakai untuk ukuran teks. Contoh berikut menata hero setinggi layar dengan 100dvh, lalu judulnya diberi ukuran yang bergerak mengikuti lebar jendela dengan batas minimum dan maksimum.

.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 48px);
}

Pada jendela sempit, nilai 4vw berada di bawah 28px sehingga nilai minimum yang dipakai. Pada jendela lebar, nilainya dibatasi 48px. Di antara keduanya, judul mengikuti lebar jendela secara halus tanpa media query tambahan. Nilai tengahnya juga boleh berupa gabungan satuan, misalnya clamp(1rem, 1rem + 2vw, 2rem), agar ukurannya menumpuk di atas dasar rem. Pola yang sama dapat dipakai untuk padding, jarak antar seksi, dan ukuran elemen lain yang perlu fleksibel tetapi tetap terkendali.

Ringkasan#

• Satuan vw dan vh menyatakan satu persen lebar dan tinggi viewport, dan dihitung ulang setiap jendela berubah ukuran.
• 100vh mengacu pada viewport terbesar sehingga dapat memotong konten saat bilah browser perangkat bergerak terlihat.
• dvh mengikuti tinggi dinamis, svh mengambil tinggi terkecil, dan lvh mengambil tinggi terbesar.
• Fungsi clamp() membatasi nilai yang disukai di antara minimum dan maksimum, sehingga ukuran berbasis viewport tetap dalam batas aman.

Referensi#

• length — MDN Web Docs — Definisi resmi satuan viewport vw, vh, dvh, svh, dan lvh beserta selisih acuannya.
• clamp() — MDN Web Docs — Dokumentasi fungsi clamp() beserta aturan minimum, nilai disukai, dan maksimumnya.
• Learn CSS — web.dev — Kursus resmi web.dev yang mencakup satuan, ukuran, dan layout dasar CSS.