Relli
Problémy a řešení zobrazování PNG obrázků v IE 6 a 7 editovat
Ačkoliv se toto téma může zdát poněkud zastaralé, stále jsou mezi námi tací, kteří, převážně z konzervativních důvodů a strachu ze změn, používají stále prohlížeč Internet Explorer verze 7, dokonce i 6.
Internet Explorer vyšel z dílen společnosti Microsoft a proslavil se svojí odlišností od ostatních prohlížečů a svojí neschopností přizpůsobit se standardům konsorcia W3C, kterými se všechny ostatní majoritní prohlížeče řídí. Když se verze šestková verze prohlížeče dostala na svět, měla ve své době monopolní postavení a používali ho téměř všichni. Vývojáři díky tomu upadli v přesvědčení, že jejich prohlížeč je dokonalý a nepotřebuje zlepšovat. Postupem času, s vývojem konkurence (Firefox, Opera, Safari) se ukázalo, že jsou s vývojem pozadu několik mamutích kroků. Tento dočasný propad ale způsobil a dodnes způsobuje mnohým webdesignérům četné problémy s kódováním a laděním vzhledu webových stránek, aby zajistili kompatibilitu zobrazení ve všech prohlížečích. Dnes se sice monopolní pozice IE pomalu vytrácí, vytlačuje jej hlavně Firefox, Google Chrome a Opera. Přesto se Internet Explorer nachází na každých Windows jako výchozí prohlížeč (což je vzhledem k jeho původu vcelku pochopitelné).
Formát PNG (Portable Network Graphics) spatřil světlo světa koncem roku 1996 a velmi rychle se stal jedním z nejpoužívanějších formátů pro webovou grafiku, díky 8 bitovému alfa kanálu, sofistikovaným kompresním algoritmem a podporou až 48 bitové barevné hloubky. Úkolem pro webové prohlížeče bylo implementovat podporu pro tento typ obrázků, což také většina rychle udělala, ale IE zůstal pozadu. IE 6, přestože vznikl v druhé polovině roku 2001, nepodporoval plně zobrazování PNG. Nejcitelnějším problémem je nulová podpora průhledných obrázků. IE namísto průhledné plochy zobrazí šedou. Naštěstí se vývojáři z Microsoftu poučili a IE verze 7 už tímto handicapem netrpí. Druhým problémem je špatná interpretace gamma hodnot. Obrázky se proto zobrazují na každé platformě s lehce odlišnými odstíny, jinde světlejší, jinde tmavší. U loga či obrázku samostatně umístěného na stránce to není až takový problém, což je taky důvod, proč se o tomto tématu nevedlo tolik diskuzí, ale pokud má být obrázek jako součást celku, rozdíl začíná být znatelný. Špatnou interpretací gamma hodnot trpí jak IE 6, tak 7.
Možností, jak zprůhlednit PNG je několik, buď pomocí kaskádových stylů (CSS), různými htc skripty nebo nějakými speciálně navrženými javascriptovými kódy. Poslední způsob mi osobně nepřijde příliš elegantní, jednak se musí načítat další data navíc a druhak, někteří uživatelé mají Javascript vypnutý, a tak se žádné změny neprojeví. Problém je v tom, že řešení nebyla stoprocentní, některá řešila průhlednost obrázku v HTML kódu (tag img), ale nepodporovala průhledný obrázek na pozadí nějakého elementu, jiná metoda nepodporovala částečnou průhlednost a tak dále. Obrázky na pozadí lze zprůhlednit pomocí filtrů, kterými disponuje pouze IE, nejspíš jako záplata za nedokonalou implementaci podpory PNG, konkrétně filtr AlphaImageLoader, ukázka v CSS pro představu:
#obrazek { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='obrazek.png',sizingMethod='scale'); }
CSS selektoru #obrazek rozumí tak, že najde HTML element s atributem id=“obrazek“, a tomu nastaví na pozadí obrazek.png, který bude díky filtru průhledný pro všechny verze IE. Nevýhoda tohoto způsobu použití je, že obrázku na pozadí už nemůžeme nastavovat další parametry jako například pozici nebo opakování. Další možný způsob opravy průhlednosti je nějakým htc či PHP souborem, například iepngfix.htc ze stránek http://www.twinhelix.com/css/iepngfix/. Ten funguje tak, že v CSS nastavíme elementu, ve kterém máme průhledný PNG vlastnost behavior s odkazem na uvedený soubor (ať už htc, nebo PHP). Tato cesta se vždy udává od kořenové složky webu. Příklad:
img { behavior: url(iepngfix.htc); }
Tento selektor najde všechny elementy img (všechny obrázky) a nastaví jim chování (behavior) podle daného skriptu. Výsledný PNG se bude zobrazovat průhledně. Tato možnost funguje skvěle, ale už se neaplikuje na průhledné obrázky na pozadí a navíc je nutné načíst navíc tento skript a provést ho. Řešení pomocí Javascriptu je na internetu celá řada, já jsem proto vybral to, které považuji za nejkomplexnější. Vyvinul ho programátor Drew Dillera a má název DD_belatedPNG. Využití je poměrně jednoduché:
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->
<!--[if IE 6]> je takzvaný podmíněný komentář a říká prohlížeči, aby se podíval, jestli to náhodou není Internet Explorer 6, pokud ano, vloží se skript DD_belatedPNG.js a provede se příkaz DD_belatedPNG.fix('.png_bg'); kde je mezi závorkami opět CSS selektor, tento vybere elementy s atributem class=“png_bg“ a na ně aplikuje PNG průhlednost. Toto řešení nemá žádné z předchozích omezení, funguje jak pro elementy img, tak pro obrázky na pozadí, včetně opakování a pozicování. Je ale potřeba, aby měl návštěvník povolený Javascript.
Řešení pro správnou interpretaci gamma hodnot je překvapivě jednoduché, jen zabere pár drahocenného času navíc. Existují programy, které umí zpracovat PNG obrázek tak, že mu výsledně rozumí a správně interpretuje i Internet Explorer. Jedním z takových programů je například PNGcrush , program, který je ke stažení i pod Windows, nemusí se instalovat a spouští se z příkazové řádky. Nejrychlejší postup je nahrát si PNGcrush do složky s PNG obrázky a v příkazové řádce zapsat:
pngcrush -rem alla -d out *.png
Výsledek jsou obrázky s kompatibilním zobrazením ve všech verzích IE na jakékoliv platformě.