Trabalhando com Comentários Condicionais

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.

6 ideias sobre “Trabalhando com Comentários Condicionais

  1. Eu costumo fazer um arquivo especial (estiloIE7.css) somente para o IE 7…e para arrumar no IE6 uso o hack = * html .class … ->
    fica bom também, prq o IE7 interpreta os hacks para o firefox, então prefiro fazer desta maneira.

    att.
    Linke

  2. São maneiras diferentes de se trabalhar… O importante é que o resultado é o mesmo. Mas eu gosto da idéia de fazer uma folha de estilo “suja” para um browser “sujo”.

  3. Pingback: Portfolio reformulado - Emanuel Felipe .NET

  4. Pingback: Mais sobre como livrar-se do Internet Explorer, agora em PHP - Emanuel Felipe .NET

  5. Pingback: Comentários condicionais « Miltonweb’s Weblog

  6. Pingback: Você tem CSS pra quê? » Blog Archive » Comentários Condicionais – (sem dores de cabeça)

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>