Pengubahan ukuran kolom URL

David Bokan
X

Perilaku pengubahan ukuran kolom URL 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 panel URL yang ditampilkan atau disembunyikan. Sebagai gantinya, unit vh akan diukur dengan tinggi area pandang seolah-olah panel URL selalu disembunyikan. Artinya, unit vh akan disesuaikan ukurannya dengan "area pandang terbesar yang mungkin". Artinya, 100vh akan lebih besar dari tinggi yang terlihat saat kolom URL ditampilkan.

Initial Containing Block (ICB) adalah blok penampung root yang digunakan saat mengukur elemen secara relatif terhadap induknya. Misalnya, memberikan gaya width: 100%; height: 100% ke elemen <html> akan membuatnya berukuran sama dengan ICB. Dengan perubahan ini, ICB tidak akan mengubah ukuran saat kolom URL disembunyikan. Sebagai gantinya, area pandang akan tetap sama tingginya, seolah-olah panel URL selalu ditampilkan ("area pandang terkecil yang mungkin"). Artinya, Elemen yang berukuran sesuai tinggi ICB tidak akan sepenuhnya mengisi tinggi yang terlihat saat kolom URL disembunyikan.

Ada satu pengecualian untuk perubahan di atas, yaitu untuk elemen yang position: fixed. Perilakunya tetap tidak berubah. Artinya, elemen position: fixed yang blok penampungnya adalah ICB akan mengubah ukurannya sebagai respons terhadap kolom URL yang ditampilkan atau disembunyikan. Misalnya, jika tingginya 100%, kolom ini akan selalu mengisi secara tepat tinggi yang terlihat, terlepas dari apakah kolom URL ditampilkan atau tidak. Demikian pula untuk panjang vh, panjang tersebut juga akan diubah ukurannya agar sesuai dengan tinggi yang terlihat dengan mempertimbangkan posisi panel URL.

Ada beberapa alasan untuk perubahan ini:

  • Unit vh yang dapat digunakan di perangkat seluler. Sebelum ini, menggunakan unit vh berarti halaman akan mengalir ulang dengan kasar setiap kali pengguna mengubah arah scroll.

  • Pengalaman pengguna yang ditingkatkan. Jika halaman di-reflow saat pengguna membaca, mereka mungkin kehilangan lokasi relatifnya dalam dokumen. Hal ini menjengkelkan, tetapi juga menyebabkan penggunaan prosesor dan konsumsi baterai tambahan untuk menata ulang dan mewarnai ulang halaman.

  • Peningkatan interoperabilitas dengan Safari di iOS. Model baru harus cocok dengan perilaku Safari, sehingga mempermudah developer web. Pilihan yang tidak intuitif untuk membuat unit vh menjadi area pandang terbesar, tetapi ICB sekecil mungkin adalah untuk mencocokkan perilaku Safari.

Untuk skenario layar penuh, saat kolom URL dikunci 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 ditampilkan saat men-scroll.

Demo

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

Dukungan

  • Chrome 56 di Android.