Memahami maksud komentar kondisi IE | Web desainer dan developer pasti sudah sering sekali menemukan sintak komentar kondisi IE yang digunakan pada kode HTML untuk mengakomodir browser lama seperti Internet Explorer 5 (IE5) atau IE6.

komentar kondisi di IE

Komentar Kondisi di IE (Image: Slideshare.com)

Semenjak Internet Explorer 5, Statemen kondisi sudah digunakan untuk menampilkan atau menyembunyikan konten tambahan dari Internet Explorer.

Sintaks

Potongan kode dibawah ini adalah contoh untuk menambahkan stylesheet CSS hanya jika browser yang digunakan untuk membuka halaman website adalah Internet Exlorer versi 6 (IE6).

<!--[if IE 6]>
    						<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

HTML yang muncul diantara statemen IF akan ditambahkan ke dokumen jika halaman dibuka dengan browser Internet Explorer versi tertentu, pada contoh adalah IE6.

Untuk versi lain Anda bisa menggunakan seperti dibawah ini.

Nama Deskripsi
IE Semua versi Internet Explorer yang dibawah versi 10
IE 5, IE 6, IE 7, IE 8, IE 9 Hanya untuk versi disamping, IE10 tidak termasuk lagi

Anda juga bisa menggunakan modifier seperti dibawah ini sebagai tambahan statemen.

Nama Deskripsi
lt Semua versi yang dibawah versi
lte Semua versi yang kurang dari atau sama dengan
gt Semua versi yang lebih besar dari
gte Semua versi yang lebih besar atau sama dengan

Ekspresinya bisa ditambahkan dengan kombinasi seperti dibawah ini.

Nama Contoh Deskripsi
Not !(IE 6) Bukan Internet Explorer 6
And (gt IE 6)&(lt IE 9) Lebih besar dari Internet Explorer 6 dan kurang dari Internet Explorer 9
Or (IE 7)|(IE 8) Internet Explorer 7 atau Internet Explorer 8

Contoh dibawah ini misalnya, akan menambahkan file Javascript pada setiap versi Internet Explorer yang versinya 8 atau dibawah versi 8. Jadi versi 7 termasuk, sedangkan pada IE versi 9 Javascript tersebut tidak akan disertakan.

<!--[if lte IE 8]>
    <script type="text/javascript" src="ie.js"></script>  
<![endif]-->

Jika Bukan IE

Bahkan Anda bisa menyembunyikan sebuah elemen ketika browser yang digunakan adalah IE, sedangkan di browser selain IE maka elemen tersebut akan dimunculkan, sintaknya seperti berikut ini (ditandai dengan tanda seru ! yang berarti NOT IE / SELAIN IE).

<!--[if !IE]><!-->

<div>Hey dude, You are not using Internet Explorer (less than version 10)</div>

<!--<![endif]-->

Catatan:
Browser Internet Explorer 10 tidak mendukung tag kondisi seperti seperti diatas, IE10 akan dianggap sebagai browser non-IE.

Statemen if-else

Jika ada if biasanya dalam pemrograman akan selalu ada else dan if-else, Anda bisa mengkombinasikan statemen diatas menjadi seperti berikut, jika memang dibutuhkan kondisi yang beragam.

<!--[if IE]>

<div>You are using Internet Explorer (less than version 10)</div>

<![endif]-->
<!--[if !IE]><!-->

<div>You are not using Internet Explorer, or using IE version 10</div>

<!--<![endif]-->

Internet Explorer 10

Internet Explorer 10 sudah tidak support lagi komentar statemen kodisi seperti diatas (lihat dokumentasi IE 10).

WordPress

Jika Anda ingin menggunakan statemen diatas pada website yang dibuat dengan WordPress, atau jika Anda seorang pembuat theme WordPress, maka tag komentar statemen kondisi tersebut harus di taruh di bagian header, biasanya ada di file header.php pada folder theme Anda.

Referensi

Dokumentasi
Dokumentasi IE 10