U povijesti razvoja web dizajna, kompatibilnost s različitim preglednicima oduvijek bila jedan od najvećih izazova za programere i dizajnere. Jedan od najpoznatijih i najkompleksnijih 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 bez problema prikazivali prozirne pozadine, IE6 je te prozirne dijelove često prikazivao kao ružne sive ili crne pravokutnike, što je potpuno uništavalo estetiku stranice.
Iako je danas IE6 zastario i gotovo potpuno izbačen iz upotrebe, 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 transparentne slike izgledaju ispravno čak i u ovom problematičnom pregledniku. U ovom članku detaljno ćemo proći kroz proces implementacije rješenja poznatog kao “IE PNG Fix”.
Sadržaj...
Zašto Internet Explorer 6 nije podržavao transparentne PNG-ove?
Problem s IE6 nije bio u tome što on uopće nije prepoznao PNG format, već u načinu na koji je implementirao alfa-kanal (alpha channel), koji je odgovoran za razinu prozirnosti piksela. IE6 je podržavao samo binarnu prozirnost (piksel je ili potpuno proziran ili potpuno neproziran), dok PNG-24 standard omogućuje postupnu prozirnost. Kada bi IE6 naišao na sliku s takvim kanalom, on jednostavno nije znao kako renderirati prozirnost, što je rezultiralo pojavom neestetskih pozadina oko objekata.
Ovo je stvaralo ogromne poteškoće za dizajnere koji su željeli koristiti zaobljene rubove, sjene ili složene oblike koji se moraju prirodno stopiti s pozadinom stranice. Rješenje je došlo u obliku eksternih skripti i HTC datoteka (HTML Components), koje su omogućile pregledniku da “prepozna” i ispravno prikaže prozirnost putem dodatnog sloja obrade.
Implementacija rješenja pomoću IE PNG Fix datoteke
Najučinkovitiji način za rješavanje ovog problema bio je korištenje specijaliziranog paketa datoteka koji simulira podršku za prozirnost. Proces implementacije zahtijeva nekoliko preciznih koraka kako bi se osiguralo da se ispravak primijeni samo na stare verzije preglednika, bez utjecaja na modernije sustave.
Koraci za instalaciju i konfiguraciju
Da biste omogućili ispravan prikaz PNG slika u IE6, slijedite ove korake:
- Preuzimanje datoteka: Prvo je potrebno pronaći i preuzeti paket pod nazivom “IE PNG FIX”. Ovaj paket obično sadrži dvije ključne datoteke:
iepngfix.htci malu sliku veličine 1×1 piksel. - Postavljanje u root folder: Raspakirajte preuzete datoteke izravno u root (korijenski) folder vaše web stranice. To je važno kako bi putanje do datoteka bile ispravne i kako bi preglednik mogao lako locirati HTC komponentu.
- Dodavanje koda u zaglavlje: U HTML kodu vaše stranice, unutar
<head>i</head>oznaka, potrebno je umetnuti specifičan kondicionalni komentar koji će prepoznati samo Internet Explorer.
Kod koji trebate umetnuti izgleda ovako:
<!--[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 govore pregledniku na koje elemente treba primijeniti ispravak. Ako vaše transparentne slike nalaze se unutar specifičnih ID-ova ili klasa, zamijenite ove selektore onima koji odgovaraju vašoj strukturi stranice.
Kritične napomene i česte pogreške pri implementaciji
Iako proces izgleda jednostavno, postoje određeni tehnički detalji koji mogu uzrokovati probleme u funkcionalnosti stranice. Najveći izazov kod korištenja iepngfix.htc datoteke je njezin utjecaj na interaktivne elemente.
Problem s pozicioniranjem i linkovima
Jedna od najčešćih pogrešaka događa se kada se ispravak primijeni na elemente koji koriste CSS svojstva position: relative; ili position: absolute;. U takvim slučajevima, iako će slika izgledati prozirno i ispravno, linkovi koji se nalaze preko tih slika često prestaju raditi. To se događa jer HTC datoteka stvara nevidljivi sloj iznad slike koji blokira klikove korisnika.
Kako biste izbjegli ovaj problem, preporučuje se sljedeće:
- Primjenjujte ispravak samo na elemente koji ne zahtijevaju kompleksno pozicioniranje.
- Provjerite radi li svi gumbi i poveznice nakon implementacije koda.
- Ako primijetite da linkovi ne rade, pokušajte ukloniti
behaviorsvojstvo s tog specifičnog elementa i potražite alternativno rješenje, poput korištenja GIF-ova s jednostavnom prozirnošću (ako je to moguće).
Zaključak
Borba s Internet Explorerom 6 bila je jedna od najtežih faza u povijesti web razvoja. Iako su danas moderni preglednici poput Chromea, Firefoxa i Edgea potpuno riješili problem prozirnosti slika, poznavanje metoda poput “IE PNG Fix” podsjeća nas na to koliko je važno pridržavati se standarda. Korištenje kondicionalnih komentara i HTC datoteka omogućilo je programerima da pruže pristojno korisničko iskustvo čak i u okruženjima koja nisu bila tehnološki spremna za moderne formate slika.
Danas, s pojavom formata kao što je WebP i potpunom podrškom za PNG-24 u svim modernim preglednicima, ovakvi trikovi više nisu nužni, ali ostaju kao zanimljiv podsjetnik na kreativnost programera u prevladavanju tehničkih ograničenja prošlosti.
Često postavljana pitanja (FAQ)
Pitanje: Hoće li ovaj kod usporiti moju stranicu u modernim preglednicima?
Odgovor: Ne. Kod je napisan unutar kondicionalnog komentara <!--[if lt IE 7.0]>, što znači da ga svi moderni preglednici (uključujući novije verzije IE) tretiraju kao običan komentar i potpuno ga ignoriraju.
Pitanje: Mogu li koristiti GIF umjesto PNG-a za prozirnost?
Odgovor: Možete, ali GIF podržava samo jednu razinu prozirnosti (piksel je ili 100% proziran ili 100% vidljiv). PNG-24 omogućuje “polu-prozirnost”, što je ključno za prirodne sjene i glatke rubove.
Pitanje: Što ako nemam pristup root folderu stranice?
Odgovor: Ako nemate pristup root folderu, morat ćete prilagoditi putanju u url(iepngfix.htc) tako da točno pokazuje na mapu u kojoj se datoteka nalazi (npr. url(/assets/js/iepngfix.htc)).
