Membuat pemrograman kondisional didalam HTML

Seandainya anda telah membuat desain sebuah website yang paling rumit dengan menggunkan HTML dan CSS. Dan entah mengapa ketika dibuka di Internet Explorer dan Firefox tampilannya berbeda. Walaupun sudah dutak-atik sampai mampus tetap saja ada yang berbeda tampilannya antara IE dan Firefox. Satu-satunya cara yaitu membuat CSS yang berbeda untuk browser IE dan Firefox. Tapi bagaimana caranya kita mengenali browser apa yang digunakan?

Kita tidak perlu menggunakan Javascript untuk melakukan hal tersebut. Karena didalam HTML pun ada pemrograman kondisional dimana kita bisa mendeteksi bahwa browser yang digunakan adalah IE.
Pemrograman kondisional ini hanya dapat berjalan di browser Internet Explorer saja.

Oke daripada bingung langsung saja anda perhatikan contoh berikut ini, simpan dengan nama kondisi.html:












Oke jika anda lihat, kondisional diletakkan didalam tag comment . Kode tersebut berarti jika browser anda Internet Explorer 7, maka tulisan diantara [if IE 7] sampai [endif] akan dijalankan. Silahkan anda coba jalankan kode tersebut menggunakan Internet Explorer 7 dan Firefox, bandingkan. Mudah kan, jika anda pengguna IE 6 tinggal ubah angka 7 nya menjadi 6 saja.

Bagaimana jika kita ingin agar untuk semua versi Internet Explorer kodenya dijalankan. Kita cukup menggunakan lte (Less than). Jadi kodenya menjadi seperti ini:












Jalankan dengan browser IE versi berapa saja maka tulisan "Ini pake IE Lho" akan ditampilkan. Tetapi apabila anda menggunakan Firefox, Opera atau lainnya tulisan tersebut tidak akan tampil. Oke sekarang kembali ke permasalahan semula, jadi apabila anda membua desain yang terlihat beda di IE dan Firefox, maka anda perlu membuat CSS yang benar untuk Firefox. Kemdudian dengan menggunakan teknik diatas kita menambahkan CSS untuk IE, sehingga tampilan kita akan terlihat sama di IE dan Firefox

Oke, langsung saja kita coba kode berikut ini:

Mozilla Firefox

Internet Explorer

Jika anda jalankan dengan browser apapun selain IE, maka tulisan Mozilla Firefox akan menjadi tebal. Ini dikarenakan class .firefox dibuat tebal pada CSS yang pertama. Dan apabila kita menggunakan IE, maka CSS yang pertama dijalankan dan ketika ia membaca kondisi, maka CSS didalam kondisi dijalankan. Karena CSS yang dikondisi memiliki class yang sama, maka CSS yang sebelumnya akan di replace dengan CSS yang didalam kondisi, dimana class .ie yang menjadi tebal.

Mudah kan? teknik seperti ini sangat berguna apabila anda sudah mentok dan bingung kenapa kode CSS anda tampil beda di IE dan Firefox.