Kategorier
Blogginlägg

Transparenta PNG bilder och IE 6 – Problem och lösningar

Ã…terigen så behöver jag lösa problemet med att IE6< inte stödjer transparenta PNG filer, medans det fungerar perfekt i alla andra webbläsare. Det är fixat i IE7 och deras IE8 beta som är ute nu, men problemet är fortfarande aktuellt då det är rätt många som fortfarande använder IE6.

Stödet finns inte heller i IE5.5, men det gör inte så mycket längre då det är knappast några som använder den webbläsaren längre. Jag kollade just statistiken om hur många som idag använder IE6 och det är rätt många fortfarande drygt 25% av alla surfare så jag måste fortfarande hitta lösningar för detta problem.

Det finns en massa lösningar på webben, några exempel:

  • Använda IE’s filterfunktioner
  • Använda VRM objekt och baka in PNG filen i objektet
  • Använda Flash och baka in PNG filen där
  • Spara om PNG filen i Fireworks med transparenta pixlar
  • Javascript som utnyttjar IE’s filterfunktioner

Alla ovan lösningar har olika begränsningar, t.ex. filterfunktionerna gör att webbläsaren blir långsam om man har flera sådana aktiva filter och de fungerar normalt sett inte på ”repeat” segment. Jag har tidigare använt filterfunktionerna och jag tror att de fungerar relativt bra ändå trots att det segar ner sidan en del. Men om man sätter det i rätt perspektiv så känns det inte som något större problem i alla fall för oss pga att snart försvinner IE6, det är bara 25% som drabbas av ev. lite långsammare DHTML-funktioner samt att vi använder AJAX inpage funktioner som gör att innehållet inte böver ritas om för varje klick.

Men det finns en annan mer praktisk lösning och det är att ha två olika PNG filer som man använder, för IE5.5 och IE6 visar man den som inte är transparent och för alla andra webbläsare visar man den som har transparenthet.

Vi kommer att lösa detta lite olika beroende på situationen, men när det handlar om repeterande segment i stilmallen så använder vi två bildfiler en med och en utan transparent, men om det gäller vanliga bakgrundsbilder eller förgrundsbilder så är jag mer benägen att använda filterfunktionerna för att försöka uppnå samma upplevelse i de olika webbläsarna.

Vill ni fördjupa er i problemet med PNG filerna i IE6 så kan man bläddra igenom de första resultaten i denna sökning ie6 png transparency på Google.