Solução CrossBrowser para problemas de opacidade no Internet Explorer

Problema de opacidade no Internet Explorer - ResolvidoQuem desenvolve para a WEB, tem um grave problema, que perdura desde 2001.. O nome é Internet Explorer, Explorer ou simplesmente “I.E.”. São tantas incompatibilidades, bugs, que perdemos horas e horas a mais, tentando resolver. Um destes problemas é a opacidade, propriedade do CSS 2 para tornar um elemento opaco, transparante ou semi-transparente. Neste post, vou abordar a solução definitiva para problemas de opacidade no Internet Explorer.

Primeiramente, gostaria de manifestar mina opinião, é quase um desabafo, ou um apelo. Por favor, você que está acessando agora o meu blog, se estiver usando o Internet Explorer em versões inferiores ao 9, atualize o seu navegador. Você não tem idéia o trabalho que dá para manter o site bem apresentável a navegadores antigos. =)

Solução CrossBrowser para CSS Opacity

No exemplo abaixo, está a solução crossbrowser para se utilizar a propriedade CSS 2 Opacity, de forma que seja apresentável em todos os navegadores conhecidos (pelo menos os melhores), incluíndo o Internet Explorer 7 e 8 (Opacidade no Explorer 6 é tenso, nem tentei).

#elemento-opacidade{
   filter: alpha(opacity=70);/* IE 5-7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  /* IE 8 */
   -moz-opacity: 0.7;/* Netscape */
   -khtml-opacity: 0.7;/* Safari 1.x */
   opacity: 0.7; /* Navegadores Modernos*/
}

E não para por ai..

Opacidade no Internet Explorer utilizando jQuery

Um outro problema que temos relacionado a opacidade do Internet Explorer, é o uso de animações jQuery. Quando se anima uma objeto com jQuery, usando funções como “fadeTo”, “FadeIn” e “Fade Out”, é aplicado ao elemento de forma progressiva, a opacidade. Entretanto, mesmo usando no seletor CSS deste elemento as regras crossbrowsers vistas em cima, a opacidade não é aplicada corretamente. No lugar dela, fica uma cor sólida (a cor do elemento). Para resolver isso, teremos que recorrer a um método jQuery, desenvolvido por mim.

function opacityIE(elemento,opacidade){
	if($.browser.msie && /[78]+/.test(parseInt($.browser.version))){
		$(elemento).css('filter', 'alpha(opacity='+opacidade+')');
	}
}

//e para usar é bem simples, após vc realizar o efeito que use a opacidade
//como o show, hide, etc. chame a minha função no seu callback

$("#meuelemento").show(600,function(){
   opacityIE($(this),70); //opacidade 70
});

Bem gente, eu testei isso no Explorer 7, 8 e 9, em todas estas versões os testes forão satisfatórios. Só encontrei um problema relacionado a fontes ClearType no Explorer 8, mas isso fica para um próximo post.
Espero que tenham gostado!

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site