Sep 24
Realidade Aumentada Bradesco no iPhone 3GS
September 24, 2009 by Marcio Misumi
Sep 22
PNG Transparente no IE6 com background position e repeat
September 22, 2009 by Marcio MisumiEm outubro de 2008 eu postei um tutorial explicando como corrigir o problema do PNG no Internet Explorer 6.0, porém a solução que eu mostrei não era possível utilizar background position e repeat. A algum tempo encontrei um JavaScript que corrigia este problema, mas antes de publicar um tutorial eu preferi testa-lo em alguns sites para ter certeza que funcionava legal.
Como aplicar a correção para o PNG Transparente no IE6
Primeiro você deve salvar o arquivo iepngfix.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.
No arquivo iepngfix.htc existe uma variável “IEPNGFix.blankImg” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.
... IEPNGFix.blankImg = 'images/bground/blank.gif'; ...
Para utilizar PNG transparente utilizando a tag img diretamente no HTML é necessário utilizar o seguinte código CSS:
img {
behavior: url("css/iepngfix.htc");
}
Qualquer seletor/propriedade que tiver imagem PNG transparente deverá ser adicionado no código acima, separado por vírgula.
img, div.conteudo, h1, h2, input {
behavior: url("css/iepngfix.htc");
}
OBS: O caminho (path) para o arquivo iepngfix.htc é em relação ao arquivo HTML.
Agora para que o background position e repeat funcione, nós precisamos do arquivo iepngfix.js. Vamos fazer a chamada deste arquivo dentro da tag do html utilizando a condicional para que somente o IE6 faça a requisição deste arquivo, evitando assim que todos os navegadores façam o download deste arquivo desnecessariamente.
... <head> <!--[if lte IE 6]> <script type="text/javascript" src="js/iepngfix.js"></script> <![endif]--> </head> ...
Para links com o fundo transparente, no primeiro tutorial que postei, mostrava que era necessário definir no css os links com posição relativa. Isso não é mais necessário porque este JavaScript que nós utilizamos corrige este problema.
Problema encontrado
Depois de fazer diversos testes antes de criar esse tutorial, eu descobri um problema com esse JavaScript. Se por acaso você tiver uma funcionalidade em teu site que seja necessário colocar display: none; em algum elemento e depois ao clicar em algum botão este elemento passa para display: block; e justamente ele tiver um PNG transparente, essa imagem não receberá o filtro que deixa transparente no IE6.
Exemplos das soluções demonstradas neste tutorial
- PNG transparente com background repeat
- PNG transparente com background position
- PNG transparente utilizando a tag img no HTML
OBS: Não esqueçam de visualizarem os exemplos acima no IE6.
Esta solução foi desenvolvida por http://www.twinhelix.com
Deixem seus comentários.
Abraço.
Sep 10
Estatísticas agosto/2009: Browsers
September 10, 2009 by Marcio MisumiVejam a estatística dos browsers do mês de agosto divulgado pela Net Applications:
Microsoft Internet Explorer – 66.97%
Firefox – 22.98%
Safari – 4.07%
Chrome – 2.84%
Opera – 2.04%
Netscape – 0.49%
Outros – 0.58%
Por versão dos browsers:
Microsoft Internet Explorer 6.0 – 25.25%
Microsoft Internet Explorer 7.0 – 21.10%
Microsoft Internet Explorer 8.0 – 15.10%
Firefox 3.0 – 12.48%
Firefox 3.5 – 8.88%
Safari 4.0 – 2.55%
Chrome 2.0 – 2.50%
Outros – 11.66%
Para a estatística dos browsers do mês de julho/2009, clique aqui.
Sep 10
Estatísticas agosto/2009: Resoluções
by Marcio MisumiVejam a estatística de resoluções de tela do mês de agosto divulgado pela Net Applications:
1024 x 768 – 31.29%
1280 x 800 – 20.40%
1280 x 1024 – 11.36%
1440 x 900 – 9.05%
1680 x 1050 – 5.75%
800 x 600 – 3.85%
Outras – 17.55%
Para a estatística de resoluções de tela do mês de julho/2009, clique aqui.
