IE6 PNG24 fix

Egyre ritkábban ugyan, de még előfordul, hogy a HTML elkészítésekor a grafikusnak/designernek (esetleg magunknak :)) hála szeretnénk úgy PNG24-es képeket használni (átlátszó (transparent), vagy félig átlátszó/átmenetes (opacity)), hogy azt az Internet Explorer 7 előtti browserek is élvezhetően megjelenítsék. Erre találta ki a MS a filter css tulajdonság AlphaImageLoader-ét, amivel azonban rengeteg gond van (pl.: a benne lévő path nem a css-hez relatív, hanem a HTML-hez, nincs background-repeat lehetőség, az esetlegesen rajta lévő link csak trükkökkel tehető kattinthatóvá… stb.).

A valódi megoldást régóta keresem és ki is próbáltam elég sokat (jQuery PNGfix, egyéb js-ek, amik végmennek a png-ken és kicserélik a style-t ha IE6-ban vagyunk… stb.), de a most ismertetett az amivel a leginkább meg vagyok elégedve, mert rugalmas (backround-position és repeat is alkalmazható már a 2-es verziójában) és nem fagyasztja meg az oldalt 1-2 másodpercre, ahogy azt egy-két script-nél tette (nyilván csak sok képnél van így, kevésnél azok a megoldások is tökéletesek lehetnek).

Ennyi bevezető után el is kezdem leírni a telepítés menetét pár rövid lépésben:

1.) Töltsd le a .htc fájlt innen (ez is javascript):
http://www.twinhelix.com/css/iepngfix/

2.) Csomagold ki a .htc-t a js mappába (vagy ahonnan a scripteket használos) és ha nincs, akkor a blank.gif-t a képeidhez (találsz benne egyébként egy példa oldalt is, abból is haladhatsz tovább).

3.) A .htc elején határozd meg a blank.gif (illetve egy 1×1-es üres gif) elérését a HTML-hez képest.

4.) Csinálj egy külön .css fájlt ie6-nak (ha nincs), vagy egy

1

<style type="text/css"></style>

-t a headerben a következőkkel:

1

cssSelector {behavior: url(iepngfix.htc); }

Megjegyzés:
cssSelector mondjuk: .iealpha ekkor minden olyan elemre alkalmazza, aminek ez a class-a

5. A css-t vagy a style-t csak ie6 (vagy régebbi) böngészőben szeretnénk használni, ehhez tegyük ezt a header-be:

1
2
3

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css" />
<![endif]-->

Hát ennyi lenne. Ha jók a fájl elérések, akkor egyből működni fog a dolog.

A cikk kapcsán szeretnék készíteni egy kisebb közvélemény kutatást is a következő kérdéskörben:
Ki foglalkozik/végez plusz munkát még az IE6 miatt és miért :)?

Az eredeti leírást itt találhatjátok meg egy-két értékesebb hozzászólás kíséretében:
PNG Transparency for Internet Explorer (IE6 and Beyond)

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség
http://bolint.hu

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

13 HOZZÁSZÓLÁS

  1. ismerős, viszont IE5 alatt nem elég meggyőző, márpedig azt a brózert is sokan használják még :S

  2. Én 5-össel már nem foglalkozok, itt a lapon IE-ből ezek az arányok vannak:

    1
2
3
4
5
6
7

    Internet Explorer 7.0    58.05% 	
Internet Explorer 6.0    41.66% 	
Internet Explorer 8.0    0.18% 	
Internet Explorer 5.5    0.04% 	
Internet Explorer 5.0    0.02% 	
Internet Explorer 5.01   0.02% 	
Internet Explorer 6.1    0.01%

    Általában pedig a böngészők megoszlása ilyen:

    1
2
3
4
5
6
7
8
9
10

    1.  Firefox                     60.52%  
2.  Internet Explorer           30.40%  
3.  Opera                       7.01%   
4.  Safari                      0.79%   
5.  Chrome                      0.63%   
6.  Mozilla                     0.52%
7.  Konqueror                   0.04%
8.  SeaMonkey                   0.03%
9.  Mozilla Compatible Agent    0.02%   
10. Netscape                    0.02%

  3. A kezdő mondat az én tapasztalatom szerint nem állja meg a helyét, én egyre gyakrabban találkozom az átlátszó, illetve átmenetes elemek bátor alkalmazásával.
    Emiatt nemrég én is körbenéztem a neten, és szintén az Angus Turnbull-féle, fent bemutatott megoldást találtam a legjobbnak.

    Kérdésedre válaszolva: én még odafigyelek az ie6-ra. Az általam kezelt oldalak statisztikái szerint a látogatók kb. 50 – 60%-a használ valamilyen explorer verziót, és ezen belül olyan 50% körül ingadozik a hatos aránya, ami azt jelenti, hogy a teljes statisztikát nézve ez kb. 25% környéke.
    Szabványos kóddal a problémák nagy része kezelhető, ritkán kell kimondottan ie hack-et alkalmaznom, kivétel talán pont a cikkben említett pngfix.

  4. HSLaszlo: köszönöm a hozzászólást, de meg kell jegyeznem, hogy szerintem félreértetted az első mondatot. Nem azt írtam, hogy egyre ritkábban használunk png24-et, hanem azt, hogy egyre kevésbe fontos figyelni arra, hogy ie6-ban is jó legyen (mert egyre jobban kiszorul).

  5. Ezek szerint valóban félreértettem, és így igaz.
    Várom már azt az időt, mikor az ie6-ot nem látom a statisztikákban…

  6. HSLaszlo, még nagyon sokáig nem lesz olyan, hogy nem látod, majd az IE6-ot. De addig biztos, nem amíg nem kerül be a 7 vagy majd a 8 az XP automatikus frissítéseibe vagy nem kap nagyobb reklámot az, hogy cseréld le. És persze addig amíg ennyi crack-elt XP lesz az országban. A MS meg persze, hogy nem fogja hirdetni, hogy van eredetiség ellenörző nélküli változata is a 7nek.
    Amúgy sajnos még én is optimalizálok IE6-ra pont az előbb említettek miatt. De az a vicc, hogy nemsokára már 3 IE-re kell Optimalizálni azon kívül még min 3 böngészőre (FF, Opera, Safari).
    A témában maradva szerintem is ez a legjobb megoldás. Én is próbálkoztam már különféle patch-ekkel és ez vált be a legjobban.

  7. kösz, ez tényleg jó :)… a háttérpozícionálás, háttérismétlés úgy működik vele, mint a normális böngészőkben… amúgy szerintem fölösleges létrehozni egy osztályt erre. akkor be kéne írkálni a kódban mindenhol ahol alkalmazni akarod… szóval inkább ahogy a dokumentációja is írja, body-nak, div-nek satöbbinek általánosan beállítod (persze az lte ie 6 megkötéssel) és nem kell vele külön foglalkozni… (de lehet csak olyan példával teszteltem ahol ez így is jó volt. bár nem hiszem hogy bárhol bármilyen problémát okozna egy ilyen megengedés… mindegy, az ie6 alap szürke png-inél rosszabb biztos nem lesz.) épp emiatt, a dolog egyszerűsége miatt ezt mostantól használni fogom :) és ~15%-nyi böngésző (amit korábban jobbhíjján lesz*rtam) letudva :)

  8. Sziasztok!

    Én is kipróbáltam ezt a png fix megoldást és gondoltam megosztom tapasztalataim.
    Természetesen az IE6 ismét beadta a kulcsot…

    Félreértés azonban ne essék! A szkript tökéletesen működik, de volt egy háttérképként használt grafika, amit szerettem volna pozicionálni a jobb alsó sarokba ismétlések nélkül, tehát a „no-repeat bottom right” css formulát használva.

    Sehogyan sem sikerült. Folyton úgy helyezte el, hogy „top center”, vagyis függőlegesen felülre, vízszintesen középre igazítva.

    Kipróbáltam a %-os pozicionálást és a pixeleset is, illetve ezek kombinációját. Mindegyik hatástalan volt. Kipróbáltam, hogy nem a shorthand megadásokat választom, hanem minden egyes background tulajdonságot külön-külön megadtam, hátha így jó lesz. nem volt szerencsém ezzel sem.

    Aztán rákerestem a gugliban és azt a megoldást találtam, hogy a „backround-position” IE6-nál, ennél a pngfix-es megoldásnál nem működik rendesen.

    Szerettem volna, ha legalább az egyik pozicionáló paraméter működik (az én esetemben a „bottom” már tökéletes lett volna, mert akkor egye fene alapon olyan szélesre csináltam volna a grafikát, mint amilyen széles maga a tartalom DIV).

    Nos én így jártam. A szóban forgó weboldalnál kénytelen voltam egy másik megoldáshoz nyúlni: történetesen nagy szerencsémre a transparent png helyett tudtam használni egy jpg képet.

  9. Lazlo: Sokan használnak IE6-ot, ami azért is gond, mert már egy éve települt volna az IE7, ha ezeken be van kapcsolva az automatikus frissítés… Potenciális vírushordozók :)

    Szerintem akinek IE6 van, azt autoredirectelni kellene az IE7/8 vagy FF, Opera, etc. oldalra, hogy frissítsen, vagy csak kenyai weboldalakat látogasson.

    És ez a Te problémádat is megoldja… :)

  10. Szerintem az IE6 csak pár év múlva tűnik el teljesen, de ez egy designer szempontból megfogalmazott pesszimista jóslat :).

    Az is problémát jelent, hogy mint ahogy bármilyen más dologhoz hasonlóan, az emberek többsége ragaszkodik az általa használt, egyszer kipróbált és azonnal bevált böngészőhöz. Nem szeretnek váltani az „ismeretlenre”, szokatlanra, mégha az biztonságosabb böngészést is jelent, vagy ezt éppenséggel senki nem mondja el nekik. Nem beszélve arról, hogy vannak olyan laikusok is (és tényleg nem bántani szeretnék ezzel senkit), akiknek fogalmuk nincs róla, hogy mi az a böngésző program, pedig azt használnak internetezéshez :).

    Na mindegy, szóval bízzunk benne, hogy nemsokára eltűnik az utolsó IE6 is. Addig pedig muszáj számolni vele még a weboldalkészítés során.

  11. Azért IE6 után akinek felraktam pl. IE7-et még SOHA nem panaszkodott.
    Nem hiszem el, hogy nem zavarja, hogy sok oldal teljesen gagyin néz ki IE6 alatt? Persze gondolom legyint, hogy nah, a kis bitbuzikLqrták az oldalt…
    Ehh… Szemét dolog, de IE7-nél régebbi cuccokat tényleg bannolnám…

  12. sziasztok!

    nekem ie6 ban nem müködik ez a png fix pedig minden elérhetőség jól van beállítva minden egy mappában van blank.gif a .htc és a .css
    css: .pngfix {behavior:url(iepngfix.htc);}
    htc bennem bántottam az elérést mert ua könyvtárban van a blank.gif -el.

    követtem a csatolt zip html jében leirtakat ios ugy sem ment… ötlet?

  13. Hm…
    Ez tök érdekes. Én is hasonlóképpen jártam most egy oldallal. És nem csak a külső, szolgáltató által üzemeltetett webszerveren, hanem localhost sem megy.

    Pedig 1 hónapja még elsőre sikerült, mondhatni „pöccre indult”.

    Szóval én is várom a kommenteket :).

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét