Google Developers Indonesia Blog: Meningkatkan kompatibilitas browser Chromium pada tahun 2020

Meningkatkan kompatibilitas browser Chromium pada tahun 2020

02 July 2020

Tahun lalu, MDN menjalankan survei Web Developer Needs Assessment (DNA) 2019. Survei DNA menarik respons lebih dari 28.000 developer dari seluruh dunia, bersama-sama menyumbang lebih dari 10.000 jam analisis tentang apa yang sedang dan tidak bekerja di web saat ini, dan bagaimana web perlu berubah untuk memenuhi kebutuhan komunitas developer.

Ada banyak kebutuhan yang diungkapkan dalam hasil survei, tetapi yang paling menonjol adalah kompatibilitas browser - ini adalah bagaimana situs terlihat atau berperilaku secara berbeda pada browser web yang berbeda. Jelas bukanlah hal yang mudah mengembangkan situs atau aplikasi web yang bekerja dengan andal di seluruh browser.

Div yang terlihat berbeda di setiap browser (oleh Martijn Cuppens) - masih seperti itu hingga hari ini!

Untuk berfokus pada kebutuhan developer khusus, MDN menjalankan survei lanjutan pada Maret 2020 - Survei Kompatibilitas Browser MDN. Survei ini, diikuti oleh lebih dari 3000 developer web dan dilengkapi dengan wawancara pasca survei, bertujuan untuk mengungkap hal-hal tertentu yang menyulitkan komunitas developer web yang berkaitan dengan kompatibilitas browser. Hari ini saya ingin berbicara tentang hasil survei tersebut, dan apa yang kami - Google Chrome - lakukan terhadap hasil survei ini.

Penting untuk ditekankan bahwa ini hanyalah beberapa temuan awal dari survei Kompatibilitas Browser MDN dan berfokus pada hal-hal tertentu yang menyulitkan developer terkait dengan Chrome.

Flexbox

Flexbox adalah fitur yang ampuh untuk layout di web. Flexbox menawarkan cara ergonomis untuk mendefinisikan layout yang akan merespons dengan baik terhadap berbagai viewport. Tetapi kekuatan ini juga akan sia-sia jika ia tidak dapat diandalkan di seluruh browser. Flexbox adalah salah satu prioritas utama kami untuk kompatibilitas browser di seluruh web pada tahun 2020, dan kami telah banyak berinvestasi di dalamnya.

Tim rendering Chrome telah mengerjakan arsitektur ulang implementasi flexbox Chromium di atas engine layout LayoutNG modern kami. Pekerjaan ini, yang kami rencanakan akan dihadirkan ke Chrome 84, diharapkan dapat memperbaiki sejumlah masalah kompatibilitas Flexbox di Chromium.

Kami juga berupaya menghadirkan dukungan flex-gap dan fieldset+flex ke Chromium tahun ini. Bahkan, flex-gap akan tersedia di Chrome 84 - cobalah dan beri tahu kami pendapat Anda.

Scroll

Menghadirkan scroll yang pas dalam sebuah browser bukanlah hal yang mudah. Menghadirkan scroll yang pas dalam beberapa browser adalah hal yang sangat sulit (misalnya, dibutuhkan seluruh library untuk secara konsisten mengunci scroll isi). Kami masih menggali seluruh masukan tentang kompatibilitas scroll, tetapi beberapa area utama yang menonjol sejauh ini adalah:

Bagaimana keyboard virtual memengaruhi - atau tidak memengaruhi - unit viewport di browser yang berbeda. (Perhatikan pekerjaan terbaru dari Microsoft Edge mengenai VirtualKeyboard API yang mungkin bisa membantu di sini.)
Kurangnya konsistensi dalam event terkait input, dan hasil interaksi dengan mereka (mis. apa yang terjadi ketika Anda preventDefault() sebuah touchmove).
Kesulitan mengontrol bagaimana perilaku scroll di seluruh browser (mis. melalui scroll anchoring).

Kami berencana memulai di sini dan memahami dengan lebih baik lagi sehingga kami bisa secara efektif meningkatkan scroll di web. Oleh karena itu, kami perlu terus mendengar dari Anda. Silakan terus beri tahu kami tentang kesulitan kompatibilitas scroll Anda - terutama yang terkait dengan Chrome.

Kontrol formulir

Formulir adalah bagian web yang sangat lama, ditambahkan bahkan sebelum CSS. Kontrol formulir ditujukan untuk meniru tampilan dan nuansa platform native, tetapi jelas bahwa mereka telah gagal melakukannya secara konsisten dan juga gagal mengikuti kebutuhan pengembangan web modern. Survei kompatibilitas memunculkan dua tema umum di sini: penataan gaya dan perilaku yang tidak konsisten di seluruh browser.

Pada kontrol formulir penataan gaya, tim Microsoft Edge dan Google Chrome baru-baru ini menyelesaikan project satu tahun untuk memperbarui dan mengupdate gaya formulir default di browser berbasis Chromium. Pembaruan yang sangat dibutuhkan ini memodernisasi tampilan default dan menghadirkan aksesibilitas dan dukungan sentuh yang disempurnakan. Namun, jelas bahwa tanpa kontrol lebih lanjut tentang bagaimana kontrol formulir ditata, mereka masih menyebabkan kesulitan kompatibilitas untuk developer web. Kami tidak memiliki pengumuman apa pun hari ini, tetapi kami akan terus memperhatikan penataan gaya formulir selama tahun 2020.

Model lama keluar, model baru masuk; beberapa pembaruan kontrol formulir yang mendarat di Chrome 83. (selengkapnya di entri blog).

Dalam hal perilaku, tampaknya ada kekhawatiran umum bahwa perilaku kontrol formulir tidak ditetapkan dengan baik atau spesifikasinya tidak secara konsisten diikuti oleh browser. Beberapa contoh konkret inkonsistensi antar browser yang kami dengar adalah dukungan untuk tipe <input> tertentu, perilaku IsiOtomatis, dan perilaku restorasi konten saat meninggalkan dan kembali ke halaman yang berisi formulir. Sekali lagi kami belum mengumumkan secara spesifik, tetapi kami akan terus memperhatikan area ini.

CSS Grid

Seperti Flexbox, CSS Grid adalah komponen penting dari layout modern. Melihat hasil survei awal sepertinya cerita dukungan CSS Grid di Chromium cukup baik (semua ini berkat teman kami dari Igalia!). Ada satu pengecualian - Chromium masih belum mendukung subgrid.

Semoga subgrid segera didukung dalam waktu dekat. Ini masih awal, tetapi saya senang bisa berbagi bahwa tim di Microsoft Edge sedang mengerjakan penataan ulang dukungan Grid Chromium untuk menggunakan engine LayoutNG yang baru - dan di dalamnya termasuk rencana penambahan dukungan subgrid! Kami sangat menantikan kehadiran fitur ini dan ingin menyampaikan penghargaan kami kepada mitra kami di Microsoft, Igalia, dan banyak kontributor Chromium lainnya yang telah mengerjakan dukungan CSS Grid.

Meluncurkan fitur di web

Tidak seperti banyak platform, web memiliki banyak implementasi. Hal ini memiliki kelemahan, tetapi juga merupakan salah satu kekuatan web terbesar. Ini memperluas keragaman input ke dalam platform web, dan memberikan faktor perlindungan terhadap kesalahan arsitektural yang bisa terjadi ketika seseorang mengaburkan platform (web) dan implementasi (satu browser).

Di Chrome, kami sangat yakin dalam memajukan web, dan mengirimkan fitur-fitur baru yang membawa manfaat bagi pengguna dan developer. Namun, jelas dari Survei Kompatibilitas Browser MDN bahwa beberapa developer khawatir tentang bagaimana hal ini dapat memengaruhi kompatibilitas. Kami tidak akan berhenti memajukan web, tetapi kami berencana untuk lebih teliti lagi dalam model pendekatannya dan cara kami berkomunikasi tentang kompatibilitasnya. Nantikan informasi selengkapnya tentang hal ini.

Kesimpulan

Ketika menyangkut kompatibilitas browser, masih terlalu banyak fitur yang hilang dan bug di situasi ekstrem. Namun tentu segalanya bisa berubah. Segala sesuatunya bisa dan akan menjadi lebih baik, jika vendor browser dapat memahami apa yang paling menyebabkan kesulitan, dan mengambil tindakan untuk mengatasi penyebabnya. Di Chrome kami melakukan yang terbaik untuk mendengarkan, dan kami melakukan yang terbaik untuk mengatasi setiap masalah yang kami dengar. Kami harap ini membantu, dan kami menantikan 2021 yang lebih kompatibel.

Untuk semua hal di atas, silakan beri tahu kami apakah kami benar atau salah. Tweet kami, laporkan bug, dan bintangi masalah yang menurut Anda harus kami prioritaskan, isi formulir ini, ikut serta dalam survei web berikutnya. Suara Anda penting bagi kami dan merupakan faktor utama dalam menentukan pekerjaan yang akan kami prioritaskan.