Code Hack CSS ~ Awo awo

Sunday, November 3, 2013

Code Hack CSS

Dalam mendesain sebuah web atau blog tentunya kita menggunakan CSS. code-code CSS inilah yang diterjemahkan oleh browser yang menghasilkan tampilan web tau blog. Masalahnya, setiap browser memiliki hasil yang berbeda dalam menerjemahkan hasil coding CSS ini. sehingga kerap kali kita temukan masalah misalnya, ketika web di buka di browser firefox sudah bagus, namun malah jadi hancur berantakan ketika disaksikan di browser chrome atau IE.

Saya sendiri mengalami hal ini, ketika mendesain blog ini. Ketika uji coba menggunakan firefox, hasilnya sudah cukup baik, namun ketika dibukan melalui Chrome hasilnya malah berantakan. memang tidak banyak bagian yang berantakan, namun tetap saja perlu penyempurnaan agar ketika dibuka di browser manapun hasilnya tetap sama bagus.

Berhubung tidak banyak bagian yang harus diperbaiki, saya memutuskan menggunakan teknik hack CSS, yang intinya membuat dua buah coding CSS untuk masing2 browser yang tidak sesuai. misalnya jika dalam kasus saya, perlu sedikit perbaikan di bagian #logo, yakni ketika dilihat melalui Chrome posisinya berantakan, ini dikarenkan kemampuan firefox dan chrome menerjemahkan code value dari selector #logo ini berbeda2. maka harus dilakukan penyesuaian, dengan membuat dua buah code CSS dalam sebuah body blog.

Nah, untuk membut dua buah code CSS dalam sebuah body tentu harus menggunakan tenik hack, fungsinya adalah agar browser dapat membaca code css yang sesuai dan tidak terjadi bentrok dan error.

berikut ini code hack CSS untuk berbagai jenis browser. silahkan dipilih sesuai keperluan:

Inline Hack untuk IE
* (bintang) digunakan untuk inline hack IE6 dan IE7

Contoh:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) Haya untuk IE6

Contoh:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:""/*" hanya bisa digunakan untuk firefox

Internal Style
gunakan * html untuk ie6 dan *+html hack untuk ie7

Contoh:
Syntax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} untuk ie6
* + html .logo{margin-left:20px;} untuk ie7

IE7 and Firefox browser Hack
html>body hack untuk ie7 dan firefox.

Contoh:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px}

Mordern browser Hack (Firefox Hack)
html>/**/body {}

Contoh:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px}

Browser hack for Opera versions 9 and below
Gunakan html:first-child {} untuk opera . juga gunakan
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

Contoh:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} hanya untuk opera

Firefox3 browser hack
html>/**/body .selector, x:-moz-any-link, x:default {property:value;} untuk firefox3

Contoh:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} hanya untuk google chrome.

Contoh:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
gunakan Syntax: body:first-of-type .elementOrClassName{property:value;}

Contoh:
body:first-of-type .logo{margin-top:10px;}

update: untuk Chrome

@media screen and (-webkit-min-device-pixel-ratio:0){{property:value;}}

Contoh :
@media screen and (-webkit-min-device-pixel-ratio:0) { /* hacked for chrome and safari */
#mainNav li { margin:0 26px 0 0; }
}

Semoga tips Cara Hack Css browser ini berguna buat sobat sekalian

*gyo

Awo awo

Sunday, November 3, 2013

Code Hack CSS

No comments:

Post a Comment