Hacks CSS para o IE-7

Evite a todo custo o uso de hacks baseados em bugs dos nevegadores, pois futuras versões do navegador podem vir com os bugs corrigidos e seu código estará comprometido. Muitos desenvolvedores ficaram apreensivos quando souberam que o Internet Explorer 7 iria corrigir o bug do seletor universal * html e houve um apelo pelo aparecimento de uma maneira de se detectar o IE7 nas CSS.

Bem, eu em absoluto não aprovo o uso de tais hacks (a maneira mais apropriada de detectar o Internet Explorer e suas várias versões é com o uso de comentários condicionais – NT: mudei o link original para um artigo em português), mas descobri alguns hacks que funcionam no Internet Explorer 7 e que serão divulgados cedo ou tarde, assim eu considero que devo publicá-los desde já.

Pular para “O melhor método”

> body

Se em um seletor filho (seletor do tipo E > F) for omitido o seletor que deva estar antes ou depois do elemento de combinação de seletores > o Internet Explorer 7 assume (em desacordo com as especificações) que o seletor omitido é o seletor universal *. Por exemplo > body é tratado pelo IE7 como se fosse * > body, ao passo que os navegadores complacentes com as standards ignoram tal seletor devido ao erro de parseamento proveniente da sintaxe errada. Outro exemplo: o IE7 trata > > como se fosse * > * > *.

O IE7 tem o mesmo comportamento com os outros elementos de combinação de seletores. Por exemplo + p é tratado como se fosse * + p e ~p é tratado como se fosse * ~p. (Nota: O elemento de combinação de seletores ~ é previsto nas CSS 3 e assim, ainda não valida em CSS 2.1.)

O seletor >body {} seleciona o elemento BODY somente no IE7. Isto poderá ou não funcionar em versões futuras. Atenção: o uso dos seletores como mostrados acima tornarão inválidas as CSS!

html*

O Internet Explorer 7 resolveu o bug que permitia selecionar um elemento pai inexistente do html através do hack do seletor universal (*), contudo permanece um outro bug que não foi resolvido: Quando o seletor universal é diretamente adjacente a um seletor simples e o espaço em branco entre eles for omitido, o Internet Explorer 7 assume que existe um espaço em branco entre eles. Isto significa que html* é tratado pelo IE7 como se fosse html *, enquanto que os navegadores complacentes com as standards ignoram tal seletor devido ao erro de parseamento proveniente da sintaxe errada. De modo semelhante, o IE7 trata ** como se fosse * *.

A regra CSS html* {} será aplicada a todos os elementos descendentes do elemento html, no IE 7 e versões anteriores. Isto poderá ou não funcionar em versões futuras. Atenção: o uso dos seletores como mostrados acima tornarão inválidas as CSS!

*+html

Ops, isto não lhe parece familiar? Os seletores irmãos adjacentes que se escreve com o elemento de combinação de seletores (+) apresentam um comportamento estranho no IE7 quando envolvem o seletor universal (*). No Internet Explorer, o seletor universal seleciona incorretamente ‘coisas’, estranhas, tais como comentários no código e até os doctypes. Podemos tirar partido disto para nos referir ao elemento html como se ele fosse o irmão adjacente de um inexistente eque somente o IE considera "elemento" doctype.

Assim, o seletor, *+html {} seleciona o elemento html somente no IE7 only. Isto poderá ou não funcionar em versões futuras. Este método é perfeitamente válido nas CSS!

O melhor método

Como eu disse acima, o melhor método para detectar o Internet Explorer ou uma versão específica dele é através do uso de comentários condicionais. Mesmo assim, abaixo estão relacionados os hacks CSS para servir as diferentes versões do Internet Explorer:

IE 6 e menor

Use * html {} para selecionar o elemento html.

IE 7 e menor

Use *+html, * html {} para selecionar o elemento html.

IE 7 somente

Use *+html {} para selecionar o elemento html.

IE 7 e navegadores standards somente

Use html>body {} para selecionar o elemento body.

Navegadores modernos (não IE 7)

Use html>/**/body {} para selecionar o elemento body.

Os hacks para o IE7 hacks mostrados acima poderão ou não funcionar em versões futuras do Internet Explorer. è fortemente recomendável que você use comentários condicionais (NT: mudei o link original para um artigo em português) no lugar dos hacks mostrados, uma vez que eles são uma funcionalidade espeífica do Internet Explorer e forma projetados com esta finalidade.

[Atualização]

2006-04-29: Convém mencionar que a corrente versão beta do Internet Explorer é considerada com o seu layout terminado ( layout complete), isto implica dizer que a menos que surjam razões muito sérias, não serão feitas mudanças significativas para a versão final. Representantes do time de desenvolvedores do Internet Explorer disseram que os trabalhos de desenvolvimento da engine Internet Explorer estão congelados, significando que não estão sofrendo mais modificações. Isto é uma forte indicação de que provavelmente tudo o que foi aqui dito não mudará com o lançamento da versão final do nternet Explorer.

Créditos

Este artigo é uma tradução do original em ingles de David Hammond
publicado em http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php