CSS Hacks ou comentários condicionais?

Meu xará Diego Eis escreveu um interessante artigo já há alguns meses em seu famoso blog do site Tableless, o qual recomendava o não uso de comentários condicionais e defendia o uso de CSS Hacks.

O argumento central do texto é que o uso de comentários condicionais duplicam o trabalho do desenvolvedor, pois é criado um arquivo CSS para os navegadores mais compatíveis com as especificações da W3C e outro(s) para os navegadores Internet Explorer. Dada a opção de usar dois arquivos, a tendência é criar uma folha de estilos muito diferente ou até mesmo independente para o navegador da Microsoft.

Mas ao dar uma passada de olho nas estatísticas de uso de navegadores deste mês notamos que cerca de 98% dos usuário utilizam Internet Explorer 6, Internet Explorer 7, Firefox, Opera ou Safari. Menos de 1% utilizam o Internet Explorer 5, conhecido pelo sua implementação problemática do CSS Box Model. Isto significa que se usarmos o Doctype Switch para deixar o IE6 em Strict Mode, atenderemos mais de 98% dos visitantes sem nos valermos do famigerado Box Model Hack! Sendo assim, não precisamos mais definir a altura/largura de cada elemento duas vezes, enxugando de forma decisiva o arquivo CSS exclusivo para os IEs.

Podemos em alguns casos eliminar completamente esse arquivo e ao mesmo tempo não usar nenhum hack, nivelando por baixo os recursos usados e tolerando algumas pequenas diferenças de renderização. Esse é melhor dos mundos, mas em layouts mais rígidos ou complexos e no uso de algumas técnicas mais sofisticadas isso infelizmente não é uma opção, e voltamos a ter que decidir entre hacks e comentários condicionais. Levando em conta o que já foi dito, faço uma avaliação dos prós e contras de cada solução:

Comentarios condicionais:

• Prós:
  • Mantém o CSS original inalterado e válido.
  • Permite servir CSS customizado ou proprietário de forma segura e suportada pela Microsoft.
  • Pode-se criar um arquivo diferente para cada versão do IE.
  • Feitos para serem usados!
• Contras:
  • Arquivo separado pode ser difícil de manter.
    • Não é trivial notar onde existe ou não uma correção para o IE ao ler o arquivo original.
    • Por vezes também não é imediata a compreensão do funcionamento da correção no arquivo customizado sem ler a definição no arquivo original.
  • Uma requisição HTTP a mais.
  • Adições no HTML que apesar de comentadas são grandes.
  • Horrível de implementar em definições do atributo style da tag.

CSS Hacks:

• Prós:
  • Tudo no mesmo arquivo, é fácil ver onde as correções acontecem e ao que se aplicam.
  • Mais compacto, pode ser aplicado facilmente no atributo style.
  • Pode ser usado em definições do atributo style do javascript.
  • Em alguns casos são necessários para outros navegadores que não o Internet Explorer.
• Contras:
  • Alterações no CSS original, possivelmente comprometendo a validação.
  • Método não suportado, pode criar problemas a cada atualização que a Microsoft liberar.
  • Hacks diferenciais (que afetam apenas uma versão) são deselegantes e deus sabe quanto deselegantes eles podem se tornar nas próximas versões do IE, ou mesmo se alguém será capaz de desenvolvê-los.
  • Baseados em bugs!

Atentando para cada um destes detalhes, faço minhas recomendações. Seguem passo a passo:

1. Use o Doctype Switch para ativar o Strict Mode no IE6.
2. Ignore o IE5 e anteriores.
3. Procure diminuir ao máximo as diferenças entre as definições CSS dos navegadores. Tente eliminá-las completamente, utilizando um CSS Reset e simplificando o layout de forma que as pequenas diferenças de renderização não atrapalhem muito. Isso é fácil de fazer para o IE7, mas pode ser bastante difícil para o IE6, então não complique muito seu código para atingir esse objetivo e considere o próximo passo.
4. Caso sobrem diferenças, separe-as em outro arquivo (use um nome sugestivo, ‘iefix.css’) utilizando os comentários condicionais. Não crie mais de um arquivo, trabalhe bastante no passo anterior para não precisar de um específico para o IE7.
5. Utilize comentários no CSS original para indicar onde existem correções no arquivo ‘iefix.css’.
6. Não utilize o atributo style. Se precisar alterar o estilo por javascript, utilize classes.
7. Se notar que seu ‘iefix.css’ estiver crescendo muito, considere voltar ao passo 3. Se não houver mais onde enxugar e o tamanho do arquivo ainda for um problema, considere utilizar os Hacks, mas não utilize uma técnica híbrida: utilize CSS Hacks ou comentários condicionais – misturar os dois é a receita certa para dores de cabeça.

Espero ter ajudado (a colocar mais lenha na fogueira desta disussão)!

Tags: css, ie