• LINK
    • Dengan bangga mendukung kegiatan idsecconf 2009
    • Kajian.Net

CARI MP3 KAJIAN, EBOOK, TUTORIAL PEMROGRAMAN PHP, MATERI KULIAH DATABASE, DLL

Loading

October 21, 2009

IE 6++ Hacks CSS Tutorials

Didalam Katagori: Aktual, CSS

Bismillah…

Masalah jadul yang biasanya ditemui web designer adalah seputar CSS yang tidak bisa crossing browser, khususnya kalo sudah ketemu sma IE (Internet Explorer 6). sebenarnya standarisasi javascript sudah mulai diterapkan di berbagai browser (Firefox, Opera, Safari, IE 8) versi terbaru. namun karena IE 6 lebih dulu booming dikalangan pengguna komputer mau tidak mau masalah crossing browser harus tetap menjadi perhatian. 

Menurut statistik berbagai tracker web, IE 6 masih menempati posisi terbesar ke-dua setelah firefox. Nah sudah cukup basa basinya.

Mari Kita mulai tutorial pertama bagaimana cara meng-hacks CSS di IE 6.

perhatikan CSS berikut:

.merah{
   color:red;
}

 simpan script css diatas dengan nama style.css

lalu berikutnya buat file dengan nama misal:ie-hacks.html dan isi dengan script dibawah ini:

<html>
  <head>
    <title>IE 6++ Hacks Tutorial</title>
    <link style="text/css" rel="stylesheet" href="style.css" />
  </head>
  <body>
 
  <span class="merah">
       HALLO DUNIA!!
  </span>
 
  </body>
</html>

Ketika file ie-hacks.html itu dibuka dengan firefox/ opera/ chrome maka akan menampulkan tulisan HALLO DUNIA!! dengan warna merah, begitu juga ketika di buka di IE (baik IE 6 atau yang terbaru).

Nah sekarang coba anda lakukan modifikasi di file style.css, menjadi seperti dibawah ini:

 .merah{
   color:red;
  *color:blue;
}

 Bagaimana hasilnya ketika di buka dengan browser (firefox/opera/chrome) dan IE??

 di browser yang sudah standarisasi CSS (firefox/opera/chrome) warna tulisan HALLO DUNIA!! adalah merah, tapi ketika anda buka melalui IE, warna tulisan tersebut adalah biru Cool, kita bisa melakukan IE hacks dengan bantuan tanda Asterik (*).

Cara ini juga bisa diterapkan pada penamaan selector. misal:

.merah {
    color:red;
}

*.merah{
    color:blue;
}

atau bisa juga

#merah{
    color:red;
}

*#merah{
    color:red;
}

Jangan malas untuk mencoba ya!! soalnya… saya males bikin demonya Jittery

 Mungkin itu dulu aja, semoga bermanfaat… :)

Comments (0)