U povijesti web dizajna malo je koji preglednik zadao toliko glavobolja programerima i dizajnerima kao što je to učinio Internet Explorer 6 (IE6). Iako je u svoje vrijeme bio dominantan, njegova nesposobnost da ispravno interpretira moderne standarde, a posebno 24-bitnu PNG prozirnost (alpha transparency), postala je legendarna prepreka. Dok su moderni preglednici poput Firefoxa ili Opere bez problema prikazivali glatke prijelaze i prozirne pozadine, IE6 bi te iste slike prikazao s ružnom, sivkastom ili plavičastom pozadinom, uništavajući vizualni identitet stranice.
Danas, kada živimo u eri modernih preglednika i naprednih CSS rješenja, ovaj se problem može činiti kao daleka prošlost. Međutim, razumijevanje tehnika koje su se koristile za premošćivanje ovih barijera ključno je za svakoga tko se bavi poviješću weba ili održavanjem iznimno starih sustava. U ovom ćemo članku detaljno objasniti kako funkcionira popularna metoda ispravljanja ovog problema pomoću HTC datoteke, koja je godinama bila standardno rješenje za „oživljavanje“ vizualne estetike u IE6 okruženju.
Zašto IE6 nije podržavao prozirne PNG-ove?
Da bismo razumjeli rješenje, moramo prvo razumjeti sam problem. Postoje dvije glavne vrste PNG slika: PNG-8 i PNG-24. PNG-8 funkcionira slično kao GIF; podržava samo jedan nivo prozirnosti (piksel je ili potpuno proziran ili potpuno vidljiv). S druge strane, PNG-24 podržava takozvani „alpha kanal“, koji omogućuje 256 nivoa prozirnosti. To omogućuje dizajnerima stvaranje mekih sjena, efekata stakla i glatkih rubova koji se savršeno stapaju s bilo kojom pozadinom.
Internet Explorer 6 jednostavno nije imao ugrađen mehanizam za renderiranje tog alpha kanala. Umjesto da prikaže prozirnost, on bi interpretirao te podatke kao čvrstu boju. Rezultat je bio vizualni kaos. Kako bi se to izbjeglo bez odustajanja od kvalitetne grafike, zajednica je razvila razne „hakove“ i skripte, od kojih se jedna posebno istaknula svojom jednostavnošću i učinkovitošću.
Implementacija rješenja: IE PNG FIX metoda
Jedno od najpouzdanijih rješenja za ovaj problem je korištenje iepngfix.htc datoteke. Ova metoda koristi Microsoftovu vlasničku tehnologiju „HTML Components“ (HTC) kako bi se pregledniku „naredilo“ da primijeni poseban filter na elemente koji sadrže PNG slike. Filter koji se koristi naziva se AlphaImageLoader i on zapravo presreće renderiranje slike te ga ispravlja u letu.
Korak 1: Priprema datoteka
Prvi korak u rješavanju ovog problema je prikupljanje potrebnih komponenti. Paket za ispravak obično sadrži dva ključna elementa:
- iepngfix.htc: Glavna datoteka koja sadrži logiku za ispravljanje prikaza.
- blank.gif (1x1px): Mala, prozirna slika koja služi kao zamjenski placeholder tijekom procesa renderiranja filtera.
Ove datoteke potrebno je raspakirati i postaviti u korijensku mapu (root folder) vaše web stranice kako bi im putanje bile lako dostupne u kodu.
Korak 2: Dodavanje koda u zaglavlje stranice
Kako bi rješenje bilo aktivno samo u preglednicima koji ga trebaju, koristimo takozvane „uvjetne komentare“ (conditional comments). To je specifična sintaksa koju prepoznaje samo Internet Explorer, dok je drugi preglednici vide kao običan komentar i ignoriraju je.
Unutar <head> taga vaše HTML stranice potrebno je umetnuti sljedeći kod:
<!--[if lt IE 7.0]>
<style type="text/css">
#head, #text, img { behavior: url(iepngfix.htc); }
</style>
<![endif]-->U ovom primjeru, selektori #head, #text i img su elementi na koje želite primijeniti ispravak. Ako vaša stranica koristi specifične klase ili ID-ove za logotipove i ikone, te nazive trebate dodati u listu unutar CSS pravila.
Tehnička ograničenja i važne napomene
Iako je ova metoda bila revolucionarna, ona sa sobom nosi određena ograničenja kojih svaki developer mora biti svjestan. Korištenje filtera u IE6 nije bilo bez nuspojava, a najznačajnije su se ticale interaktivnosti elemenata.
| Problem | Opis | Moguće rješenje |
|---|---|---|
| Gubitak linkova | Ako element ima postavljen position: relative ili absolute, linkovi unutar njega mogu prestati raditi. | Izbjegavati pozicioniranje na elementu s filterom ili koristiti dodatni omotač (wrapper). |
| Performanse | Prevelik broj PNG slika s ovim filterom može značajno usporiti učitavanje stranice u IE6. | Optimizirati broj slika i koristiti PNG-8 gdje god je to moguće. |
| Pozadinske slike | Filter ponekad ima problema s ponavljajućim pozadinskim slikama (background-repeat). | Koristiti fiksne dimenzije elemenata. |
Posebno je važno naglasiti problem s linkovima. Kada IE6 primijeni AlphaImageLoader filter, on stvara novi sloj renderiranja koji ponekad „prekrije“ klikabilne elemente. Ako primijetite da vaši izbornici ili gumbi više ne reagiraju na klik nakon primjene ovog ispravka, provjerite CSS svojstva pozicioniranja.
Evolucija i moderni standardi
Srećom, vremena u kojima smo morali pisati posebne skripte za osnovnu grafičku podršku su iza nas. Dolaskom Internet Explorera 7, Microsoft je uveo nativnu podršku za alpha prozirnost, čime je potreba za HTC datotekama polako počela blijediti. Današnji web standardi oslanjaju se na CSS3, SVG formate i napredne tehnike optimizacije koje rade univerzalno na svim modernim uređajima.
Ipak, lekcije naučene iz IE6 ere i dalje su relevantne. One nas uče važnosti progresivnog poboljšanja (progressive enhancement) – strategije u kojoj osnovni sadržaj mora biti dostupan svima, dok se napredni vizualni efekti dodaju onima koji imaju tehnološke mogućnosti da ih vide. Razumijevanje ovih „starih trikova“ daje nam bolji uvid u to koliko je web tehnologija napredovala i zašto je važno držati se otvorenih, dokumentiranih standarda.
Često postavljana pitanja (FAQ)
1. Radi li ovaj ispravak u novijim verzijama Internet Explorera?
Ne, ovaj specifični ispravak je namijenjen isključivo verziji 6 i starijima. Verzije 7, 8 i novije imaju ugrađenu podršku za prozirne PNG-ove, iako su i one imale svoje specifične bugove koji su se rješavali drugim metodama.
2. Moram li koristiti baš 1x1px prozirni GIF?
Da, taj file (obično nazvan blank.gif) je neophodan jer skripta zamjenjuje izvornu sliku tim prozirnim placeholderom kako bi filter mogao ispravno prikazati PNG u pozadini bez vizualnih artefakata.
3. Može li se ovaj problem riješiti čistim CSS-om bez HTC datoteke?
Djelomično da. Može se koristiti izravno filter: progid:DXImageTransform.Microsoft.AlphaImageLoader u CSS-u, ali je ta metoda puno teža za održavanje jer zahtijeva pisanje dugih putanja i specifičnih pravila za svaki pojedini element, dok HTC datoteka automatizira taj proces.
Zaključak
Iako je Internet Explorer 6 danas stvar prošlosti, rješavanje problema s prozirnošću PNG-ova ostaje važan dio povijesti razvoja weba. Korištenje iepngfix.htc datoteke omogućilo je milijunima korisnika u to vrijeme da vide internet u punom sjaju, unatoč ograničenjima njihovog preglednika. Za developere, ovo je bio test snalažljivosti i dubokog razumijevanja načina na koji preglednici interpretiraju kod. Danas uživamo u slobodi koju nam pružaju moderni standardi, ali uvijek je korisno sjetiti se alata koji su nam pomogli da stignemo do ove točke.