CSS Hack

Awalnya aku ga peduli sama yang namanya CSS. intinya cuma bwat style khan. Kasih warna, layouting, positioning, background, efek-efek kayak a:hover dan viola, It's done. Ga lebih dari sekedar pemanis. Kalo pake CSS masih kurang manis gimana dong? ya biasanya aku edit lagi HTMLnya.

Tapi kasus kali ini aku berurusan dengan CMS. Dan seperti CMS pada umumnya sangat tidak dianjurkan mengedit Core nya secara langsung.

Jadi tanpa menyentuh core yang berarti aku sama sekali ga mengubah HTML output dari si CMS, aku berjuang untuk mengedit tampilan agar persis seperti yang diminta. Padahal DIV - DIV itu khan yang membuat si CMS, dan aku harus menaruh DIV yang letaknya berjauhan jadi berdampingan dan lain-lain. Dengan sedikit CSS layouting dan positioning yg cukup tricky, permintaan berhasil aku penuhi. Dengan yakin dan cengir2 bangga aku mengamatinya dengan mozilla, chrome, dan IE8.

Ternyata eh ternyata. Setelah dibuka dengan IE7 hasilnya div yang tadinya sudah bersemayam dengan tenang di sebelah div yang diinginkan loncat nangkring di tempat lain. Apalagi kalo pake IE 6. Benar-benar merusak keindahan. Contoh salah satu bug yang dimilikinya adalah dia akan menggandakan besar margin kiri pada div yang di posisikan float left. Sedang pada browser lain tetap terlihat normal. Tentu ini cukup menggangu positioning indah yang sudah kita buat bukan.



jika masih bingung dengan maksud dari gambar lucu diatas bisa liat contoh kasus:
http://www.positioniseverything.net/explorer/floatIndent.html

Biasanya hal seperti ini diatasi menggunakan beberapa file css spesifik untuk browser tertentu, dengan mendefinisikan pada head Tag di HTML. Inti dari script tersebut adalah jika browser mozilla, maka gunakan css yg ini, jika ie gunakan yg ini, dan sebagainya. Akan tetapi Syntax diatas harus dimasukan ke dalam HTML bukan?. Padahal aku ga ingin mengubah langsung di Core nya. Setelah bertanya2 akhirnya aku dapat jawabannya yaitu CSS Hack.

ada beberapa selector yang ternyata bisa spesifik hanya di kenali oleh browser tertentu. misalnya saja

* html {}

ini hanya akan di kenali oleh IE 6 dan simbah2nya. Mozilla tidak akan terperngaruh apa2 dengan selector ini. Jadi kuncinya kita tambahkan beberapa selector spesifik untuk mengoveridde baris css sebelumnya khusus pada browser tersebut.

Berikut ini beberapa selector yang bisa dipakai:

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Misalnya saja kita membuat suatu layout dan ada div dengan nama ID 'kotak' yang posisinya jadi kurang ke kiri 10 pixel jika dilihat dengan IE. Padahal dengan browser lain sudah pas. maka css nya jadi begini

#kotak
{
position:relative;
left:30px;
}

* html #kotak
{
position:relative;
left:20px;
}

Jadi jika mozilla membaca CSS diatas, dia tidak mengenal "* html" sehingga "* html #kotak" tidak merujuk ke div yang manapun dan div kotak tetap left 30px. Saat IE6 yang membaca, dia mengenal * html dan akan merubah/overwrite baris css diatasnya, dan div kotak tersebut menjadi 20px.

Ternyata hal-hal seperti ini cukup penting juga. Untuk belajar lebih lanjut bisa baca sendiri disini ya. http://www.webdevout.net/css-hacks