insignificant words

Buat yang biasa berurusan dengan web design, HTML dan CSS, biasanya juga sering pusing dengan browser ‘manja’ yang celakanya penggunanya juga relatif banyak — Internet Explorer (IE).

Tata letak sudah bagus dan sesuai keinginan di Firefox, Opera dan Safari, tapi hancur lebur tak karuan di IE. Diakali supaya tampil bagus di IE, kadang posisinya jadi kacau di browser lainnya. Dan para klien umumnya tak mau tahu tentang masalah browser ‘manja’ ini — tentoe sadja.

Ini adalah tips singkat bagaimana cara mengakalinya. Barangkali sudah tahu, tapi kalau belum tahu silakan dicoba. Buat dahulu CSS untuk Firefox (yang umumnya tidak ada masalah signifikan di Opera dan Safari):

#id {
margin: 10px;
}

Lalu tambahkan kode yang hanya dibaca oleh IE6. Berikan parameter yang sesuai untuk tampilan IE6:

* html #id {
margin: 5px;
}

Baris berawalan * html itu hanya dibaca oleh IE6. Browser lain akan mengabaikannya.

Lalu bagaimana dengan IE7? Ternyata tak kalah manja. Malah perlu penanganan berbeda. Berikan kode khusus dan parameter yang sesuai untuk tampilan IE7:

*:first-child+html #id {
margin: 2px;
}

IE7 akan membaca baris berawalan *:first-child+html, sementara browser lain akan mengabaikannya.

Sepertinya agak ribet. Memang sih. Tapi yah ini salah satu cara berkompromi. Lagipula tidak semua #id dan .class perlu diperlakukan seperti ini. Cukup di bagian yang bermasalah saja.

Urutan penulisan yang direkomendasikan adalah seperti di bawah ini:

#id {
}

/* IE6 hack */
* html #id {
}

/* IE7 hack */
*:first-child+html #id {
}