Conditional Comments no Internet Explorer

A utilização de conditional comments (comentários condicionais) é uma excelente maneira de contornar bugs e declarar regras de CSS para o Internet Explorer sem necessariamente utilizar hacks. Conditional Comments trata-se de uma sintaxe especial para escrever comentários em documentos de (X)HTML que são interpretados somente pelo Internet Explorer. Como o nome sugere, esses comentários condicionais, permite com que você aponte a condição necessária, escolhendo por exemplo a versão do browser, e poder fornecer uma solução específica para uma ou mais versões ao mesmo tempo. Apesar de não ser um padrão (é um código proprietário da Microdsoft), estes comentários ficam visíseis para todos os outros browsers mas são interpretados simplesmente como comentários comuns onde o seu conteúdo não é parseado.

Geralmente os bugs mais comuns de CSS (pelo menos aqueles com os quais devemos nos preocupar por enquanto) são compartilhados pelas 3 últimas versões do Internet Explorer, ou seja, as versões 5, 5.5 e 6. Como os comentários condicionais surgiram no Internet Explorer 5, a forma de declarar para fornecer estilos específicos pra estas três versões ao mesmo tempo seria assim:


<!--[if IE]>
<link href="estilos/estilos_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Como isso funciona?

Normalmente você tem sua folha de estilos externa com todas suas regras e declarações, e dependendo da situação, você se vê obrigado a ter que encontrar uma solução específica para o IE. Geralmente as duas escolhas mais comuns são aplicar hacks ou então uma solução mais limpa usando child selectors (seletores filho). Eu escrevi sobre estas duas soluções aqui anteriormente em Hacks.

Mas usando conditional comments você fica livre das duas soluções ao declarar dentro de uma folha de estilos separada apenas aquelas regras em que seja necessário declarações específicas para o Internet Explorer. Lembre-se apenas de declarar o conditional comment chamando sua folha de estilos específica para o IE abaixo da sua folha de estilos principal da seguinte maneira:


<head>
     ...
     <link href="estilos_padrao.css" rel="stylesheet" type="text/css" />
     <!--[if IE]>
      <link href="estilos_ie.css" rel="stylesheet" type="text/css" />
     <![endif]-->
</head>

Isso é necessário para que as declarações contidas na folha para o Internet Explorer não seja sobreposta pela declaração padrão para todos os outros browsers. Assim você assegura de que o IE vai renderizar as regras específicas para ele no lugar das regras para os outros browsers.

As vantagens de usar conditional comments como uma forma de servir estilos específicos para o IE é que fazendo assim, você concentra as exceções todas em um só lugar, sua folha de estilos principal fica limpa e sem hacks, você consegue ficar livre de erros de sintaxe facilmente, e o dia em que quiser parar de ser compatível com estas versões do Internet Explorer (daqui uns 5 anos talvez?) basta excluir a folha de estilos e o conditional comments e manter sua folha de estilos intacta.

Por que você está falando disso agora?

A medida que o tempo passa antes do lançamento oficial do Internet Explorer 7 as recomendações para que os sites feitos anterior a nova versão não fiquem “quebrados” na nova, começam a ser mais concretas. Então em um momento ou outro você vai ter que prestar atenção nisso.

O call to action da Microsoft avisa que as seguintes soluções (hacks) não deverão estar presentes nos sites quando o IE7 estiver na ativa. Caso contrário seu site não será exibido corretamente. Os hacks que não deverão ser utilizados são os seguintes:

  • html > body – http://css-discuss.incutio.com/wiki/Child_Hack
  • * html – http://css-discuss.incutio.com/wiki/Star_Html_Hack
  • head:first-child + body
  • head + body – http://ww2.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
  • body > element – http://css-discuss.incutio.com/wiki/Child_Hack

O conselho da Microsoft para resolver este problema é utilizar conditional comments. Lá no IEblog, eles colocaram um exemplo para colocar estas regras e declarações no próprio documento dentro de um conditional comment, o que eu não recomendo. Ao menos que não estejamos falando de um site com apenas uma única página e não duas ou mais, será muito mais produtivo que você coloque todas suas regras e declarações dentro de uma folha de estilos externa e a importe de dentro de um conditional comment como eu exemplifiquei acima.

Você então deve retirar todas as soluções pouco elegantes da sua folha de estilos, retirar tudo aquilo que for um by-pass para o IE, transformá-las em regras e declarações normais e colocá-las dentro de uma folha de estilos separada e chamá-la nos seus documentos através de conditinal comments. Acredite ou não, esta é a solução mais elegante e recomendada que existe.

Várias condições

As outras condições específicas que podem ser aplicadas são as seguintes:

<!--[if IE]>
     Para todas as versões
<![endif]-->

<!--[if IE 5]>
     Apenas para o Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
     Apenas para o Internet Explorer 5
<![endif]-->

<!--[if IE 5.5]>
     Apenas para o Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
     Apenas para o Internet Explorer 6
<![endif]-->

<!--[if gte IE 5]>
     Para o Internet Explorer 5 e versões superior
<![endif]-->

<!--[if lt IE 6]>
     Para versões anteriores ao Internet Explorer 6
<![endif]-->

<!--[if lte IE 5.5]>
     Para o Internet Explorer 5.5 e versão inferior
<![endif]-->

Alguns outros usos e aplicações dentro de conditional comments são exemplificados nas documentações do MSDN (sob a visão deles) no texto “About conditional comments” onde você pode aproveitar muita coisa se tiver interesse.

Referências: