Leandro Medeiros

Posts Tagged ‘Hacks’

Sobre CSS Hacks

In Internet on dezembro 27, 2007 at 3:50 pm

Durante o desenvolvimento do último site, tive a ingrata (mas não incomum) surpresa de ver o mesmo site com visual diferente em cada navegador. Os que desenvolvem a mais tempo, sabem que, mesmo com o CSS certinho, da pra notar grandes diferenças entre um navegador e outro. Como levo em consideração que os navegadores mais usados são o Firefox 2 e o IE 6 e IE7, tenho que fazer o site ficar certinho e bonitão nos três. Algumas vezes, lancei mão dos dos hacks pra o IE6 e agora com o IE7, não seria diferente. Mas eu não queria mais deixar o CSS “sujo”. Me importo (e sei que isso ainda traz muita discursão) com a validação do CSS e a padronização e evitar gambiarras pra um ou outro navegador. Achei algumas soluções interessantes, como a de um brasileiro que desenvolveu uma solução em javascript que tem a função de identificar o navegador e utlizar um CSS diferente pra cada. Apesar de interessante a ideia, eu ainda achei que no meu caso não precisava de tanto, já que o problema era só com o IE7. Continuei procurando e me deparei com uma solução no site da própria Microsoft: Conditional Comments.

Bom, isso eu já conhecia de antes, por outros problemas como o conhecido caso do PNG no IE6. Entretanto, não sabia que essa era uma solução apontada pela própria empresa para casos em que o conteúdo do site tivesse apresentações diferentes para um determinado navegador. Claro que no site, a condição é que o conteúdo esteja sendo apresentado com recursos para diferentes IE’s, mas todos nós sabemos que a necessidade não é sempre essa. E aí é que os “Comentários Condicionais” entram em ação.

Andei lendo a respeito do uso desse tipo de solução e realmente acredito ser a melhor maneira de se solucionar esse tipo de problema, apesar de um renomado blog brasileiro que trata de padrões web publicar um artigo recomendando a não utilização dessa solução pelos desenvolvedores. Pelo menos ate agora, além de mim, vários outros desenvolvedores discordaram do artigo.

A solução é muito simples. É um comentário colocado dentro do código HTML do site, que tem a função de impor uma condição: toda vez que o site for acessado pelo navegador citado, ele utilizará um arquivo adicional, além do CSS que já está sendo usado no site. Ou seja, desta forma você pode usar um arquivo CSS apenas com as correções necessárias para os outros navegadores em que o site aparecer estranho. Veja o exemplo abaixo:

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

O outro passo é criar um arquivo e dar o nome de “ie.css”, escrevendo somente as correções necessárias para o navegador. Essa solução, inclusive, facilita as correções e atualizações e modificações mais tarde, já que apenas o que está errado precisa ser adicionado a este arquivo.

Quero lembrar que isso ainda é uma solução ideal pra se usar somente depois de tentar todas as soluções no CSS, pra nao ter que usar um hack que vai sujar seu código.

A esperança é que o próximo IE venha com um suporte melhor para os padrões conhecidos pra que a gente nao tenha que se preocupar com isso mais.

Anúncios