Unit area pandang yang besar, kecil, dan dinamis

Unit CSS baru yang memperhitungkan area pandang seluler dengan toolbar dinamis.

Bramus

Area pandang dan unitnya

Untuk mengukur sesuatu setinggi area pandang, Anda dapat menggunakan unit vw dan vh.

• vw = 1% dari lebar ukuran area pandang.
• vh = 1% dari tinggi ukuran area pandang.

Berikan elemen dengan lebar 100vw dan tinggi 100vh, sehingga elemen tersebut akan menutupi area tampilan sepenuhnya.

Unit vw dan vh ditampilkan di browser dengan unit tambahan ini

• vi = 1% dari ukuran sumbu inline area pandang.
• vb = 1% ukuran sumbu blok area pandang.
• vmin = yang lebih kecil dari vw atau vh.
• vmax = yang lebih besar dari vw atau vh.

Unit ini memiliki dukungan browser yang baik.

Kebutuhan akan unit area pandang baru

Meskipun unit yang ada berfungsi dengan baik di desktop, berbeda halnya dengan unit seluler. Di sana, ukuran area pandang dipengaruhi oleh ada atau tidaknya toolbar dinamis. Yaitu antarmuka pengguna seperti bilah alamat dan bilah tab.

Meskipun ukuran area pandang dapat berubah, ukuran vw dan vh tidak berubah. Akibatnya, elemen yang berukuran setinggi 100vh akan dikeluarkan dari area pandang.

Saat menggulir ke bawah, bilah alat dinamis ini akan tertarik. Dalam status ini, elemen yang berukuran setinggi 100vh akan menutupi seluruh area tampilan.

Untuk mengatasi masalah ini, berbagai status area pandang telah ditetapkan di CSS Working Group.

• Area pandang besar: Ukuran area pandang dengan asumsi antarmuka UA yang diperluas secara dinamis dan ditarik untuk ditarik.
• Area Pandang Kecil: Area pandang yang berukuran dengan asumsi antarmuka UA yang diperluas secara dinamis dan ditarik untuk diperluas.

Area pandang baru juga memiliki unit yang ditetapkan ke area pandang tersebut:

• Unit yang mewakili area pandang besar memiliki awalan lv. Satuannya adalah lvw, lvh, lvi, lvb, lvmin, dan lvmax.
• Unit yang mewakili area pandang kecil memiliki awalan sv. Satuannya adalah svw, svh, svi, svb, svmin, dan svmax.

Ukuran unit persentase area pandang ini bersifat tetap (sehingga stabil) kecuali jika area pandang itu sendiri diubah ukurannya.

Selain area pandang besar dan kecil, ada juga area pandang dinamis yang memiliki pertimbangan dinamis UI UA:

• Ketika toolbar dinamis diperluas, area pandang dinamis akan setara dengan ukuran area pandang kecil.
• Ketika toolbar dinamis ditarik, area pandang dinamis sama dengan ukuran area pandang besar.

Unit yang disertainya memiliki imbuhan dv: dvw, dvh, dvi, dvb, dvmin, dan dvmax. Ukurannya dibatasi di antara pasangan lv* dan sv*.

Unit ini dikirimkan dalam Chrome 108, bergabung dengan Safari dan Firefox yang sudah memiliki dukungan.

Peringatan

Ada beberapa hal yang perlu diketahui tentang Unit Area Pandang:

• Tidak ada unit area pandang yang mempertimbangkan ukuran scrollbar. Pada sistem yang mengaktifkan scrollbar klasik, elemen yang berukuran 100vw akan menjadi sedikit terlalu lebar. Ini adalah sesuai spesifikasi.

• Nilai untuk area pandang dinamis tidak diperbarui pada 60 fps. Di semua browser, update dibatasi saat UI UA diluaskan atau ditarik. Beberapa browser bahkan melakukan debounce pada pembaruan sepenuhnya bergantung pada gestur (scroll lambat versus geser) yang digunakan.

• Keyboard virtual (juga dikenal sebagai keyboard virtual) tidak dianggap sebagai bagian dari UI UA. Oleh karena itu, hal ini tidak memengaruhi ukuran unit area pandang. Di Chrome, Anda dapat memilih untuk ikut serta dalam perilaku yang kehadiran keyboard virtualnya memengaruhi unit area pandang.

Referensi lainnya

Untuk mempelajari lebih lanjut area pandang dan unit ini, lihat episode HTTP 203 ini. Di dalamnya, Bramus memberi tahu Jake tentang berbagai area pandang dan menjelaskan bagaimana ukuran unit ini ditentukan dengan tepat.

Bahan bacaan tambahan:

• Spesifikasi Nilai CSS 4: Panjang relatif area pandang
• Entri ChromeStatus
• Penjelasan Viewport Tata Letak
• Penjelasan Unit Area Pandang