U povijesti razvoja web dizajna, kompatibilnost s različitim preglednicima oduvijek je predstavljala jedan od najvećih izazova za programere i dizajnere. Jedan od najpoznatijih i najfrustrirajućih problema iz ranog doba modernog weba bio je nepravilan prikaz transparentnih PNG-24 slika u pregledniku Internet Explorer 6 (IE6). Dok su ostali preglednici tog vremena ispravno renderirali prozirne pozadine, IE6 bi često prikazivao transparentne dijelove slike kao ružne, sive ili crne pravokutnike, što je potpuno uništavalo vizualni identitet stranice.
Iako je IE6 danas tehnološki zastario, razumijevanje ovih problema pomaže u shvaćanju evolucije web standarda. Za one koji i dalje održavaju vrlo stare sustave ili proučavaju povijest front-end razvoja, postoje specifična rješenja koja omogućuju da transparentni PNG-ovi izgledaju ispravno čak i u ovom problematičnom okruženju. U ovom članku detaljno ćemo proći kroz proces implementacije rješenja poznatog kao “IE PNG Fix”.
Razlika između PNG-8 i PNG-24 formata i problem s IE6
Da bismo razumjeli zašto je IE6 bio problematičan, moramo prvo definirati razliku između dvije najčešće vrste PNG slika. PNG-8 format koristi ograničenu paletu od 256 boja i podržava samo tzv. “binarnu prozirnost” – to znači da je piksel ili potpuno proziran ili potpuno neproziran. IE6 je ovaj format podržavao bez problema.
Međutim, PNG-24 format koristi milijune boja i uvodi koncept alfa-kanala (alpha channel). Alfa-kanal omogućuje postupnu prozirnost, što znači da piksel može biti djelomično proziran (npr. 50% prozirnosti). To je ključno za stvaranje glatkih rubova slika (anti-aliasing) i profesionalnih efekata poput sjena i staklenih površina.
Problem s IE6 nije bio u tome što on uopće nije prepoznao PNG format, već u tome što nije znao interpretirati podatke iz alfa-kanala. Kada bi IE6 naišao na sliku s postupnom prozirnošću, on bi te prozirne dijelove jednostavno renderirao kao pozadinsku boju samog formata datoteke, što je najčešće rezultiralo pojavom sive boje oko slika.
Implementacija rješenja pomoću IE PNG Fix skripte
Najefikasniji način za rješavanje ovog problema u IE6 bio je korištenje vanjske biblioteke koja koristi tzv. HTCs (HTML Components). HTC datoteke omogućuju primjenu skripti izravno na CSS elemente, čime se može “popraviti” način na koji preglednik renderira sliku u stvarnom vremenu, simulirajući prozirnost koju preglednik nativno ne podržava.
Koraci za instalaciju i konfiguraciju
Da biste omogućili ispravan prikaz transparentnih slika, pratite sljedeće korake:
- Preuzimanje datoteka: Prvo je potrebno pronaći i preuzeti paket “IE PNG FIX”. Ovaj paket obično sadrži dvije ključne datoteke:
iepngfix.htc(glavna skripta za ispravak) i malu sliku veličine 1×1 piksel koja služi kao pomoć pri stabilizaciji linkova i pozicioniranja. - Postavljanje u root folder: Raspakirajte preuzete datoteke izravno u root folder vaše web stranice (glavni direktorij gdje se nalazi index.html). To je važno kako bi putanje u kodu bile točne i kako bi preglednik mogao brzo pronaći HTC datoteku.
- Dodavanje koda u HTML zaglavlje: U vašem HTML dokumentu, unutar
<head>i</head>oznaka, potrebno je umetnuti poseban blok koda koji će biti vidljiv isključivo korisnicima starih verzija Internet Explorera.
Primjer koda koji trebate dodati: