rmasalahan yang paling sering mengganggu ketenangan seorang web developer adalah Internet Explorer, yep dari dulu Internet explorer memang sering berbeda sendiri dalam hal menampilkan dokumen HTML, Untungnya pada versi terbaru yakni IE9 ke atas permasalahan layout yang berantakan mulai diperbaiki.
Mengapa artikel ini menargetkan Internet Explorer 8 (IE8)? Well, IE8 adalah browser default/bawaan ketika windows 7 pertama kali diinstall, dan tentunya akan ada banyak sekali pengguna IE8 mengingat marketshare windows 7 sudah menggungguli windows XP sebanyak 51.22%, bahkan Windows 8/8.1 pun masih betah di 5/4%. Dan kenyataan ini akan mengarahkan kita untuk sekali lagi bertarung dengan Internet Explorer seperti hal nya dulu dengan IE6 
.
.HTML5 dan IE8
HTML5 masih belum didukung oleh IE8, oleh karena itu beberapa tag HTML5 yang anda gunakan tidak akan ditampilkan dengan semestinya dalam IE8. Untungnya ada beberapa library javascript yang berfungsi untuk mensimulasikan pembuatan tag-tag HTML5 pada IE8. Salah satunya adalah HTML5shiv. Sebagai contoh kasus silahkan buat dokumen HTML seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Tag on IE8</title>
<style>
*{ margin:0}
body{
font-family: "Segoe UI","calibri",arial,sans-serif;
}
#logo{
width: 48px;
height: 48px;
border-radius: 50%;
margin:0 auto;
border: 5px solid white;
margin-bottom: 10px;
}
header{
background: #40B3DF;
text-align: center;
box-shadow: 0 1px 5px rgba(0,0,0,.3);
padding-top:50px;
color:white;
}
.site-description{
margin-bottom: 50px;
display: block;
}
nav{
background-color: #A8CB17;
}
nav a{
display: inline-block;
padding:10px 20px;
color:white;
text-decoration: none;
}
nav a:hover{
background-color: #17649A;
}
</style>
</head>
<body>
<header>
<div id="logo"></div>
<h1 class="site-title">Website Keren</h1>
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
</body>
</html>
Jika kita menampilkannya dalam browser modern, misalnya Chrome, maka tampilan yang akan kita dapatkan adalah seperti berikut:
Lain halnya jika kita menampilkannya di IE8, hasilnya adalah seperti berikut:
Hal tersebut dikarenakan kita menggunakan tag HTML5 pada dokumen kita yakni header dan nav yang tentunya tidak didukung oleh IE8. Cara cepat untuk memecahkan permasalahan tersebut adalah dengan menambahkan HTML5shiv kedalam dokumen HTML kita, masukkan script ini kedalam Conditional Tag untuk IE8 ke bawah
<!--[if lte IE 8]> <script src="html5shiv.js"></script> <![endif] -->
Kode di atas akan memanggil file HTML5.js hanya dibrowser IE8 kebawah. Conditional tag ini hanyalah ada pada Internet Explorer. Dan jika kita buka lagi file HTML yang kita buat seharusnya sama seperti yang kita inginkan.
CSS3 Goodies
Ada beberapa property CSS3 yang berhubungan dengan efek dekorasi, seperti border-radius, box-shadow, gradient, border-image dan rgba color system. Sayangnya IE8 tidak bisa memprosesnya karena belum mendukung CSS3. Untuk mengakalinya kita bisa menggunakan library CSS3 Pie.
CSS3 Pie adalah sebuah library yang akan memberikan kemampuan bagi IE6-8 untuk menampilkan efek CSS3 yang saya sebutkan diatas. Cara penggunaannya cukup mudah, anda tinggal download file PIE.htc lalu simpan difolder project anda. Selanjutnya tambahkan propery behavior dengan value url pie.htc. Pada contoh berikut saya menambahkannya pada selector #logo dan header yang terdapat pada contoh kasus sebelumnya:
header{
...
behavior:url(pie.htc);
}
#logo{
...
behavior:url(pie.htc);
}
Setiap ada property CSS3 yang ingin anda terapkan, sertakan juga property behavior dan isi valuenya dengan url file PIE.htc.
Memperbaiki CSS bug
Ada beberapa cara untuk memperbaiki bug CSS pada Internet Explorer, yakni menggunakan fix langsung dalam file CSS utama dengan menambahkan symbol-siymbol tertentu dan memanggil file khusus dalam tag conditional Internet Explorer
Menargetkan property CSS hanya untuk IE
Ada trik untuk menargetkan property css hanya untuk Browser IE, saya pernah membahasnya dalam posting singkat Internet Explorer Hack. Jika kita menambahkan \9 setelah nilai dari suatu property, maka property tersebut hanya akan diterapkan pada IE8 saja (ada yang melaporkan IE9 juga terpengaruhi), contohnya tambahkan property berikut pada bagian header dokumen kita sbeelumnya:
margin-top:0\9; background-color: 0\9;
Cara aman menambahkan CSS fix
Penggunakan trik sebelumnya memang sangat membantu, tapi sebagian developer khawatir kalau browser lain juga ikut-ikutan mengadaptasi trik tersebut dan style yang kita peruntukkan untuk IE diterapkan juga. Maka dari itu cara paling aman adalah menyertakan style fix untuk IE ini di dalam conditional tag seperti yang saya contohkan sebelumnya. Contohnya:
<!--[if lte IE 8]>
<style>
header{
margin-top:0;
background-color: 0;
}
</style>
<![endif] -->
atau lebih baik dibuatkan file mandiri untuk IE. seperti berikut :
<!--[if lte IE 8]> <link rel="stylesheet" href="ie8.css"> <![endif] -->
Maksud dari tag tersebut adalah, Jika browser yang digunakan lebih rendah dan sama dengan IE 8 maka load style/script berikut. lte disana adalah singkatan dari lower than equal. Segala text yang dituliskan didalam tag conditional tersebut hanya akan dirender jika kondisinya memenuhi syarat, dalam contoh diatas yakni IE8 ke bawah.
CSS3 Media Query dan IE8
Sudah nyobain resize-resize IE8nya untuk menguji Media Query? Anda tidak akan menemukan perubahan sama sekali karena IE8 tidak mendukung media query untuk responsive web. Untuk meperbaiki permasalahan maka kita bisa menggunakan library respond.js. Respond.js akan memberikan IE6-8 kemampuan untuk memproses CSS3 Media Queries. Seperti halnya dalam memanggil file HTML5.js sertakan file ini dalam conditional tag
<!--[if lte IE 8]> <script src="respond.js"></script> <![endif] -->
Deteksi fitur HTML5 dan CSS3 dengan Modernizr
Suatu waktu mungkin anda ingin mendeteksi apakah suatu browser mendukung suatu fitur atau tidak. Misalnya apakah IE8 mendukung SVG atau tidak. Maka untuk mendeteksi fitur tersebut kita bisa menggunakan library Modernizr. Berikut ini adalah salah satu contoh penggunaan Modernizr untuk mendeteksi fitur SVG, jika browser yang dipakai tidak memiliki fitur SVG maka source gambar svg akan diganti dengan png:
if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}
Males dengan semuanya? Suruh Download Browser lain aja
Jika project yang anda kerjakan milik anda sendiri atau kebijakan kantor untuk tidak mendukung browser lama seperti IE8, maka opsi redirect bisa digunakan. Pada contoh berikut kita akan menambahkan script redirect browser ke halaman browser-happy.com
<!--[if lte IE 8]> <script> window.location = "http://browsehappy.com/" </script> <![endif]-->
Menguji IE8 di Linux dan OS X
Untuk pengguna OS Linux dan OS X tentunya tidak dapat menguji halaman webnya di Internet Explorer. Untuk menguji penampilan web yang sedang anda kerjakan di IE8 ada beberapa aplikasi yang bisa digunakan:
1. Virtual Machine
Aplikasi virtual machine seperti VMWare, VirtualBox dan Parallels (OSX) bisa digunakan untuk mendapatkan IE8. Anda tinggal menginstall aplikasi virtual machine, Jika anda memiliki image windows xp/7 Anda bisa menggunakannya untuk menginstall di virtual machine, jika Anda tidak memilikinya anda juga bisa mendownload virtualdisk yang telah disediakan oleh microsoft yang bisa didapatkan di modern.ie,
2. Wine & IETester
Aplikasi Wine ini memberi kemampuan kepada Linux dan OS X untuk menjalankan Aplikasi-aplikasi windows. Setelahnya Wine terinstall, anda bisa mendownload IETester. IE Tester adalah aplikasi yang menggabungkan beberapa versi IE, disana anda dapat memilih versi IE yang akan anda uji.
3. Browserstack
Browserstack adalah layanan online untuk browser testing, tidak hanya IE8 tapi berbagai device yang ada seperti iphone, android, windows, os x dan lain sebagainya. Anda akan diberi masa trial terlebih dahulu karena layanan ini berbayar dan tentunya karena tool online, diperlukan kecepatan internet yang mumpuni biar pengoperasiannya lancar ( Pak tiff, apa kabar? 
)
)
0 comments:
Post a Comment