U povijesti razvoja weba, malo je koji preglednik izazvao toliko frustracija među dizajnerima i programerima kao što je to bio Internet Explorer 6 (IE6). Iako je u svoje vrijeme bio dominantan alat za pregledavanje interneta, njegova manjkava podrška za moderne standarde godinama je usporavala napredak web dizajna. Jedan od najpoznatijih i najiritantnijih problema bio je nedostatak podrške za prozirnost (alfa kanal) u PNG-24 slikama. Umjesto elegantne prozirnosti, korisnici IE6 vidjeli bi ružnu, sivkastu ili blijedoplavu pozadinu iza grafičkih elemenata.
Danas, kada su moderni preglednici poput Chromea, Firefoxa i Edgea standard, ovaj problem djeluje kao daleka prošlost. Međutim, za one koji održavaju naslijeđene (legacy) sustave ili proučavaju povijest weba, razumijevanje rješenja za ovaj problem ostaje ključno. Srećom, zajednica je svojevremeno razvila rješenja koja su omogućila da web stranice izgledaju onako kako su dizajneri zamislili čak i u ovom problematičnom pregledniku. U ovom članku detaljno ćemo obraditi metodu korištenja IE PNG Fix skripte, koja je godinama bila standardno rješenje za ovaj problem.
Razumijevanje problema: Zašto IE6 nije volio PNG?
Prije nego što prijeđemo na tehničko rješenje, važno je razumjeti što se točno događalo. PNG (Portable Network Graphics) format nudi dvije vrste prozirnosti: jednostavnu prozirnost od 1 bita (slično GIF-u) i alfa prozirnost od 8 bita. Alfa prozirnost omogućuje postupne prijelaze i sjene, što je ključno za moderan dizajn. Dok je IE6 bez problema prikazivao PNG-8 slike, potpuno je zakazao kod PNG-24 formata s alfa kanalom.
Rezultat je bio katastrofalan za estetiku stranice. Gumbi koji su trebali imati zaobljene rubove ili logotipi sa sjenama izgledali su kao da su uokvireni u neprozirne pravokutnike. Budući da je IE6 dugo zadržao značajan udio na tržištu, programeri nisu mogli jednostavno ignorirati problem, već su morali posegnuti za trikovima poput Microsoftovih vlasničkih filtara (AlphaImageLoader).
Implementacija rješenja pomoću IE PNG Fix alata
Jedno od najpopularnijih rješenja koje automatizira primjenu spomenutih filtara je IE PNG FIX. Ovo rješenje koristi .htc datoteku (HTML Component) koja se povezuje s CSS-om i dinamički ispravlja prikaz slika u IE6. Proces implementacije je relativno jednostavan i sastoji se od nekoliko ključnih koraka.
1. Priprema datoteka
Prvi korak je preuzimanje paketa IE PNG FIX. Nakon što raspakirate arhivu, u njoj ćete pronaći dvije ključne datoteke:
- iepngfix.htc: Glavna skripta koja sadrži logiku za ispravljanje prikaza.
- blank.gif: Prozirna slika veličine 1×1 piksel koja služi kao zamjenski element tijekom procesa renderiranja, čime se sprječava prikazivanje originalne neispravne slike.
Ove datoteke trebate postaviti u korijensku mapu (root folder) vaše web stranice ili u mapu s resursima, pazeći da kasnije u kodu ispravno navedete putanje do njih.
2. Dodavanje koda u zaglavlje stranice
Kako bismo osigurali da ovo rješenje ne utječe na moderne preglednike (koji već ispravno prikazuju PNG), koristit ćemo takozvane uvjetne komentare (Conditional Comments). Ovi komentari su specifični za Internet Explorer i omogućuju nam učitavanje određenog koda samo za starije verzije preglednika.
Unutar <head> taga vaše HTML stranice trebate unijeti sljedeći kod:
<!--[if lt IE 7.0]>
<style type="text/css"> #head, #text, img { behavior: url(iepngfix.htc); }
</style>
<!--[endif]-->
U gornjem primjeru, selektori #head, #text i img su elementi na koje će se primijeniti ispravak. Važno je da ove selektore zamijenite stvarnim ID-ovima, klasama ili HTML elementima koji u vašem dizajnu sadrže transparentne PNG slike.
Važna ograničenja i tehničke napomene
Iako je IE PNG Fix bio spasonosno rješenje, on nije bio bez mana. Postoje određene situacije u kojima skripta može izazvati nuspojave na koje trebate pripaziti tijekom razvoja:
- Interaktivni elementi i linkovi: Elementi koji imaju postavljena CSS svojstva
position: relative;iliposition: absolute;mogu ispravno prikazati prozirnu sliku, ali postoji rizik da će linkovi unutar tih elemenata prestati biti klikabilni. Ovo je poznata greška u IE6 renderiranju filtara. - Putanja do datoteke: Datoteka
iepngfix.htcmora biti ispravno referencirana u odnosu na HTML dokument, a ne u odnosu na CSS datoteku, što često zbunjuje početnike. - Performanse: Ako stranica sadrži stotine PNG slika, primjena HTC komponente na svaku od njih može usporiti učitavanje stranice u starim sustavima.
Zašto je ovo rješenje bilo revolucionarno?
Prije pojave ovakvih automatiziranih skripti, programeri su morali ručno pisati složene CSS filtre za svaku pojedinu sliku. Primjer takvog koda izgledao je otprilike ovako:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='slika.png', sizingMethod='scale');
IE PNG Fix je omogućio da se ovaj proces automatizira. Jednom kada postavite behavior svojstvo u CSS-u, skripta sama preuzima putanju slike iz src atributa ili pozadinske slike i primjenjuje potrebne filtre, štedeći sate ručnog rada.
Zaključak
Podrška za transparentne PNG-ove u Internet Exploreru 6 bila je jedna od najvećih prepreka u ranoj eri modernog web dizajna. Korištenje alata poput IE PNG FIX omogućilo je dizajnerima da koriste bogate vizualne elemente bez straha da će značajan dio korisnika vidjeti nečitljivu ili ružnu stranicu. Iako je danas IE6 dio povijesti, lekcije naučene iz ovih rješenja – poput korištenja uvjetnih komentara i razumijevanja razlika u renderiranju preglednika – postavile su temelje za današnje standarde i prakse u web razvoju.
Često postavljana pitanja (FAQ)
1. Radi li ovo rješenje u Internet Exploreru 7 i novijim verzijama?
Ne, ovo rješenje je specifično dizajnirano za IE6 i starije verzije. IE7 je uveo izvornu podršku za alfa prozirnost u PNG slikama, pa primjena ovih filtara u novijim verzijama nije potrebna i može čak uzrokovati probleme s prikazom.
2. Što ako se slike i dalje ne prikazuju prozirno nakon postavljanja koda?
Najčešći uzrok je pogrešna putanja do iepngfix.htc datoteke. Provjerite je li putanja u CSS-u ispravna u odnosu na HTML datoteku. Također, provjerite jesu li svi selektori (poput img ili specifičnih ID-ova) ispravno navedeni.
3. Mogu li koristiti PNG slike kao pozadinu (background-image)?
Da, kvalitetne verzije IE PNG Fix skripte podržavaju i pozadinske slike. Međutim, imajte na umu da ponavljanje pozadine (background-repeat) često ne radi ispravno s ovim filtrima; slika će se obično rastegnuti preko cijelog elementa ili se prikazati samo jednom.
4. Postoji li modernija alternativa za ovaj problem?
U modernom web razvoju, rješenje je jednostavno prestati podržavati IE6. Danas se koriste formati poput WebP-a ili SVG-a koji nude superiornu kompresiju i prozirnost, dok se za stare preglednike (ako je to uopće potrebno) poslužuju jednostavnije GIF ili JPG alternative.