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.
Blog do Jader 