Magento e IE6 (suporte a PNG utilizando IEPNGFIX)
14 de agosto de 2009O Magento lida com o IE6 de forma brilhante, com folhas de estilo separadas, exatamente como a W3C recomenda. Porém percebi essa semana, enquanto fazia um corte de layout bem moderno e cheio de sombras e transparências, que os PNGs acabam morrendo no caminho.
Possuindo uma solução integrada pra lidar com esse problema, o Magento quase faz isso tudo passar despercebido, mas ela não trata todas as possibilidades como, por exemplo, alguns tipos de PNGs como background. Para resolver isso, instalei nele uma famosa correção que circula na web, o IEPNGFIX (já muito bem rankeado no google, diga-se de passagem). Seguem os passos de como fiz para instalá-lo no Magento:
- Ente em http://www.twinhelix.com/css/iepngfix/ e baixe a última versão da correção. No momento é a 2.0 alpha 3, que você pode obter clicando em “teste area”.
- Faça upload dos arquivos blank.gif, iepngfix.htc e iepngfix_tilebg.js (contidos no zip da correção) para o diretorio skin do seu template, algo como http://meumagento.com.br/skin/frontend/default/meutema.
- Abra o arquivo app/design/frontend/default/meutema/template/page/html/head.phtml – Transforme a tag script de seu original:
Original:
<script>
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
Para:
<script>
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BASE_SKIN = '<?php echo $this->getSkinUrl('blank.gif') ?>';
//]]>
</script>
- No final desse mesmo arquivo, adicione as seguintes linhas:
<style type="text/css">
img, div, a, input { behavior: url(<?php echo $this->getSkinUrl('iepngfix.htc') ?>) }
</style>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('iepngfix_tilebg.js') ?>"></script>
- Abra o arquivo iepngfix.htc e altere o caminho da imagem em branco para:
// This must be a path to a blank image, relative to the HTML document(s). // In production use I suggest '/images/blank.gif' or similar. That's all! IEPNGFix.blankImg = BASE_SKIN;
- Limpe todos os caches possíveis e dê um reload.
Lembre-se:
- Coloque width e height em todos os PNGs que existirem no seu site.
- Caso a correção comece a dar alerts dizendo que existem “unclickable links”, simplesmente comente a única linha que contém a palavra “alert” também no arquivo iepngfix.htc. Aparentemente, apesar de parar de incomodar o usuário, tudo continua funcionando como deveria.
- Quando puder, use GIF! É menos chance de dar algum problema…
Obrigado e até a próxima!