Mengatasi Masalah Tampilan CSS Blog Yang Berbeda di Beberapa Browser

Banyak beberapa web design mengeluhkan masalah tampilan CSS website ataupun blognya yang berbeda ketika di buka oleh beberapa web browser, saya ambil contoh terkadang suatu blog ketika di buka dengan menggunkan Mozilla Firefox sangat baik tampilannya namun ketika di buka dengan menggunakan browser lain, tampilan website/blog yang menjadi berantakan atau tidak sesuai dengan apa yang telah di atur pada desain CSS yang telah di buat.


Sebenarnya penyebab sehingga tampilan website/blog berbeda tampilannya di beberapa browser, karena Kode HTML yang digunakan serta kode CSS dan lainnya yang di buat tidak mematuhi standard W3C. Yah namun meskipun sudah standar terkadang hal tersebut tidak menjamin tampilan website/blog anda terbebas dari masalah, hal tersebut di karenakan beberapa web browser juga mempunyai aturan atau standar yang berbeda khususnya browser Internet Explorer (IE) yang paling banyak dikeluhan seseorang yang tampilan blognya menjadi hancur total ketika di buka dengan browser yang satu ini.

Khusus pada tutorial ini, saya akan membagikan sedikit tips bagi yang menggunakan kode CSS untuk mendesain tampilan website/blog nya sehingga meminimalisir terjadinya tampilan website/blog yang berantakan ketika di buka dengan menggunakan beberapa aplikasi web browser.

Untuk mengatasi masalah tersebut kita bisa menambahkan beberapa kode css hack khusus untuk browser yang bermasalah, untuk jelaskan lihat kode css berikut:

IE Conditional Tags

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Lengkapnya tentang Conditional Tags bisa di baca di
About Conditional Comments




IE 6 Hack

*html .classname {}

IE 6 '!important' Hack

.classname {
float: left;
margin: 200px !important;
margin: 220px;
}

IE 7 Hack

*+html .classname {}

Safari Hack

html:lang(en)>body  .classname {}

Opera 7 Hack

@media all and (min-width: 0px){
.classname {}
}

iPhone, mobile webkit Hack

@media screen and (max-device-width: 480px) {
.classname { color: red  }
}

Kode diatas cukup anda tambahkan pada bagian css yang bermasalah saja, tidak perlu semuanya, untuk jelasnya berikut contoh penggunaanya

Pada Internet Explorer 6

.classname {
float: left;
margin: 200px !important; /* css ini yang akan di baca oleh IE6 */
margin: 220px; /* css ini akan di baca oleh semua browser kecuali IE6 */
}

Pada Internet Explorer 7

*+html .classname {
margin: 220px;
} /* css ini yang akan di baca oleh IE7 */

.classname {
margin: 220px;
} /* css ini akan di baca oleh semua browser kecuali IE7 */

Untuk yang browser lainnya silahkan anda sesuaikan yah!

Yups jika anda mengetahui tambahan kode css hack khusus untuk browser lain mungkin bisa anda share di sini. Semoga dengan artikel ini dapat membantu rekan-rekan blogger yang desain tampilan css website atau blog nya bermasalah pada beberapa web browser.