Pengubahan ukuran kolom URL

David Bokan

Perilaku pengubahan ukuran kolom URL akan berubah di Chrome pada Android mulai versi 56. Berikut ini beberapa hal yang perlu diketahui:

Panjang yang ditentukan dalam unit area pandang (yaitu vh) tidak akan diubah ukurannya sebagai respons terhadap kolom URL yang ditampilkan atau disembunyikan. Sebagai gantinya, unit vh akan disesuaikan ukurannya dengan tinggi area pandang seolah-olah kolom URL selalu disembunyikan. Artinya, unit vh akan diukur ke "area pandang terbesar yang memungkinkan". Ini berarti 100vh akan lebih besar dari tinggi yang terlihat saat kolom URL ditampilkan.

Blok Penahan Awal (ICB) adalah blok berisi root yang digunakan saat mengubah ukuran elemen yang relatif dengan induknya. Misalnya, memberi elemen <html> gaya width: 100%; height: 100% akan membuatnya sama ukurannya dengan ICB. Dengan perubahan ini, ICB tidak akan mengubah ukuran saat kolom URL disembunyikan. Namun, tingginya akan tetap sama, seolah-olah kolom URL selalu ditampilkan ("area pandang terkecil yang memungkinkan"). Artinya, Elemen yang berukuran sama dengan tinggi ICB tidak akan sepenuhnya mengisi tinggi yang terlihat saat kolom URL disembunyikan.

Ada satu pengecualian untuk perubahan di atas dan itu untuk elemen yang merupakan position: fixed. Perilaku mereka tidak berubah. Artinya, elemen position: fixed yang blok penampungnya adalah ICB akan diubah ukurannya sebagai respons terhadap kolom URL yang ditampilkan atau disembunyikan. Misalnya, jika tingginya adalah 100%, tingginya akan selalu mengisi dengan persis tinggi yang terlihat, terlepas dari apakah kolom URL ditampilkan atau tidak. Demikian pula untuk panjang vh, ukuran juga akan diubah agar sesuai dengan tinggi yang terlihat dengan mempertimbangkan posisi kolom URL.

Ada beberapa alasan untuk perubahan ini:

  • Unit vh dapat digunakan di seluler. Sebelumnya, penggunaan unit vh berarti halaman akan mengalami perubahan posisi/geometri setiap kali pengguna mengubah arah scroll.

  • Peningkatan pengalaman pengguna. Jika halaman berubah posisi/geometrinya saat pengguna sedang membaca, mereka mungkin kehilangan lokasi relatifnya di dokumen. Hal ini menjengkelkan, tetapi juga menyebabkan penggunaan prosesor dan pengurasan baterai tambahan untuk menata ulang dan menggambar ulang halaman.

  • Interoperabilitas yang ditingkatkan dengan Safari di iOS. Model baru ini harus sesuai dengan perilaku Safari, sehingga mempermudah pekerjaan developer web. Pilihan yang tidak intuitif untuk menjadikan unit vh sebagai area pandang terbesar, tetapi ICB menjadi yang terkecil adalah untuk mencocokkan perilaku Safari.

Untuk skenario layar penuh, dengan kolom URL terkunci ke status tersembunyi, ICB akan menggunakan tinggi layar penuh. Hal ini konsisten dengan definisi di atas karena "area pandang terkecil" akan menjadi area pandang penuh karena kolom URL tidak muncul saat di-scroll.

Demo

  • Berikut demonstrasinya. Empat batang di sebelah kanan halaman adalah semua kemungkinan kombinasi 99%, 99vh, position:fixed, dan position:absolute yang disediakan pada halaman yang dapat di-scroll. Menyembunyikan kolom URL akan menunjukkan pengaruhnya terhadap setiap kolom. Peristiwa pengubahan ukuran akan ditampilkan di bawah halaman.

Dukungan

  • Chrome 56 di Android.