June 28, 2014

Kompatibilitas Browser

Tahukah kalian kalau setiap web browser menampilkan web yang kita buat dengan cara yang berbeda-beda? Kadang-kadang kode yang sama bisa menghasilkan tampilan yang berbeda jika dilihat dari browser yang berbeda. Tampilan di Chrome kadang bisa beda dengan tampilan di Firefox. Hal ini bisa terjadi karena perbedaan rendering engine yang digunakan oleh browser tersebut.

Selain perbedaan browser, perbedaan versi juga bisa menghasilkan tampilan berbeda. Tampilan di Chrome 30 bisa berbeda dengan tampilan di Chrome 27. Hal ini terjadi karena di setiap update terbaru, adafitur & fungsi yang ditambahkan. Fitur (baik HTML, CSS, maupun JS) terbaru mungkin tidak berjalan di browser-browser jadul. Oleh karena itu, berhati-hatilah dalam menggunakan fitur-fitur baru.

Terus? Apakah kompatibilitas bisa jadi masalah? #

Yap. Website yang dibuat di browser favorit kita, dan sudah dirasa sempurna, mungkin akan kacau balau ketika ditampilkan di browser user. Contohnya ketika website kita tampil perfect di Chrome 30, tapi tampil mengenaskan ketika tampil di Internet Explorer 6.

Lalu bagaimana dong? #

Walaupun tampil sama persis di semua browser, kita bisa kembali lagi ke pertanyaan paling fundamental di dunia web development. Yaitu: untuk apa website dibuat? Jawaban standardnya adalah: untuk menampilkan informasi kepada user. Jadi, tidak masalah kalau informasinya bisa tersampaikan walaupun setiap browser menampilkannya dengan cara yang berbeda. Kalau masih tidak percaya, coba lihat Do websites need to be experienced exactly the same in every browser?. Browser baru akan menampilkannya dengan efek-efek tambahan, tetapi browser lama tetap menampilkan pesan yang ada di dalamnya dengan baik.

Tips untuk mengatasi kompatibilitas browser #

1. Fokus ke informasi yang ingin disampaikan #

Jangan tergiur dengan fitur-fitur terbaru yang serba keren, cek dulu kompatibilitasnya. Kalau memang fitur tersebut masih eksperimental, gunakan vendor prefix.

2. Gunakan metode progressive enhancement #

Progressive enhancement adalah membuat website dari bentuk paling sederhana (agar bisa ditampilkan browser jadul), kemudian step-by-step dikembangkan menuju bentuk yang lebih kompleks (yang bisa ditampilkan oleh browser modern). Biasanya digunakan tools feature detection seperti Modernizr.

3. Gunakan metode graceful degradation #

Graceful degradation adalah kebalikan dari progressive enhancement, intinya membuat website yang kompleks, namun step-by-step ada fallback handling apabila ada fitur yang tidak disupport suatu browser.

4. Pastikan kodingan kita valid dan universal #

Ada beberapa fitur yang hanya ada di browser tertentu, dan tidak ada di browser lain.

5. Test dengan banyak browser sekaligus #

Pastikan setiap kali koding, jangan hanya ditampilkan dengan satu browser, tapi juga dengan browser-browser lain. Terutama dengan Chrome, Firefox, Safari, Internet Explorer, dan Opera. Kalau perlu, test juga dengan mobile browser.

Resources #

http://caniuse.com/ Untuk mengecek apakah sebuah fitur bisa digunakan di browser-browser tertentu.
http://validator.w3.org/ Untuk mengecek apakah kode HTML kita valid.

Bacaan lebih lanjut #

Kudos