Thursday, April 8, 2010

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

15 comments:

  1. saia ga dunk ttg selector na
    maksud na maw diapain c?
    trus CSS Hack na dimana??

    ReplyDelete
  2. Tuh dah aku revisi...
    moga2 jelas...
    thx inputannya...

    maksudnya kenapa hack adalah karena selector2 aneh diatas itu sebenernya bug dari si browser. Tapi ternyata kita bisa manfaatkan untuk memberikan style css yang spesifik pada browser tertentu.

    ReplyDelete
  3. ternyata tetep aja ga donk
    harus praktek langsung
    cz nampak teoritis banget

    apalagi klo uda masuk ke IE
    i hates IE >,<

    ReplyDelete
  4. Jiah...

    ya kalo suatu saat situ menemui kelakuan aneh IE terhadap CSS...
    bisa coba selector diatas.... :P

    ReplyDelete
  5. saia sudah merasa klo c IE adalah aneh
    super duper aneh
    ntah kenapa selalu bermasalah disono
    oleh karena itu, saia ga terlalu suka uber2 CSS :D

    ReplyDelete
  6. posisi saya saat ini...
    meski browsernya busuk... tetap kudu jalan...
    dan hanya boleh utak-atik CSS nya saja... :P

    sampe bikin drop down menu JavaScript-less segala...
    Pure CSS... :D

    ReplyDelete
  7. kwkwkwkw....
    gapapa laaah,
    kapan2 saia harus belajar dr anda
    jujur aja, saia ngiri je :p

    ReplyDelete
  8. ga sehebat itu kog...
    aku ngerasa kerjaanku masi berantakan... :|

    ReplyDelete
  9. ga usa merendah laaah..
    sekarang jadi orang harus bermodal kan PD
    tp aq tau klo kamu orang na berantakan
    kwkwkwkwkw

    ReplyDelete
  10. ada yg ngamuuuk,
    kyaaaaaa....
    **minggat saja**

    ReplyDelete
  11. engga koq..
    barusan lari2 sejenak saja
    ha3

    ReplyDelete
  12. tu kaaan
    paling enak tetep aja lari
    *ngaciiir....*

    ReplyDelete