Tecnologia

Hacks CSS para Internet Explorer 6 e 7

Por rikaryo

16/08/2009 2 Leitura mínima

3 0

Não tem como, será sempre – um pouco de exagero – preciso utilizar do hack no CSS para o template ficar correto no IE6, IE7 e Firefox. Quando o IE7 foi lançado, ficou-se um tempo pensando que não havia hack para ele. Bobagem, a Microsoft não consegue fazer nada sem algum problema, que acaba nos ajudando.

Main Menu

Plataforma Steam
ForoGuate
ForoCarros

Hack CSS para IE6

Como muitos devem saber, o Firefox não tem hack para CSS. Portanto, você deve fazer funcionar primeiramente nele, e de tabela tentar fazer funcionar no IE7 – que tem renderização muito semelhante.

Depois, se falhar no IE6, utilize do famoso hack do underline na frente da propriedade:

#elemento {
background-color: blue;
_background-color: red; /* apenas para IE6 */
}

Hack CSS para IE7

Caso fique algum problema no template para o IE7, use o seguinte hack:

#elemento {
background-color: blue;
*background-color: red; /* altera propriedade do IE6 e IE7 */
_background-color: blue; /* apenas IE6 */
}

Perceba acima que o hack para IE7 funciona também para o IE6, por isso uma última regra para reverter o efeito da propriedade do IE7.

CSS Browser Selector

O CSS Browser Selector é um javascript que coloca uma classe específica para cada tipo de navegador na tag html.

Dessa forma, quando você precisa de um hack CSS para o IE6, seu CSS ficaria parecido com isso:

.ie #elemento { color: blue; }
.ie7 #elemento { color: red; }

Você pode ver mais exemplos no próprio site do desenvolvedor.

Já usei uma vez esse script, mas acredito que dessa forma seja mais fácil voltarmos alguns anos atrás, onde existiam dois arquivos CSS – um para o Firefox e outro para o IE.

É bem interessante, mas eu ainda acho melhor usar o hack padrão dos browsers, ou ainda tentar re-estruturar o HTML ou CSS, do que usar o script, que, por pura preguiça, acabamos não tentando resolver o problema – que muitas vezes é simples – e partimos logo para uma regra nova no CSS.

Conclusão

Já consegui diversas vezes criar um template sem a utilização de hacks. Mas quando o template é um pouco mais elaborado, as vezes não compensa sair dos padrões de HTML e dificultar a acessibilidade para poder validar o CSS.

O que vale nessas horas é o bom senso!

O Internet 8

O Internet Explorer 8 saiu e todos pensavam que iria diminuir as diferenças, mas como sempre a Microsoft lançou outros hacks que vou adicionar por aqui em um outro momento.