Transparent PNG i IE6
februar 12th, 2009. Kategori: Browser bugs and fixesProblemet med transparent png i Internet Explorer 6 er velkendt og veldokumenteret. IE6 understøtter ikke png transparency, og ‘gennemsigtig’ vises i IE6 som en lys blå baggrund.
Der findes mange løsninger, problemet er at vælge den rigtige. Både i forhold til hvilke behov man har, og i forhold til hvor let det enkelte png fix er at bruge.
Jeg har udvalgt to af de bedste, der hver især har sine styker i forhold til transparent png.
Den lette vej til transparent png for IE6
Unit PNG transparency fix er den bedste allround løsning.
Du downloader et lille JavaScript (unitpngfix.js), lægger det i websites javascript mappe og peger på det i html headeren. Pak det ind i en conditional comment, så sikrer du, at kun IE6 browsere downloader JavaScriptet:
<!–[if lt IE 7]>
<script type=”text/javascript” src=”javascript/unitpngfix.js”></script>
<![endif]–>
Du skal også downloade et lille gif billede på 1×1 pixel, som du placerer i din grafik mappe. Til sidst skal du i toppen af unitpngfix.js, angive stien fra den aktuelle webside til denne gif:
var clear=”grafik/clear.gif”;
Derefter virker alle de transparente png’er i IE6. Png billederne skal ikke have specielle navne, eller classes. JavaScriptet tager automatisk fat på alle png’er og gør dem transparente. Både når billedet er placeret i et img/image tag, eller brugt som background-image.
Dette er p.t. den bedste og letteste løsning på transparente png’ere IMHO.
Transparent png og background-image
Mange af png transparency JavaScriptsene, har desværre den bivirkning, at de ‘ødelægger’ css property’erne: background-position og background-repeat. Baggrundsbilledet vil blive placeret på defalut: “background-position: top left;”
Så hvis du har brug for at placere eller gentage et tranparent png som background-image kan du bruge:
IE6 tranparency med DD belated-PNG-fix
Også dette JavaScript er selvfølglig pakket ind i en conditional comment, så kun IE6 browsere skal downloade det.
<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(‘.png_background’);
DD_belatedPNG.fix(‘img’);
</script>
<![endif]–>
I dette png fix skal JavaScript funktionen, der laver png transparens, kaldes med en CSS selector som argument. I ovenstående eksempel bruges CSS-selectoren ‘img’ og klassenavnet ‘.png_background’.
Nogle gange kan CSS selectoren skrives sammen i samme funktions-kald, adskilt af et komma. Her et eksempel der virker på billeder i imgae tag og baggrundsbilleder på liste-elementet:
DD_belatedPNG.fix(‘img,li’);
Men det virker ikke hver gang, så prøv dig frem.
Alternative løsninger til tranperant PNG
Hvis ovenstående læsninger ikke passer til dine behov så tjek denne diskussion ud på multimedieforum.dk: Tranparent png i IE 6. Tak for de kvalificerede input. :tup:
Eller læs denne artikel om tranpsparency and png in IE6 fra 24 ways.org. Her er gode forklaringer om teorierne om PNG transparens og flere løsningsforslag.
Læs mere om png på wikien: PNG (Portable Network Graphics) transparency . Beskrivelse af PNG formatet, baggrunden for det og gennemsigtighed og tranparens.
13 Responses to “Transparent PNG i IE6”
By Michael Østergaard on feb 12, 2009
Ja, det er et problem man faktisk ofte støder på, og det sætter utroligt mange begrænsninger rent designmæssigt.
Bruger selv et fix, der minder meget om det første du nævner. Fixet jeg bruger jeg dog ikke en ekstra fil, men bare en js-fil.
For at være helt præcis, så understøtte IE6 egentlig det transperante i PNG. Man kan godt vælge at lave et billede til en 8bit transperant png-billede. Og dette godtager IE6 helt fint, men forskellen er bare den, at det virker ligesom et gif-billede. Det IE6 ikke understøtte er “Semi Transperancy”, hvilket er muligt med et 24bit png-billede.
Men en ganske fin artikkel, som helt sikkert ryger rundt på arbejdet.
By Niels on feb 13, 2009
Tak for foklaringen, Martin. Det var nyt for mig. Jeg må indrømme, at gik målrettet efter den praktiske løsning, og sprang over detaljerne. 😮
Hvilket fix bruger du. Har du et link?
Personligt glæder jeg mig til den dag, hvor jeg helt kan droppe at lave de her IE6 fix.
Robert Nyman: “Stop developing for IE6”. 😉
Men så længe jeg arbejder med offentlige hjemmesider, bliver jeg nok desværre nødt til at tage hensyn til IE6 et par år endnu.
By Michael Østergaard on feb 13, 2009
Hej Niels
Det var så lidt 🙂
Den fix jeg bruger er herfra:
http://homepage.ntlworld.com/bobosola/
Ganske vidst ikke opdateret siden 2006, så måske ikke den bedste løsning længere. Men den virker i hvertfald på min egen hjemmeside.
Ja, vi må nok leve med at lave fix op imod IE6 lang tid endnu. Mange virksomheder opdaterer nok ikke foreløbigt, fordi de måske kører på Citrix eller andet. Det kan jeg eksempelvis fortælle, at virksomheden vi deler hus med gør, og det kræver, at deres IT-leverandør skal ind over. Det kan sikkert bliver en dyr process.
Meen, når man har sin erfarring i faget, så må man jo bare designe op imod det.
By Jacob Leander Christensen on feb 17, 2009
Ja der er desværre mange der bruger IE6 endnu, så derfor er det et must at sørge for de kan se transperante .png billeder.
Men som du også siger Niels, så kommer det an på hvem målgruppen for hjemmesiden er. Jeg har en kunde, der er producent af havehegn osv. Der har 18% af dem der benytter IE stadig 6’eren. Ligeledes har jeg selv et website med “personlig web træning”, her er det kun 8% af dem der benytter IE v. 6.
By Niels on feb 17, 2009
50% af mine brugere benytter Internet Explorer.
86% af dem IE7 og 14% på IE6.
dvs 7% af mine brugere benytter IE6.
Jeg bruger så ikke gennemsigtige PNG’er på mine sider, og hvis jeg gjorde ville jeg jo nok sikre mig alligevel. Bare sådan for ryet’s skyld. 😉
By Michael Østergaard on feb 17, 2009
Har faktisk aldrig tjekket efter det på min egen hjemmeside. Jeg bruger dog 2 semitransperante PNGer på min egen hjemmeside, men bruger selvf. et fix hertil.
Har vidst nok også en semitransperant border på min hjemmeside, men den får de bare ikke i IE6, hvor de må undvære den effekt. Borderen er alligevel ikke særlig tydelig.
Man gør jo meget for ryet skyld, som Niels nævner.
By Bjørn K. on sep 30, 2009
I min jagt på at finde den bedste løsning for “understøttelse” af png24 i ie6 stødte jeg på din side 🙂
Fin læsning, men jeg vil dog mene, at den bedste løsning, hvis man fx ikke skal bruge background repeat er M$s eget filter; AlphaImageLoader Filter (http://msdn.microsoft.com/en-us/library/ms532969%28VS.85%29.aspx).
Virker upåklageligt hos mig. Eneste problem er når et baggrundsbillede skal gentages. Det kan man ikke med filteret da man sætter background til none 🙁
By Niels on okt 1, 2009
Der er ofte fordele og ulemper ved forskellige løsninger.
Så tak for inputet, Bjørn.
By Michael Østergaard on okt 1, 2009
Hej igen.
Stødte forleden på følgende artikkel: http://net.tutsplus.com/articles/web-roundups/5-lesser-known-javascript-libraries-that-make-web-design-easier, hvor jeg til dato har fundet den bedste løsning på problemet.
Mange andre løsninger skaber nye problemer.
By Niels on okt 1, 2009
Fed artikel, Michael.
Tak for det. 🙂
By Michael Østergaard on okt 1, 2009
Det var så lidt Niels – Der kommer mange gode artikler på den side. Den har en fast plads i mit feed 😀
By Niels on okt 1, 2009
Jeg har den også i mit feed, men jeg har efterhånden så meget, så der er en del der drukner. 😉
Ellers plejer vi også at holde styr på de mest relevante tuts ovre på http://www.multimedieforum.dk . Men den her er altså smuttet begge steder.
By Bjørn K. on okt 1, 2009
Ja bruger også Mr Dillers løsning privat. Klart den bedste jeg er stødt på. Den løser alt.
Med på arbejdet er jeg blevet tvungen til at bruge M$s eget filter. Synes det virker fint. Dog siges det at være lidt langsomt, men når serverhastigheder ikke er noget problem, kan det ikke mærkes 🙂 Eneste minus, men som er et stort et, er som jeg nævner, ingen support til repeat.