Css cross browsing dalam web design

08 Nov

Css cross browsing dalam web design

Posteds by admin in Tentang Website

tags: css

Hal yang paling menyebalkan bagi saya ( dan mungkin banyak orang lainnya ) dalam proses pembuatan web adalah ketidak konsistennya sebuah browser, Hal ini berarti penggunaan CSS di dalamnya. Sebagai pekerja web tentunya saya selalu menjadi langganan setia menyumpahi Internet Explorer ( IE ) pada saat membuat CSS… layout yang terlihat memukau di Opera dan Firefox bisa saja menjadi berantakan di IE. Ditambah lagi versi berbeda untuk browser yang sama yang juga menarik perhatian saya dalam revisi… makin pusing dahh..

Makanya saya pikir ini issue ini penting juga untuk dimasukkan di dalam journal weblog saya , paling ngga bakal berguna buat saya suatu hari… sumber2x yang saya dapatkan dari mbah google , Ebook dan forum2x tetangga luar/dalam negeri saya coba rangkum disini.

Beberapa masalah yang sering saya temui yang membuat layout terlihat beda dan berantakan di IE :

Nested class style div pada sebuah form

jika ada class div di dalam div (nested div) dan kemudian diaplikasikan pada sebuah form seperti contoh berikut ini :

<style>.has-margins { background-color: gray; margin-left: 5em; padding: 1em; } .has-layout { background-color: yellow; width: 30em; } </style>
<form action=”##”>
<div class=”has-margins”> <div class=”has-layout”> INPUT tag, type=text:<br> <input type=”text”><br> INPUT tag, type=checkbox:<br> <input type=”checkbox”> </div>
</div>
</form>

akan membuat terlihat berbeda seperti ini :

Class html tag ul dan li

wahh sering bener nih saya nemuin layout yang meleset pas menggunakan tag ul li (terutama pas custom wordpress) seperti contoh code berikut ini :

<style>
#navbar, #navbar ul{
margin: 0;
padding: 0;
}
#navbar li {
list-style-type: none;
margin: 0;
}
#navbar a {
display: block;
padding: 3px 6px;
color: #FFFFFF;
text-decoration: none;
background-color: #F49300;
border-top: 1px solid #FFB546;
border-right: 1px solid #D58000;
border-bottom: 1px solid #D58000;
border-left: 1px solid #FFB546;
}
#navbar ul a {
padding: 3px 6px 3px 24px;
}
#navbar a:hover, #navbar a:active, #navbar a:focus {
color: #333333;
background-color: #FFA928;
}
</style>
<ul id=”navbar”>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2…</a>
<ul>
<li><a href=”#”>Sublink 1</a></li>
<li><a href=”#”>Sublink 2</a></li>
<li><a href=”#”>Sublink 3</a></li>
<li><a href=”#”>Sublink 4</a></li>
</ul>
</li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
<li><a href=”#”>Link 5</a></li>
</ul>

preview pada browser Firefox VS Internet Explorer :

Habis dehh waktu saya untuk merevisi hal-hal seperti ini .. dan bosan untuk menekan F5 (refresh) selama revisi berlangsung .. dan tentu saja kedua contoh diatas hanya sekelumit hal menyebalkan yang bisa saya ungkapkan.. masih banyak keanehan yang bisa membuat saya pusing setengah mati.

Solusinya…?!

Dengan sedikit googling dan banyak membaca ebook seputar CSS cross browser ditambah baca2x topik di forum2x , akhirnya langkah yang sangat mungkin di tempuh adalah melakukan filtering file css ! artinya browser berbeda akan me-load file css yang berbeda pula pada saat merender sebuah halaman website untuk IE biasa disebut IE Conditional Comments.

berikut filtering yang bisa diaplikasikan pada saat meload halaman website di dalam tags <head>..</head>

CSS yang diload hanya pada broser IE 7