Voltar para o site

Comentários condicionais

Publicado em: 14/10/2005
Atualizado em: 13/03/2011

Autor: ppk
URL do original: https://www.quirksmode.org/css/condcom.html
Título original: Conditional comments
Traduzido com autorização do autor

Comentários condicionais funcionam somente para o navegador Internet Explorer em Windows e assim, se constituem em um excelente meio de definir instruções válidas somente para o navegador Internet Explorer em Windows. Comentários condicionais são suportados pelo IE5 e posteriores e é possivel inclusive distinguir-se entre as versões 5.0, 5.5 e 6.0.

A sintaxe geral para servir comentários condicionais é mostrada a seguir.

<!--[if IE 6]>
	Instruções somente para o IE6 entram aqui
<![endif]-->
  1. A estrutura básica é a mesma dos comentários HTML
    (<!-- -->). Assim, todos os demais navegadores interpretarão como um comentário normal e ignorarão as instruções nele contidas.
  2. O Explorer Windows, foi projetado para reconhecer a sintaxe especial <!--[if IE]>. Ele processa o if e interpreta o conteúdo do comentário condicional como se fosse um conteúdo normal da página.
  3. Uma vez que comentário condicional se utiliza da estrutura de comentário para a linguagem HTML somente poderá ser incluido em arquivos HTML e não em arquivos CSS.
    Minha preferência era por colocar os comentários condicionais no próprio arquivo CSS, porém isso não funciona. Você pode colocar uma nova tag <link> no comentário condicional apontando para uma folha de estilos extra.

Exemplo

Abaixo eu forneço uma série de comentários condicionais que renderizam mensagens que identificam a versão do Explorer.

Notar contudo, que se você utiliza múltiplos Explorers instalados no seu computador os comentários condicionais serão renderizados como se fosse a mais alta versão instalada na sua máquina.

Teste

A seguir alguns comentários condicionais para você testar a versão do Internet Explorer que está usando. Se você não visualizar a mensagem é porque o navegador não é o Internet Explorer.

Código

A seguir a sintaxe que eu usei:

<!--[if IE]>
	De acordo com o comentário condicional este é o Internet Explorer
<![endif]-->

<!--[if IE 5]>
	De acordo com o comentário condicional este é o Explorer 5
<![endif]-->

<!--[if IE 5.0]>
	De acordo com o comentário condicional este é o Internet Explorer 5.0
<![endif]-->

<!--[if IE 5.5]>
	De acordo com o comentário condicional este é o Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
	De acordo com o comentário condicional este é o Internet Explorer 6
<![endif]-->

<!--[if gte IE 5]>
	De acordo com o comentário condicional este é o Internet Explorer 5 ou maior
<![endif]-->

<!--[if lt IE 6]>
	De acordo com o comentário condicional este é o Internet Explorer 
	versão menor que 6
<![endif]-->

<!--[if lte IE 5.5]>
	De acordo com o comentário condicional este é o Internet Explorer 
	versão menor ou igual a 5.5;
<![endif]-->

Observe as sintaxes especiais:

  • gt: maior que
  • lte: menor ou igual a

hack CSS ?

Os comentários condicionais são hacks CSS? Estritamente falando sim, uma vez que a finalidade deles é a de fornecer instruções especiais de estilização a determinados navegadores. Contudo eles não se valem de um bug do navegador para resolver outro bug como acontece com todos os verdadeiros hacks CSS. Além disto eles podem ser usados para outras finalidades além de hacks CSS (embora isto raramente aconteça).

Uma vez que comentários condicionais não se baseiam em um hack do navegador, mas sim em uma funcionalidade deliberada, eu acredito que são seguros para se usar. Certamente, outros navegadores podem implementar comentários condicionais (embora nenhum deles o tenha feito ainda), mas é improvável que reajam ao <!--[if IE]>.

Eu uso alguns poucos comentários condicionais. Primeiro eu procuro uma solução puramente CSS para um problema no Explorer Windows. Se não encontro a solução, eu não hesito em usar um comentário condicional.

tag de comentário

Um leitor me informou que o Explorer (versão para Windows e para Mac) suporta a tag (não standard) <comment>.

<p>Este navegador <comment>não</comment> é o  Internet Explorer.</p>

Este navegador não é o Internet Explorer.

NT: A tag <comment></comment> não valida no W3C, por tratar-se de uma tag proprietária. O código acima renderizado no Explorer resulta em:
"Este navegador é o Internet Explorer"
e renderizado em não Explorer resulta em:
"Este navegador não é o Internet Explorer"

Esta tag será muito apropriada se você pretende fazer uso de tags ou estilizações para navegadores diferentes do Explorer. Lamentavelmente situações como estas são muito incomuns uma vez que ambos os navegadores Explorer Windows e Explorer Mac suportam esta tag e usualmente o que acontece é você querer servir um conteúdo especial para somente um deles.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo