O Internet Explorer 8 está chegando aí e seu lançamento pode servir tanto de alívio como dor de cabeça pra nós desenvolvedores, visto que vários bugs das versões “atuais” (IE’s 6 e 7) serão corrigidos, porém os hacks estrela ( o hack estrela para o IE7 (* html para IE6 e *+html para IE7) continurão*+html) continua funcionando no IE8.
Trabalho é legal, mas re-trabalho é entediante…
Se você, como eu, é do tipo que não gosta de re-trabalho, é bom começar a pensar nisso. E é o que eu tenho feito nos meus últimos projetos. Tento evitar ao máximo o uso de hacks, mas quando não dá pra escapar, recorro aos recursos técnicos de emergência (aka gambiarra). A própria Microsoft (quem diria…) bem que nos avisou ainda na época do lançamento do IE7: prefiram os comentários condicionais.
Comentários condicionais? Mas isso não aumenta meu trabalho?
A grande desculpa esfarrapada para o não-uso dos comentários condicionais é que o número de arquivos CSS podem aumentar consideravelmente e isso em projeto grandes pode se tornar em um caos para administrar. O fato é que, apesar de não ter me envolvido em nenhum projeto grande até hoje, eu costumo pegar alguns layouts complexos pra codificar (<jabá>vide portfolio da Interag, desatualizado e prestes a sofrer alterações</jabá>) e, mesmo assim, é raro eu ter que criar mais de um arquivo CSS especificamente para os IE’s e esse único geralmente não tem mais do que 15 ou 20 linhas de código. Isso mesmo. Eu crio apenas um único arquivo CSS que cuida das incompatibilidades do IE6 e do IE7. Como?
<!--[if (IE 6)|(IE 7)]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"><![endif]-->Esse trecho de código faz a mágica. Nele nós dizemos que, caso o browser do usuário seja o IE na versão 6 ou 7, um novo arquivo ie.css deverá ser incluído na página. Colocamos esse código no <head></head> de nosso documento e pronto. Agora tudo o que temos que fazer é, dentro desse arquivo ie.css declarar as regras CSS específicas para o IE6, para o IE7 e para ambos:
/* ie6 e ie7 */
.clearfix { display:inline-block; }
/* apenas ie6 */
* html #geral { height: 1px; }
/* apenas ie7 */
*+html legend { text-indent: -5px; }Mas olha os hacks ali! Você trapaceou!
Como dito anteriormente, apenas as versões 6 e 7 do navegador da Microsoft verão esse arquivo. Portanto, é OK usar hacks específicos para essas duas versões do browser dentro desse arquivo (e somente dentro dele). 
Um exemplo prático
Nada como um exemplo mais prático para compreendermos como funcionam as engrenagens. Vamos assumir que temos a seguinte marcação no nosso HTML:
<h1>Olá! Eu sou um exemplo prático. 
</h1>OK, esse exemplo não foi nada prático. Mas continue seguindo, você não tem nada a perder…
Bem, suponhamos que queiramos que esse título assuma as seguintes formatações:
- azul com fundo branco nos browsers;
- branco com fundo azul no IE7;
- branco com fundo vemelho no IE6.
Para isso, precisaríamos ter em nosso arquivo CSS principal a seguinte regra:
h1 {
color: #00B;
background-color: #FFF;
}E o nosso arquivo ie.css ficaria da seguinte forma:
/* ie6 e ie7 */
h1 { color: #FFF; }
/* apenas ie7 */
*+html h1 { background-color: #00B; }
/* apenas ie6 */
* html h1 { background-color: #B00; }Se você testar esse código nos browsers de verdade (gentilmente incluindo o IE8 aqui, como colher de chá), verá que o título está azul com fundo branco, como previsto. Já nos IE’s 6 e 7 o título estará branco; no IE7 com fundo azul e no IE6 com fundo vermelho.
That’s all, folks. Em breve espero postar mais artigos pra movimentar novamente o blog. Ou não.
5 Comentários
Abril 28, 2008 às 10:37 pm
Ótimo artigo, Jader.
Nunca usei CSS-Hacks na minha vida, acho totalmente inútil, tendo em vista métodos mais amenos, como os comentários condicionais.
Embora reconheça a gigante melhora na adoção dos padrões, a quantidade de browsers que concorrem já é grande, e pelo menos no início o IE8 será apenas mais um concorrente para o IE6, IE7, Firefox, Safari, etc…
Abraço!
Abril 29, 2008 às 5:36 pm
Muito bom artigo!
Eu faço exatamente como você e creio que essa é a melhor forma de lidar com essas IEca sem muita sujeira.
Continue escrevendo! Abraço!
Maio 21, 2008 às 9:41 am
So uma pergunta: Voce poderia me dizer daonde saiu essa afirmação:
“os hacks estrela (* html para IE6 e *+html para IE7) continurão funcionando no IE8″
Q eu saiba o * html so funciona no IE6, e nao no IE7, nao tem pq voltar a funcionar no ie8
Maio 21, 2008 às 11:21 am
@Rodrigo, realmente eu me equivoquei. O IE8 continua suportando apenas o hack estrela para o IE7.
O post já está devidamente editado.
Outubro 13, 2008 às 6:33 pm
Rapaz, quanto tempo hem! Vários posts bacanas por aqui. Ah, obrigado pelo comentário lá no meu blog, daquele jeito que tu falou é bem mais simples centralizar divs!
Um abraço!