Didats Triadi

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.

Aku mempunyai beberapa tips yang mungkin bisa berguna. Beberapa diantaranya sudah dibahas pada komentar-komentar yang ada di tulisanku sebelumnya.

Sampai saat ini, aku mengetahui 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 recommended. Dan bisa ditebak, seperti layaknya sinetron-sinetron Indonesia yang ceritanya mudah ditebak, tulisan ini pun mudah ditebak. *halah*

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”>Didats</div>

Secara default, div diatas akan menampilkan kata Didats 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 Didats berada di kiri. Kita perlu kata kunci !important untuk mengacuhkan style lain dan memberi prioritas kepada style yang kita definisikan !important.

Duh! ribet? ya, silahkan dibaca berulang kali. Lebih baik aku mengajarkan langsung, daripada lewat tulisan. Hihihi…. :D

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;

This is really recommended!

Ya, sampai jumpa lagi di tutorial berikutnya. Semoga tulisanku kali ini berguna. Feel free to contact me…!