Blog

Seperti yang kita tahu, IE “sangat spesial”. Karena ia tidak mengikuti aturan standar yang sudah ditetapkan. Maka dari itu, ternyata banyak cara (biasa disebut dengan “hack“) yang bisa kita lakukan agar IE mengerti apa yang kita inginkan.

Ada beberapa tips yang mungkin bisa berguna. Beberapa diantaranya mungkin sudah ada yang tahu.

Sampai saat ini, yang saya tahu ada 3 cara memperlakukan IE dengan amat spesial. Kita akan bahas ini.

1. Gunakan Conditional Comment
Hanya IE yang bisa begini. Hihihi. Yah begitulah IE, tag komentar juga bisa ia eksekusi. Jika biasanya kita cukup menggunakan tag dibawah ini untuk mengikutsertakan file CSS ke dalam sebuah halaman,

<link rel=”stylesheet” type=”text/css” href=”template.css” />

maka, dengan sedikit perubahan, hanya IE yang mengerti. Jadi, tag dibawah ini memang khusus untuk IE.

<!–[if ie]>
<link rel=”stylesheet” type=”text/css” href=”template_ie.css”></link>
<![endif]–>

Kekurangan:
Terlalu repot membuat 2 file sekaligus. Jika terdapat beberapa perubahan, maka kedua file juga harus di ubah. Perlu waktu, usaha, dan niat yang keras untuk menjalankan ini. This way, is not recommended!

2. Gunakan Underscore ( _ )
Lagi-lagi, hanya IE yang mengerti. Jika memang terdapat masalah lebar antara IE dan Firefox, seperti diungkapkan pada kode CSS berikut:

padding-left:10px;
width:100px;

Ada masalah dengan lebar elemen antara IE dan Firefox? cukup tambahkan sedikit kode. Syaratnya, harus berada di bawah kode yang akan kita rubah. Lihat kode berikut:

padding-left:10px;
_padding-left:8px;
width:100px;

Simpel? Mudah? Ya, pasti! Semua property CSS bisa kita perlakukan sama seperti diatas.

Kekurangan:
Hanya ada satu kekurangan dengan option ini. TIDAK VALID! Tapi kalau memang anda bukan penjunjung tinggi ke-valid-an tiap halaman, ini bisa digunakan. But, this is not recommended too.

3. Gunakan kata kunci !important
Dari kedua option di atas, belum ada yang recomended.

Sebenarnya, kata kunci !important dimaksudkan untuk mengabaikan semua style dan menganggap style yang berlaku adalah yang ditambahkan tanda !important.

Kita ambil contoh.

<div class=”class1″ style=”text-align:center”>CSS</div>

Secara default, div diatas akan menampilkan kata CSS di tengah-tengah. Tapi, kita ingin agar text yang berada di dalamnya berada di kiri. Apa yang bisa kita lakukan?

Kita buat style berikut:
.class1 {
text-align:left;
}

Is that enough? ow, not yet! Style yang sudah kita buat seperti diatas tidak cukup kuat untuk membuat kata CSS berada di kiri. Kita perlu kata kunci !important untuk mengacuhkan style lain dan memberi prioritas kepada style yang kita definisikan !important.

Nah, berbeda dengan IE. Kata kunci !important bagi IE adalah biasa saja. Tapi tidak bagi Firefox dan Opera. Jika kita mengambil contoh dari option kedua, maka kita bisa melakukan hal yang sama dengan kata kunci !important.

padding-left:10px !important; /* Selain IE */
padding-left:8px; /* Khusus IE */
width:100px;

And this is really recommended!

Akhirnya posting juga.. :p