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.

Elemen biru muda yang disetel menjadi 100vw kali 100vh, yang menutupi seluruh area pandang. Area pandang itu sendiri ditunjukkan dengan garis batas putus-putus biru.
Elemen biru muda yang ditetapkan ke 100 vw x 100 vh, yang menutupi seluruh area tampilan.
Area pandang itu sendiri ditunjukkan menggunakan batas putus-putus biru.

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.

Dukungan Browser

  • 20
  • 12
  • 19
  • 6

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.

100 VH di perangkat seluler terlalu tinggi saat dimuat.
100vh di perangkat seluler terlalu tinggi saat dimuat.

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

100vh di perangkat seluler dianggap “benar” saat antarmuka pengguna Agen Pengguna dicabut.
100vh di perangkat seluler dianggap “benar” saat antarmuka pengguna Agen Pengguna dicabut.

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.
Visualisasi area pandang besar dan kecil.
Visualisasi area pandang besar dan kecil.

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.

Dua visualisasi browser seluler diposisikan bersebelahan. Satu memiliki elemen berukuran 100svh dan lainnya 100lvh.
Dua visualisasi browser seluler diposisikan bersebelahan.
Satu memiliki elemen berukuran 100svh dan yang lainnya 100lvh.

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*.

100dvh menyesuaikan dirinya menjadi ukuran area pandang besar atau kecil.
100dvh menyesuaikan dirinya menjadi ukuran area pandang besar atau kecil.

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

Dukungan Browser

  • 108
  • 108
  • 101
  • 15,4

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: