Conditional Comments no Internet Explorer
Por: Henrique C. Pereira
Publicado em Wednesday 19 April 2006 às 08:00Categoria: HTML/CSS/JScript
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 – http://centricle.com/ref/css/filters/tests/owen/
- head + body – http://www.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:
- Call to action: The demise of CSS hacks and broken pages:
- MSDN: About conditional comments
- Quirks Mode: Conditional Comments:
Artigos relacionados:
- Falso hover no Internet Explorer
- Qual o seu fluxo de trabalho para testar seu CSS?
- CSS Media Types e como fazer o Internet Explorer do seu Pocket PC reconhecer somente sua folha de estilos handheld
- CSS Signatures
- O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP
- As Dicas de CSS que você não deve deixar de saber
- Estilizando abbr no Internet Explorer 6
Comentários dos leitores
Este artigo possui 27 comentários
Bastante interessante este recurso.
Mas estou achando mais interessante ainda, esta ponte criada pelo IEBlog e os desenvolvedores web, espero que isso somente evolua.
Ótimo post, obrigado Henrique!!!
Bacana o post henrique,
Nós que seguimos os padrões, como sempre temos um trabalho a mais ao se tratar do IE.
Mas, como você citou no post, será mais prático daqui uns 20 anos (e não 5, rs…) deletar algumas declarações em uma folha de estilo específica para o IE.
Excelente artigo mano!!!!
Mas e os velhos hacks com underline antes (_top) como ficará? Sabe dizer?
Muito massa esse esquema do IEBlog… aproxima mais… e qm sabe um dia o Ie será considerado um brownser hehehehe….
É ajuda muito esse seu artigo!
mas que coisa não, porque sempre o IE tem que ser tratado de maneira diferente, oh céus porque tanta divergencia entre renderização e porque todos não adotam de mãos dadas os padrões.
o velhos hacks de {underline} ex: _body { margin:0; }
não sei não, mas acredito que funcionem, em breve testo no IE7 e informo o resultado pra galera!
muito bom!
agora sim, vai começar a limpeza nas folhas de css
abraço
É, concordo com o post do Thiago Machado, tudo pro IE (e coisas do seu fabricante) tem que ser diferente, tem que ter um cuidado especial. Sei la, as vezes penso em algo meio radical, mas só funcionaria (talvez) como desenvolvedor. Algo do tipo boicote. Parece meio utópico, meio complicado, mas as vezes da vontade de tentar algo pelo menos parecido com isso. Seria interessante divulgar alguns pontos disso, para usuários básicos, ou pelo menos tentar (não tive muito sucesso tentando explicar este assunto para o meu irmão por exemplo. Ele disse: Firefox e IE fazem a mesma coisa, são idênticos). Minhas palavras estão confusas hoje, mas espero ter acrescentado algo na discussão.
Abraços!
Legal amigo, obrigado pelos toques!!!
Pingback: Falso hover no Internet Explorer » Revolução Etc
Muito bom o post, bem explicado, sem atropelo, excelente!
Pingback: Blog do Jader » Blog Archive » 10 dicas para evitar dores de cabeça
Bom ja tava seguindo as recomentações do ieblog e criei um css somente para o ie6
hj baixei o ie7beta3 e para minha supresa, site perfect XD, sem nenhum problem.
flws
Excelente post. Pena que ainda tenhamos que criar CSS específicos para os programinhas do Bill.
Pingback: Xmedia Webfactory » Arquivo do Blog » Hacks consertados no IE7 e Conditional Comments
Pingback: O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP » Revolução Etc - Web Standards em uma casca de noz!
E se eu quiser fazer para IE 6 E versões anteriores?
Pingback: Qual o seu fluxo de trabalho para testar seu CSS? » Revolução Etc - Web Standards em uma casca de noz!
Muito bom artigo!
Obrigada Henrique!
Pingback: Rafael Oliveira | Blog » Como você testa seu CSS?
Muito bom esse post.
Já tinha lido, mas, como precisei passar "ele" para meu amigo, resolvi passar aqui para dar um "alô".
Uma grande vantagem que eu encontrei também no conditional coments e que o pessoal não dá muito "comentário" é a validação.
As folhas de estilos do FF (a que NAO ficará nos comentários) poderão ser válidas e bem formadas, porém, o câncer continuará apenas nas folhas de estilo par ao IE (as que ficarão nos comentários). Isso nos gera uma possibilidade futura de "curar" os estilos sem ter que mutilar o site como um todo.
Abração pra geral!
Feliz 2007
Olá, é a primeira vez que escrevo, mas há muito sou leitor assíduo.
Parabéns pelo blog.
Bom, dessa vez foi preciso escrever, a matéria não foi suficiente, embora esclarecedora em muitos pontos, claro.
O ponto é o seguinte: estou tentando declarar o conditional comment para IE 5.5 e anterior e outro para versão 6.
Estou fazendo assim:
O IE 6 reconhece, já o outro, nada.
Alguém pode me ajudar?
Agradeço!
Opa, o exemplo não saiu…
Pingback: tiagosouza.com » 10 dicas para evitar dores de cabeça
Sim usei condicional coments para tratar diferenças entre mozila e ie6, mas no ie7 meu css ta todo torto, existe conditional coments para ie7?
Pingback: Kynho Blog – Programação, Design, Web e afins. » Blog Archive » Conditional comments para o IE8
It is very helpful!
Woh Adoro seus posts, salvo em meus favoritos ! .