Model Kotak: Internet Explorer vs. W3C

Saat ini, masalah Internet Explorer Box Model sebagian besar non-isu. Sebagian besar pengembang web memasang <!DOCTYPE>tag untuk menegakkan kepatuhan standar, dan tidak ada yang benar-benar peduli lagi untuk mendukung Internet Explorer 5.5.

Namun, beberapa pengembang telah mengajukan argumen subyektif dan konseptual untuk mempertahankan model kotak IE. Mereka mengklaim bahwa model kotak IE lebih "intuitif" daripada model W3C, karena model W3C mengukur konten kotak, sedangkan model IE mengukur kotak itu sendiri:

Saya bisa melihat sudut pandang mereka, tapi itu pada dasarnya argumen subyektif, dan yang paling penting adalah kepatuhan standar .

Namun, baru-baru ini saya lebih suka model kotak IE karena alasan praktis yang serius . Model kotak W3C membuatnya sulit untuk secara dinamis mengubah ukuran elemen ke lebar piksel pada layar yang tepat dari elemen lain. Alasannya adalah bahwa style.widthproperti elemen tidak memperhitungkan ukuran total layar elemen: Anda juga perlu memperhitungkan batas dan bantalan tambahan. Ini bukan masalah jika kedua elemen menggunakan kelas CSS yang sama - tetapi jika mereka memiliki kelas CSS yang berbeda , ini bisa menjadi sangat menantang.

Misalkan kita memiliki dua div: A dan B. A adalah hard-coded di html sebagai div 400px, sedangkan B secara dinamis dibuat menggunakan Javascript. Secara visual, kami ingin B menjadi lebar tepat A. Di bawah model IE Box lama, ini sepele. Kami hanya mengatakan:, B.style.width = A.style.widthatau bahkan B.style.width = A.offsetWidth + "px".

Tetapi dengan model kotak W3C, ini tidak begitu sederhana. Sekarang kita juga harus khawatir tentang style sheet. Jika B memiliki kelas CSS yang sama dengan A, kita bisa mengatakan B.style.width = A.style.width. Tetapi jika tidak - dan kita mungkin tidak menginginkannya karena alasan estetika - kita dalam masalah. Sekarang kita harus memperhitungkan total piksel di perbatasan dan bantalan kedua A dan B. Ini bisa sangat sulit jika perbatasan dan bantalan ditentukan dalam unit yang tidak konsisten (kejadian umum karena perbatasan sering garis 1px, sedangkan bantalan mungkin ditentukan dalam ems). Kemudian kita dihadapkan dengan tugas semu-mustahil untuk mengkonversi ke unit umum (em ke px atau px ke em). Semua ini hanya untuk mendapatkan dua divs untuk berbaris tepat di layar.

Jadi pada dasarnya, model kotak W3C memaksa kita untuk mempertimbangkan masalah batas CSS dan padding ketika kita mengatur ukuran elemen, sedangkan model kotak IE tidak, karena lebar mengukur seluruh ukuran kotak (end-to -akhir), bukan isi kotak. Ini membuatnya lebih mudah untuk secara dinamis mengukur elemen dalam hubungannya satu sama lain.

Semua ini tampak seperti alasan yang cukup kuat untuk mendukung kotak-model IE daripada model W3C (setidaknya secara konseptual - tentu saja dalam praktiknya kotak-model IE sudah mati).

Pertanyaan : Mengapa W3C memilih model kotak ini? Apakah ada beberapa keuntungan dari model kotak W3C yang tidak saya lihat? Atau apakah saya hanya melebih-lebihkan masalah di sini?

Pilihan apakah akan memasukkan padding dan border ke lebar atau tidak adalah arbitrer. Satu-satunya hal yang penting adalah membangun tata letak multi-kolom. Namun, Anda harus memperhatikan fakta bahwa orang menggunakan tabel untuk tata letak pada waktu itu. Jadi bagi mereka kekhawatiran itu tampaknya tidak cukup penting dan mereka menganggap bahwa dapat menentukan lebar pasti yang akan ditempati oleh konten itu sendiri dalam CSS tampak jauh lebih berharga.

Untuk pengembang saat ini situasinya tampak sangat berbeda karena mereka menggunakan CSS untuk tata letak dan mereka harus berurusan dengan model tinju CSS. Untungnya kami memiliki kemampuan untuk mengesampingkan aturan tinju sehingga dalam kebanyakan kasus aturan sederhana di bagian atas stylesheet Anda berfungsi dengan sangat baik:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

Mengutip Jeff Kaufman tentang masalah ini :

Mengingat bahwa spec mendefinisikannya dengan cara lain, sinyal yang dikirim ke Microsoft untuk mengadopsi salah tafsir mereka akan berdampak buruk bagi web. Microsoft sudah menggunakan pendekatan merangkul, memperluas, dan memadamkan, di mana mereka sengaja membuat produk yang bertindak berbeda dari pesaing untuk mengunci pengguna ke dalam versi Microsoft. Mereka nyaris berhasil dengan web: dari sekitar 2000 hingga 2005 IE sangat populer sehingga banyak situs yang dirancang hanya untuk itu. Mengadopsi pendekatan IE di sini mungkin akan mengatakan kepada Microsoft "Anda dapat melakukan apa pun yang Anda inginkan dengan IE dan kami akan menyesuaikan standar untuk membuatnya legal".

Jadi model kotak jatuh korban perebutan kekuasaan antara W3C dan Microsoft.