CSS opacity no Internet Explorer 8

O Internet explorer sempre dá problemas. Outro dia não entendia o por que do atributo opacitydo CSS não funcionar no IE8, ao ponto de ter que entregar um site sem transparência em um elemento da DOM por pressa do empregador.
Depois disso com tempo, achei esse site aqui que explicou os motivos: http://realtech.burningbird.net/graphics/css/opacity-returns-ie8
Básicamente para atender o padrão CSS 2.1, a microsoft retirou seu atributo proprietário filter: alpha(opacity=NN) (lembram dele?) e não acrescentou o atributo opacity no IE 8. Serviço porco. Pois bem, agora, depois de centenas de solicitações, temos um código proprietário de transparência para o firefox, outro para o IE6, outro para o IE7, e mais um para o IE8.
Por fim, resumidamente (e para que não seja preciso ler o artigo do link) fazemos a transparência de um elemento da DOM assim:

.transparencia {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* IE 7 */
  filter: alpha(opacity=0); /* IE 6 */
  opacity: 0.5; /* Firefox novos e Opera */
}

E preferencialmente usem esta ordem de itens para evitar dores de cabeça :-)
O artigo não comenta o IE 6, então acrescentei essa penúltima linha que sabemos que funciona no IE 6, com sorte a seguda linha pode ser retirada pois o atributo filter: alpha(opacity=NN) costuma funcionar nos IE´s 6 e 7. Usem a linha que diz IE 7 quando estiverem com problemas em fazer funcionar a transparência.

Boa sorte designers!

0 comentários: