Tinggalkan Doctype untuk Menempatkan Peramban ke Mode Quirks
Jika Anda telah mendesain halaman web selama lebih dari beberapa bulan, Anda kemungkinan besar menyadari kesulitan dalam menulis halaman yang tampak sama di semua browser . Pada kenyataannya, itu tidak mungkin. Banyak browser ditulis dengan fitur-fitur khusus yang hanya bisa mereka tangani. Atau mereka memiliki cara khusus menangani hal-hal yang berbeda dari cara peramban lain menangani mereka. Sebagai contoh:
- Lapisan dibuat untuk digunakan di browser Netscape. Mereka tidak berfungsi di peramban lain, dan sebenarnya sudah tidak digunakan lagi di Netscape 6.x +.
- Kerangka inline awalnya dibuat untuk Internet Explorer saja, dan sejak itu menjadi bagian dari spesifikasi HTML.
- Internet Explorer 6.0 menambahkan ruang tambahan (seperti
) sekitarnya tag, kecuali Anda menulis isi dari div semua pada satu (panjang) baris. (IE 6 memiliki banyak quirks juga yang satu ini.) - Netscpe 4.7 tidak akan menampilkan tabel yang tidak ditulis dalam HTML yang benar - ini menunjukkan halaman kosong. Ini telah diperbaiki di Netscape 6.
Masalah bagi pengembang peramban adalah mereka harus membuat peramban web yang kompatibel dengan laman web yang dibuat untuk peramban yang lebih lama. Untuk mengatasi masalah ini, pembuat peramban menciptakan mode untuk mengoperasikan peramban. Mode ini ditentukan oleh ada atau tidaknya elemen DOCTYPE dan apa yang DOCTYPE panggil.
DOCTYPE Berpindah dan "Mode Quirks"
Jika Anda memasukkan DOCTYPE berikut di halaman web Anda:
Peramban modern (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) akan menafsirkan ini dengan cara berikut:
- Karena ada DOCTYPE yang ditulis dengan benar, ini memicu mode standar.
- Ini adalah dokumen Transisi HTML 4.01
- Karena dalam mode standar, sebagian besar peramban akan menjadikan konten sesuai (atau sebagian besar sesuai) dengan HTML 4.01 Transisi
Dan jika Anda menempatkan DOCTYPE ini di dokumen Anda:
Ini memberitahu browser modern bahwa Anda ingin menampilkan halaman HTML 4.01 Anda secara ketat sesuai dengan DTD.
Browser ini akan masuk ke mode "ketat" atau "standar" dan merender laman sesuai dengan standar. (Jadi, untuk dokumen ini, tag seperti mungkin sepenuhnya diabaikan oleh browser, karena elemen FONT telah ditinggalkan dalam HTML 4.01 Strict.)
Jika Anda meninggalkan DOCTYPE sepenuhnya, browser secara otomatis akan ditendang ke mode "quirks".
Tabel di bawah ini menunjukkan apa yang umum dilakukan browser ketika disajikan dengan deklarasi DOCTYPE umum yang berbeda.
Microsoft Membuatnya Lebih Keras
Internet Explorer 6 juga memiliki fitur bahwa jika Anda memasukkan sesuatu di atas deklarasi DOCTYPE, mereka akan masuk ke mode quirks. Jadi, kedua contoh ini akan menempatkan IE 6 ke dalam mode quirks, meskipun deklarasi DOCTYPE mengatakan berada dalam mode standar yang ketat:
dan XHTML 1.1 DOCTYPE:
Plus, jika Anda berhasil melewati IE6, maka Anda memiliki "fitur" yang ditambahkan Microsoft di IE8 dan IE9: switching elemen META dan daftar hitam situs web. Faktanya, kedua versi browser ini sekarang memiliki hingga tujuh (!) Mode yang berbeda:
- Mode IE 5,5 quirks (IE 8 dan 9)
- IE 7 mode standar (IE 8 dan 9)
- IE 8 mode hampir standar (IE 8 dan 9)
- IE 8 mode standar (IE 8 dan 9)
- IE 9 mode hampir standar (IE 9)
- Mode IE 9 standar (IE 9)
- Mode XML (IE 9)
IE 8 juga memperkenalkan "Mode Kompatibilitas" di mana pengguna dapat memilih untuk mengubah model rendering kembali ke mode IE 7. Sehingga bahkan jika Anda mengatur mode yang ingin Anda atur menggunakan kedua elemen DOCTYPE dan META, halaman Anda masih bisa didorong kembali ke mode yang kurang standar-compliant.
Apa itu Mode Quirks?
Mode quirks dibuat untuk membantu menangani semua perenderan aneh dan dukungan peramban yang tidak sesuai dan peretasan yang digunakan perancang web untuk menangani hal-hal tersebut. Perhatian yang dimiliki oleh produsen browser adalah jika mereka mengalihkan browser mereka ke spesifikasi lengkap, desainer web akan tertinggal.
Dengan mengatur pengalihan DOCTYPE dan "Mode Quirks" ini memungkinkan perancang web untuk memilih bagaimana mereka ingin browser untuk membuat HTML mereka.
Efek Mode Quirks
Ada beberapa efek yang digunakan sebagian besar browser dalam Mode Quirks:
- Di beberapa browser, model kotak berubah ke versi 5.5 IE dari model kotak dalam mode quirks.
- Beberapa browser tidak mewarisi gaya ke dalam tabel
- Mode quirks memengaruhi penguraian tata letak CSS dan CSS secara dramatis, jika Anda mengonversi halaman ke mode standar dari mode quirks, pastikan untuk menguji tata letak CSS dan penguraian secara ekstensif.
- Perhatikan perubahan pada scripting ketika dalam mode quirks. Firefox mengubah cara kerja atribut id, misalnya. IE8 dan IE9 memiliki perubahan yang sangat dramatis pada scripting dalam mode quirks.
Ada juga perbedaan dalam "Hampir Standar Mode:"
- Ketinggian sel tabel dengan hanya gambar di dalam dihitung secara berbeda dari mode standar.
Cara Memilih DOCTYPE
Saya membahas lebih detail dalam daftar DOCTYPE artikel saya, tetapi berikut ini beberapa aturan umum:
- Selalu pilih mode standar dulu. Dan standar saat ini yang harus Anda gunakan adalah HTML5: Kecuali Anda memiliki alasan khusus untuk menghindari penggunaan HTML5 DOCTYPE, inilah yang seharusnya Anda gunakan.
- Masuk ke HTML 4.01 yang ketat jika Anda perlu memvalidasi elemen lama atau ingin menghindari fitur baru karena beberapa alasan:
- Jika Anda telah memotong gambar dalam tabel dan tidak ingin memperbaikinya, buka Transitional HTML 4.01:
- Jangan menulis halaman dengan sengaja dalam mode quirks. Selalu gunakan DOCTYPE. Ini akan menghemat waktu pengembangan Anda di masa depan, dan benar-benar tidak bermanfaat. IE6 dengan cepat kehilangan popularitas dan dengan merancang untuk browser ini (yang pada dasarnya apa yang merancang dalam mode quirks) Anda membatasi diri Anda sendiri, pembaca Anda, dan halaman Anda. Jika Anda harus menulis untuk IE 6 atau 7, gunakan komentar kondisional untuk mendukung mereka, daripada memaksa browser modern ke mode quirks.
Mengapa Gunakan DOCTYPE
Setelah Anda mengetahui jenis pengalihan DOCTYPE ini, Anda dapat memengaruhi halaman web Anda secara lebih langsung dengan menggunakan DOCTYPE yang menunjukkan apa yang diharapkan oleh browser dari halaman Anda. Juga, setelah Anda mulai menggunakan DOCTYPE, Anda akan menulis HTML yang lebih mendekati valid (Anda masih harus memvalidasi). Dan dengan menulis XHTML yang valid, Anda mendorong pembuat browser untuk membangun browser yang sesuai standar.
Versi Peramban dan Mode Quirks
DOCTYPE | Android Chrome Firefox IE 8+ iOS Opera 7.5+ Safari | IE 6 IE 7 Opera 7 | Netscape 6 |
---|---|---|---|
Tidak ada | Mode Quirks | Mode Quirks | Mode Quirks |
HTML 3.2 | |||
Mode Quirks | Mode Quirks | Mode Quirks | |
HTML 4.01 | |||
Transisi | Mode Standar * | Mode Standar * | Mode Standar |
Transisi | Mode Quirks | Mode Quirks | Mode Quirks |
Ketat | Mode Standar | Mode Standar * | Mode Standar |
Ketat | Mode Standar | Mode Standar * | Mode Standar |
HTML5 | |||
Mode Standar | Mode Standar * | Mode Quirks | |
* Dengan DOCTYPE ini, browser mendekati standar, tetapi memiliki beberapa masalah — pastikan untuk menguji. Ini juga dikenal sebagai "Hampir Modus Standar." |