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 o hack estrela para o IE7 (*+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:

  1. azul com fundo branco nos browsers;
  2. branco com fundo azul no IE7;
  3. 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.

6 Comentários

Arquivado em Artigos, Browsers, CSS, Internet Explorer, Tutoriais, Web Standards

6 Respostas para “Como se prevenir para a chegada do IE8

  1. Ó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!

  2. semente

    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!

  3. Rodrigo (CuecaX)

    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😛

  4. @Rodrigo, realmente eu me equivoquei. O IE8 continua suportando apenas o hack estrela para o IE7.

    O post já está devidamente editado.😉

  5. 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!

  6. Prefiro hacks. É um saco ter que ficar abrindo um arquivo só pra mexer no IEca.

    Outra, coisa, em questão de bytes é uma boa economia e tbm uma requisição a menos.