Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

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 condicionaisNT: 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

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.

4 comentários na matéria: “Hacks CSS para o IE-7”

  1. viconcursosNo Gravatar disse:

    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..

  2. Leonardo ProcópioNo Gravatar disse:

    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!

  3. EdyNo Gravatar disse:

    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

  4. TFoxNo Gravatar disse:

    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!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo