Posts Tagged ‘ie’

CSS Hacks ou comentários condicionais?

29 \29UTC junho, 2008

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)!

Anúncios