PNG e o infame Internet Explorer

Diversas pessoas escreveram sobre isto em seus blogs, a começar por alguns gringos e depois os brasileiros. Mesmo assim, considerando a utilidade que este código teve pra mim, não acho que seja demais postar minha própria versão sobre este script em meu próprio site. Confesso que não o usei muitas vezes, mas quando foi necessário, foi perfeito.

Todos sabem que o PNG não pegou como formato de imagem para web em grande parte por causa do Internet Explorer ( MSIE ), aliás, pela incapacidade do MSIE em interpretar a camada alfa do PNG. Outros browsers interpretam esta camada já á muito tempo mas o MSIE até hoje ignorou isto. Quem sabe a versão 7.0 não se redime?

O código, baseado em um artigo de Michael Lovitt, se aproveita de uma falha do MSIE (isso mesmo, este Java script é um tipo de hack!) e o força a interpretar a bendita camada alfa do PNG, permitindo assim que se utilizem imagens com transparências esmaecidas que o gif não é capaz de fazer.

O java script pode ser salvo externamente e linkado no XHTML pela seguinte linha entre as tags <head>:

<script type="text/javascript" src="pngfix.js"></script>

Desta maneira, todas as imagens inseridas no código serão interpretadas pelo Internet Explorer com sua devida transparência.

Prós:

-É ignorado pelos outros browsers que não seja o MSIE, e não atrapalha em nada.

– Não é empecilho para validação pela W3C e funciona perfeitamente com doctype Strict.

Contra:

– Não funciona para se inserir pngs como backgrounds em css.

Referência: http://homepage.ntlworld.com/bobosola/

Para baixar o Arquivo clique aqui! Minha versão ficou desatualizada, você encontra uma versão mais atual aqui

Ainda sobre o MSIE, diversas pessoas criticam e menosprezam o infame browser. Que seja fato que ele é o pior dentre os disponíveis gratuitamente, ninguém com um pouco de experiência em web pode negar. O Internet Explorer é um browser infame não é à toa, ele é realmente o pior! Possuiu diversos bugs, é instável, tem problemas até considerados "clássicos" como o Box Model, interpreta CSS de um modo arcaico e por aí segue a lista. Mas ao mesmo tempo eu acho muito contraditório, diversos desenvolvedores web ignorarem completamente o MSIE. Eles alegam que o browser é ruim, tem erros e blá blá blá, e que não devem pensar nele em tempo de desenvolvimento. Pensam apenas nos "browsers webstandards". Não entendo como ainda estão empregados os que assim pensam (se é que os que dizem isso realmente estão empregados). O Internet Explorer ainda possuiu cerca de 90% dos usuários na web, eu goste disso ou não. Por mim, o primeiro browser do mercado seria o Mozilla! Mas isso não é fato.

Então, não adianta se esconder: se você desenvolve para web, você tem que pensar em Internet Explorer , sempre! Procuro encontrar as melhores soluções, hacks válidos e aceitos pela W3C, scripts como este para utilizar png e por aí vai. Se um empresário está procurando um webdesigner para fazer o site de sua empresa, e se ele acessar o seu site do Internet Explorer e "der pau", você acha que ele vai se sensibilizar com sua opiniã o"sobre browser de verdade" e investir grana em um produto acessível apenas a 10% dos usuários da internet? Isso nunca vai acontecer. Devemos procurar soluções que minimizem ao máximo o uso de recursos limitados apenas a um tipo de browser, é claro. Devemos pensar em acessibilidade, multi-plataformas e diversos dispositivos móveis se possível. Devemos pensar no Ópera, Nestscape, Firefox e no maldito Internet Explorer. Se eu uso Internet Explorer? É claro que sim. Eu desenvolvo sites e aplicações para a web constantemente, assim como eu utilizo os outros 3 navegadores.

Se continuarem a pensar que devem esquecer o Internet Explorer, acabarão sendo esquecidos mesmo com grandes macetes de webstandards na manga, e o máximo que conseguirão, será serem respeitado por um pequeno punhado de pobres geeks!

  • Thiago Melo

    Perfeito! Acho importantíssimo o que foi dito neste POST. Realmente o Internet Explorer não é o melhor browser, mas ainda assim, por estar completamente integrado com o Windows, mais de 90% da população o utiliza. Sendo assim, seria estupidez ignorá-lo. Eu particularmente, como desenvolvedor web, não vejo isso como uma barreira já que hoje temos tantos hacks poderosos na web, que reproduzem o mesmo resultado em todos os browsers mais utilizados.

    Mas falando sobre PNG: Já utilizei este código e achei muito bom. É claro que possuí suas falhas como qualquer código em desenvolvimento, mas ainda assim é muito poderoso. Se enfrentamos problemas com suavização de curvas esta é a melhor solução. Mas ainda sim possuí erros e contra-indicações. O erro mais visível é que quando o código é carregado, um fundo cinza é mostrado por alguns segundos o que atrapalha um pouco a estética de carregamento da página, e a contra-indicação seria o alto tamanho físico que os PNGS possuem. Mas de qualquer forma este código é a solução para muitos problemas!

  • Pingback: Dynamic Text Replacement » Revolução()

  • maicon

    Link ta quebrado

  • TFox

    É… Não tá dando pra baixar…

  • http://www.direis.com Diego

    é realmente não ta funcionando mais o codigo é o mesmo que está no site da referencia :) la tem alguns outros exemplos e o js :)

    agora q isso é ridiculo é no ie tem um filtro pra vc dar um load manual no alpha da imagem não seria mais facil para nos e para eles colocarem ja embutido altomaticamente ja que se a imagem tem alpha é obvio que você esta afim de usalo ne…

    bom deixa isso pra la muito bom salvou minha pele mais ainda to tendo problemas usando imagens muito pequenas no caso 10px de altura ele ta acabando dobrando o tamanho da imagem fica com 20px de altura e eu pra prevenir ja mandei 10px em tudo q é lugar q podia css code tudo e nada de ficar nos 10px…

    se alguem souber e puder me mandar um email falando como fico agradecido.

    vlw

  • http://leoguime.wordpress.com Leandro

    Não funciona com o nifty corners cube.

  • Cássio

    E quando ele utiliza esse hack, não da de usar na imagem.

  • http://www.oxenti.com Gustavo

    Duas coisas, a primeira é Realmente ótimo ter um hack pra PNG que funcione (como esse :P) para o Internet explorer.

    Já a outra é um erro. O Internet Explorer, não é um Browser, e sim, um BUG que acessa sites :P

  • Rafael

    adorei e serviu pra mim…soh q meu problema eh ainda mais complexo…preciso q ele tbm reconheça a tranparência da imagem q coloquei no background…

    o q faço?

  • jsopra

    Eu fiquei com medo de colocar funcionalidades javascript sendo que 0,5% dos visitantes não tinham plugin. Imagina desconsiderar o browser que 95% das pessoas usam. Este desenvolvedores se igualam ao grande IE, são desenvolvedores que não suportam todas funcionalidades hehehe!