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

Você está no BLOG do Maujor. IR PARA O SITE

Hacks CSS para o IE-7

Publicado em: 2006-05-2 — 27.822 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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