:: Comentários condicionais ::

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

Explorer 5+ Windows somente.

Se você tem instalada em seu computador múltiplas versões do Internet Explorer os comentários condicionais "enxergarão" cada uma das versões instaladas como sendo a mais alta (usualmente IE6).

Eu ouvi dizer, mas não testei, que o uso de ponto decimal em comentários condicionais causa comportamento incorreto do navegador quando você tem instalado em seu computador uma única versão IE 5.0.

Comentários condicionais funcionam somente no Internet Explorer para Windows, e se constituem em um excelente meio para passar instruções exclusivamente para o navegador Explorer rodando em ambiente Windows. Tais comentários são suportados pelas versões 5 e mais recentes e é possível inclusive servir os comentários de modo a que eles façam distinção entre as versões 5.0, 5.5 e 6.0.

~~Eu uso comentários condicionais no frame superior do meu site. Se você abrir o código fonte você verá isto.~~

NT: O autor se refere ao código fonte do frame superior do seu site que pode ser visto neste link e cujo comentário condicional encontra-se transcrito a seguir:


<!--[if IE]>
<style>
div.logo {
	margin-left: 10px;
}
</style>
<![endif]-->

Em situação normal a div.logo tem uma margem esquerda de 22px. Contudo o Explorer Windows apresenta um comportamento incorreto com relação as margens para elementos flutuado: ele dobra as margens. Assim, eu diria ao Explorer Windows para usar uma margem de 10px. Um comentário condicional diz isto.

~~Este exemplo sintetiza como usar e como não usar comentários condicionais.~~

Observe o exemplo a seguir:


<!--[if IE 6]>
Código para o IE6 entra aqui
<![endif]-->

A estrutura básica é a mesma dos comentários HTML
(). Assim, todos os demais navegadores interpretarão como um comentário normal e serão ignorados.
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.
Uma vez que comentário condicional se utiliza da estrutura do comentário HTML somente poderá ser incluido em arquivos HTML e não em arquivos CSS.
Minha preferência era por colocar as estilizações especiais no arquivo logo.css, que contém todos os demais estilos para o frame superior. Infelizmente isto mostrou-se ser impossível. Eu poderia também ter colocado uma nova tag <link> no comentário condicional apontando para uma folha de estilos extra, contudo como eu tinha necessidade de apenas uma regra de estilo extra isto somente complicaria. Contudo se você precisa de muitas regras de estilos para o Explorer Windows, a tag <link> extra é provavelmente a melhor solução.

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 (matéria em inglês) instalados no seu computador os comentários condicionais serão renderizados em todas as versões do Explorer como se fosse a mais alta versão instalada na sua máquina (usualmente Explorer 6.0).

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 e 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<br>
<![endif]-->
<!--[if IE 5]>
De acordo com o comentário condicional este é o Explorer 5<br>
<![endif]-->
<!--[if IE 5.0]>
De acordo com o comentário condicional este é o Internet Explorer 5.0<br>
<![endif]-->
<!--[if IE 5.5]>
De acordo com o comentário condicional este é o Internet Explorer 5.5<br>
<![endif]-->
<!--[if IE 6]>
De acordo com o comentário condicional este é o Internet Explorer 6<br>
<![endif]-->
<!--[if gte IE 5]>
De acordo com o comentário condicional este é o Internet Explorer 5 ou maior<br>
<![endif]-->
<!--[if lt IE 6]>
De acordo com o comentário condicional este é o Internet Explorer 
versão menor que 6<br>
<![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<br>
<![endif]-->

Observe as sintaxes :

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>

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.