PT. Jerbee Indonesia • Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6

Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6

Tempo hari, saya pernah membahas mengenai PNG Transparan untuk Windows IE 5.5 dan 6. Di situ saya menggunakan jquery.pngFix.js untuk mengatasi permasalahan transparansi file PNG untuk IE 6 ke bawah. Namun ternyata, siasat tersebut terbentur ketika kita menggunakan file png untuk background repeat.
Setelah saya coba cari lagi, saya menemukan solusi yang terbaik (saat ini) untuk mengatasi permasalahan png transparan pada IE 6 ke bawah ini, yaitu unitpngfix.
Berikut adalah beberapa fakta, mengapa saya merekomendasikan unitpngfix ini:

Javascript yang dipakai terbilang ringan (kurang dari 2kb!).
Menyelesaikan masalah yang diakibatkan oleh atribut filter IE.
Bisa diimplementasikan untuk objek img dan background-
image.
Berjalan secara otomatis sebelum halaman di-load untuk semua elemen atau elemen tertentu.
Bisa dipakai untuk elemen auto width dan auto height.
Mudah dalam hal deployment atau teknis pemakaiannya.

Demo

Contoh PNG

Petunjuk Pemakaian

Unduh file unigpngfix.zip di sini.

Sisipkan tag berikut pada header (antara tag <head> dan </head>)

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Unggah file clear.gif ke folder images Anda. Bukalah unitpngfix.js lalu sesuaikan path dengan directory tempat file clear.gif diunggah.
Secara default, unigpngfix akan bekerja pada semua gambar PNG di halaman situs Anda, namun jika dibutuhkan untuk beberapa elemen tertentu, Anda cukup menambahkan class="unitPng" pada elemen yang dibutuhkan. Penambahan class tersebut akan membuat unigpngfix hanya bekerja pada elemen yang memiliki class tersebut.

That’s it! Mulai sekarang Anda tidak akan menganggap Internet Explorer “hanya” sebagai tool untuk mengunduh Mozilla Firefox saja :p

Note:
Bagi pengguna wordpress, Unit PNG Fix ini sudah bisa digunakan dalam bentuk plugin (Unduh di sini).