Hacks CSS para o IE-7
Publicado em: 2006-05-2 — 33.120 visualizacoes
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á.
> 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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-05-2 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/05/02/hack-css-ie7/trackback no seu site.
seu artigo esta de parabens. infelizmente em vez das empresa que desenvolvem os navegadores fazerem algo padrao fazer tudo ao contrario e nos desenvolvedores é que pagamos o papo.. essa onda de IE6 IE7 e IE8 ta canseira viu.. tem que programar agora para varios navegadores..
Gostei muito da matéria!
Venho dizer q essa idéia de utilizar o comentario condicional é a melhor coisa mesmo, pois já que o iex. não esta seguindo o padrão correto, temos que dar um certo “jeitinho”. Afinal, querendo ou não, ele ainda é o mais utilizado!
Realmente, a melhor opção é os comentários condicionais. Se um dia, um dia…, o internet explorer seguir totalmente os padrões é só tirar o CSS de correções para o internet explorer. Excelente matéria! []’s
Realmente os comentários condicionais são o melhor método. Na minha opinião, inclusive, são até mais fáceis de ser entendidos e aplicados (além de deixar o código “principal” mais limpo/legível).
Mais uma vez uma excelentíssima matéria publicada! É isso aí, Maujor!