Mengapa Tampilan Web Berbeda Di Tiap Browser

Pernahkah anda membuat sebuah halaman web? Semisal format halaman webnya adalah html. Kemudian kita buka di browser firefox, lalu buka di IE, kemudian buka di opera. Jika desainnya cukup kompleks akan terjadi perbedaan di browser tersebut. Mengapa demikian? kenapa tampilan web di setiap browser berbeda?.



Sebenarnya hal ini dikarenakan setiap browser menggunakan web browser engine yang berbeda. web browser engine bisa saja dipakai lebih dari satu browser misalnya, google chrome dan safari menggunakan web browser engine yang sama yaitu webkit, maka tampilan di kedua browser tersebut akan sama kecuali jika ada preferensi berbeda pada seting pada browsernya. Akan tetapi secara hasil olahan web browser engine dikedua browser ini akan menghasilkan output yang sama.

Web browser engine sendiri sering disebut layout engine atau rendering engine, yaitu sebuah komponen software (dalam hal ini komponen web browser) yang me-mark up kontent (seperti HTML, XML, images, dan sebagainya) dan memformat informasi (seperti CSS, JS, dll) kemudian menampilkan konten yang telah terformat tadi kedalam tampilan layar / screen.

Setiap web browser engine punya karakteristik sendiri dalam menerjemahkan sebuah tampilan web walaupun semua web browser engine juga mematuhi aturan konsorsium standar yang berlaku dalam pengembangan web. Setiap web browser engine akan menerjemahkan HTML, JS, CSS dengan berbeda seperti ukuran, tata letak dan sebagainya sesuai dengan aturan yang dibuat oleh masing-masing developer web browser engine.

Seperti yang sudah dibahas tadi, sebuah web browser engine bisa dipakai lebih dari satu browser seperti Google Chrome dan Safari menggunakan webkit, kemudian Mozilla Firefox dan Netscape menggunakan gecko sehingga secara default hasil olahan pada browser dengan web browser engine yang sama akan menghasilkan tampilan yang sama persis. Tapi bisa saja karena berbeda pengaturan preferensi sehingga pada kedua browser menghasilkan tampilan berbeda. misalkan pada google chrome pengaturan preferensi default sehingga semua elemen ditampilkan dengan rapi, sedangkan pada safari menggunakan pembesaran 200% sehingga menghasilkan tampilan yang lebih besar dan elemen dari halaman web berpindah.

Berikut adalah beberapa nama web browser engine dan browser yang memakainya.
  • Boxely - AOL applications
  • Gecko - Camino, Firefox, K-Meleon, SeaMonkey, Netscape, and other Gecko-based browsers
  • GtkHTML - Novell Evolution and other GTK+ programs
  • HTMLayout - embeddable HTML/CSS rendering engine - component for Windows and Windows Mobile operating systems
  • KHTML - Konqueror
  • NetFront - Access NetFront
  • NetSurf - NetSurf
  • Presto - Opera 7 and above, Macromedia Dreamweaver MX and MX 2004 (Mac), and Adobe Creative Suite 2
  • Prince XML - Prince XML
  • Robin - The Bat!
  • Tasman - Internet Explorer 5 for Mac, Microsoft Office 2004 for Mac, and Microsoft Office 2008 for Mac.
  • Trident - Internet Explorer since version 4.0 and embedded WebBrowser controls (such as Internet Explorer shells, Maxthon and some media players)
  • Tkhtml - hv3
  • WebKit - Safari, Arora, Midori, OmniWeb, Shiira, iCab since version 4, Epiphany, SRWare Iron, Google Chrome, Rekonq, IOS_(Apple) and in Maxthon 3.
 Sekian yang bisa saya sampaikan kurang lebihnya, jika kurang mohon maaf, jika lebih mohon dikembalikan ^^
Sekian Semoga Membantu

Powered by Danz

5 komentar:

  1. cara supaya interpretasi halamanan web yang diupload sama di berbagai browser bagaimana?..Apakah ada code html tertentu yang membuat tampilan menjadi sama di tiap browsernya?..

    BalasHapus
  2. Terima kasih atas komentarnya.
    Untuk kode / scriptnya saya juga tidak tahu apakah ada atau tidak untuk membuat tampilan sama.
    Tapi pada dasarnya walau web engine tiap browser berbeda, mereka tetap akan mengacu pada sebuah aturan web (konsorsium).

    untuk optimalisasi tampilan pada laman web, saya sarankan setidaknya anda menggunakan min 3 browser (opera, mozilla, ie 6) pada saat mendesain web.

    Kemudian saat mendesain, pastikan bahwa anda setidaknya mengikuti aturan-aturan dasar dari konsorsium web.
    sebagai contoh, untuk html versi 4 setidaknya anda harus memenuhi seperti berikut.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    </body>
    </html>

    untuk doctype itu menjelaskan tipe dokumen web yaitu html versi 4 jadi browser akan menterjemahkannya sesuai html versi 4.
    kemudian harus ada meta berisi charset yang menunjukan karakter set apa yang digunakan dalam konten web tersebut.
    sekian.

    BalasHapus
  3. wah mantab GAN sip... Suwun!!

    BalasHapus
  4. selamat malam..kalau pengalaman saya,emang yang beda sendiri itu kalo pakai internet explorer,hindari mengatur ukuran menggunakan auto,itu sih kalau dari pengalamanku..trimss.

    BalasHapus
  5. Artikel yang bagus, sob..salam kenal !

    BalasHapus

Silakan Comment Tapi yang membangun ya (Jangan Spam) (^.^)

Trend Minggu Ini