Trabalhando com Comentários Condicionais

13 de março de 2007 Padrões Web

Todos que desenvolvem seguindo os padrões do W3C já estão cansados de ver seus trabalhos ficarem ótimos no Firefox, no Opera e outros navegadores com boa adoção dos padrões. Mas quando chega a hora de testar no Internet Explorer quase sempre surgem problemas para resolvermos.

Partindo do ponto que você implementou o design de seu site por CSS as correções para o IE devem ir também na folha de estilos, então você apela para o uso de hacks que impedem seu código de validar e comprometem seu layout em versões futuras do Internet Explorer. E agora?

Agora você pode esquecer aquele monte de hacks e passar a usar comentários condicionais. Eis um artigo em português bem completo falando deles.

O que quero ensinar é a criar uma folha de estilos exclusiva para o Internet Explorer (por exemplo: ie.css) e incluí-la através dos maravilhosos comentários condicionais da seguinte forma:

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

Lá você poderá realizar todos os ajustes necessários apenas para o IE sem prejudicar a aparência em outros navegadores e muito menos arruinar a validação de seu código.

Mas ainda há um problema, o Internet Explorer 7 já interpreta corretamente alguns valores mas não o suficiente para não precisar de correções. A solução: como seu ie.css não é examinado pelo validador, você pode usar hacks como colocar _ (underline) antes de cada atributo, exemplo:

margin:10px;
_margin:20px;

Nesse caso o Internet Explorer 7 lê o primeiro atributo e ignora o segundo, e as versões anteriores interpretam os dois, mas aplicam o segundo pois sobrepõem o primeiro. Eu gosto de trabalhar assim, sem misturar as gambiarras de compatibilidade com meu CSS principal.

Vale lembrar que novas versões do Internet Explorer tendem a atender melhor os padrões, então utilize os comentários condicionais e hacks com cautela para que isso não venha a quebrar seu layout em versões futuras.