Unit Viewport CSS Baru: svh, lvh, dvh

 (ishadeed.com)
21 poin oleh xguru 2023-07-14 | 4 komentar | Bagikan ke WhatsApp
  • Menetapkan berdasarkan lebar/tinggi viewport memang praktis, tetapi vh memiliki banyak bug di perangkat mobile
    → karena ukuran viewport tidak menyertakan UI address bar browser
  • 100vh seharusnya setinggi seluruh viewport di mobile, tetapi menimbulkan masalah di Safari/Chrome (Android) yang menyembunyikan UI saat scroll
  • Karena itu, CSS Working Group memperkenalkan unit baru: svh, lvh, dvh
    • svh Small Viewport: tinggi viewport saat UI address bar belum diperkecil
    • lvh Large Viewport: tinggi viewport saat UI address bar sudah diperkecil
    • dvh Dynamic Viewport: berubah secara dinamis di antara svh / lvh
  • Dengan 100dvh, tombol di bagian paling bawah bisa diatur agar selalu terlihat
    • Namun, ada kemungkinan masalah performa sehingga perlu berhati-hati

Bacaan terkait

4 komentar

 
hided62 2023-07-19

Wah! Di Firefox for Android, saat menggunakan position:fixed, bottom: 0, ada hal-hal yang bekerja aneh sampai terasa mengerikan, jadi saya harus cek apakah ini akhirnya teratasi.
 
tobyyun 2023-07-14

https://caniuse.com/viewport-unit-variants
di iOS didukung mulai 15.4, dan di Android mulai 114 ya
 
tomriddle7 2023-07-14

Unit viewport sekarang terlalu banyak sampai mulai bikin bingung.
 
carnoxen 2023-07-14

Ironis, ini masalah yang seharusnya menjadi tanggung jawab browser, tetapi justru kelompok standar yang menanggungnya...