Como se prevenir para a chegada do IE8
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 (* html para IE6 e *+html para IE7) continurão 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.
2 comments Abril 28, 2008
