Comentários Condicionais

[inforsis 1]

Desde o lançamento do IE7, vêm sendo aconselhado aos desenvolvedores utilizarem Comentários Condicionais ao invés dos velhos e bons "quebra galhos" hacks para IE. Pois bem irei descrever e detalhar o uso dessa técnica.

 

O que é?

Comentários Condicionais ou Conditional Comments CC - São comentário que inseridos no código (X)HTML apenas serão reconhecidos pelo IE rodados em ambientes windows, passando assim instruções para o navegador. Enquanto os outros browsers interpretaram apenas como comentário normal.

 

Porquê apenas o IE interpreta os CC?

Pois trata-se de um código proprietário da Microsoft, permitindo por exemplo a escolha da versão do browser que necessita de ajustes.

 

Os comentários condicionais são hacks CSS?

Os comentários condicionais não fazem uso de um bug do navegador para corrigir outro bug, como são os casos dos hacks css. Porém os CC tem a finalidade de fornecer informações especiais a um determinado navegador, assim como os hacks. Então essa é uma pergunta que fica a depender do ponto de vista de cada desenvolvedor.

 

Como Funciona?

Normalmente para tratar problemas de CSS com as versões do IE a solução mais comum sempre foi o uso dos hacks. Porém com o Comentários Condicionais, ao invés de tratar as diferenças dentro de uma unica folha de estilo, é feito o tratamento em folhas de estilos separadas. Depois basta declarar esta outra folha de estilo abaixo da sua folha de estilo principal.

 

Tipos de Comentários Condicionais

<!--[if IE]><![endif]--> Se a versão do navegador for IE.

<!--[if gt IE 5]><![endif]--> Se a versão do navegador for superior ao IE5.

<!--[if gte IE 5]><![endif]--> Se a versão do navegador for igual ao IE5 ou superior.

<!--[if lt IE 5.5]><![endif]--> Se a versão do navegador for igual ou superior ao IE5.5.

<!--[if lte IE 6]><![endif]--> Se a versão do navegador for igual ou inferior ao IE6.

 

glosário

gt - maior que o browser setado (greater than)

gte - maior ou igual ao browser setado (greater than or equal to)

It - menor que o browser setado (less than)

Ite - menor ou igual ao browser setado (less than or equal to)

 

Implementação

Basta inserir o comentário antes da tah </head> e logo abaixo da declaração da folha de estilo principal quando houver.

 

exemplo

[url="http-~~-//december.com/html/4/element/link.html"]<link[/url] href="estilo.css" type="text/css" rel="stylesheet" /> [b]<!--folha de estilo principal-->[/b]
<!--[if lte IE 6]>
[url="http-~~-//december.com/html/4/element/link.html"]<link[/url] href="estilo2.css" type="text/css" rel="stylesheet" /><![endif]-->  [b]<!--folha de estilo para o IE6 e anteriores-->

 

exemplo on line

 

Considerações Finais

É sempre importante usar o minimo possivel de Comentários Condicionais ou até mesmo hacks. Sempre antes de usar busque uma saída usando apenas o CSS. Lembre-se sempre que erros são normais, saber a melhor solução para esses erros faz a diferença.

 

Fontes

 

Google

[Nícolas 4]

Muito show isso...

 

Sem dúvidas útil pra muita gente =)

 

10 http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif