Deixem de usar CSS Hacks!

Sexta-feira, 14 de Outubro de 2005

Deixem de usar CSS Hacks” foi este o pedido da equipa que está a desenvolver o novo Internet Explorer 7.

Os “hacks” são formas de contornar os problemas de renderização de CSS existentes nas versões 5, 5.5 e 6 do Internet Explorer. Normalmente quando se programa um website usando os webstandards é preciso fazer pequenos ajustes para que o resultado final seja igual em todos os browsers. Uma vez que as versões mencionadas do Internet Explorer não suportam muito bem estes webstandards, por vezes é preciso refazer algumas partes do código usando “hacks” ou outros ajustes (“workarounds”).

Um “hack” é uma forma de enganar um browser, enquanto que um “workaround” é uma forma de enganar erros de renderização minimizando os browsers afectados.

A equipa que está a desenvolver o IE 7 pediu aos webdesigners para deixarem de usar determinados “hacks” porque, segundo eles, o novo browser já terá grande parte dos bugs resolvidos e a inclusão de “hacks” irá fazer com que a renderização das páginas seja feita incorrectamente.

Estes são os “hacks” CSS que devem ser deixados de usar:

Durante os meus últimos projectos que envolveram webdesign (incluindo a remodelação do meu site) tentei ao máximo não usar Hacks. Em vez disso, há outras formas de dar a volta aos bugs do IE. Segundo esta técnica, o desenvolvimento do código CSS pode ser feito da seguinte forma:

  1. Se conhecemos que existe um bug, podemos tentar prevenir que ele aconteça;
  2. Se não for possível preveni-lo, podemos fazer ajustes (workarounds) ao código para evitar que ele apareça;
  3. Se já tentámos as soluções anteriores sem sucesso, então temos mesmo que usar um “hack”.

Normalmente é isto que faço sempre que desenvolvo algo em CSS. Evitar ao máximo ter de usar “hacks” porque mais cedo ou mais tarde vão aparecer novos browsers com melhor renderização de CSS, e se um website funciona bem em todos os browsers actuais sem “hacks”, de certeza que também funcionará bem em todos os browsers futuros.

Mais cedo ou mais tarde iria acontecer isto que está a acontecer neste momento. O aparecimento de um novo IE vai fazer com que todos os “hacks” baseados neste browser quebrem as páginas que sejam visualizadas com esta nova versão. O problema é ainda mais grave, quanto tempo demorará para que os utilizadores dos IE5, IE5.5 e IE6 passem a usar o IE7? Ainda hoje há pessoas que usam o IE5, quando o IE6 já foi lançado há mais de 4 anos! Desta forma, terá que se pensar sempre nestas versões dos IE sempre que se for desenvolver um novo projecto.

Por isso, o apelo para deixar de usar “hacks” não deve ser feito apenas por causa do novo IE7, mas sim a favor do design para todos, ou seja, um único layout funciona em todos os browsers sem a necessidade de recorrer a “hacks”.

24 Comentários

Escreva o seu comentário!
  1. Gravatar

    Dehumanizer

    14 de Outubro de 2005, 10:56

    O problema é que quem deixar de usar hacks tem o seu site, automaticamente, a não funcionar bem para 80% do mundo.

    Num site pessoal, pode-se fazer tal coisa por uma questão de princípio, mas num site comercial, é complicado.

    Quando o IE7 sair, talvez…

  2. Gravatar

    Ivo Gomes

    14 de Outubro de 2005, 11:52

    Podes não usar hacks e passar a usar workarounds. Foi isso que fiz para este site. Infelizmente tive que usar 2 hacks porque não consegui dar a volta a essa parte do código, um deles no menu principal e outro na colocação dos resultados da pesquisa LiveSearch.

    Num site comercial ainda é mais importante usar o menor número de hacks possível porque dessa forma ele não irá estar preparado para o futuro quando começarem a aparecer as novas versões do IE.

  3. Gravatar

    Dehumanizer

    14 de Outubro de 2005, 12:33

    A questão, também, é que é muito mais fácil dizer às pessoas “actualizem o browser” do que “mudem de browser”.

  4. Gravatar

    Ivo Gomes

    14 de Outubro de 2005, 13:29

    Às vezes os utilizadores não podem fazer isso porque não têm conhecimentos técnicos suficientes para actualizar o browser ou porque não têm as permissões para o fazer.

    Mesmo em grandes empresas em que facilmente se podia dizer ao Dep. informático para actualizar o browser, por vezes não o fazem. Já estive em empresas bastante grandes que ainda usam o IE5 ou o IE5.5.

    Como tal não te podes simplesmente dizer ao utilizador para se actualizar. O site é que tem que estar preparado para funcionar em qualquer plataforma. Não se deve adaptar o Homem ao sistema, mas sim o sistema ao Homem.

  5. Gravatar

    Rui Moura

    15 de Outubro de 2005, 22:12

    Quando o IE7 for lançado, o que não vai acontecer tão cedo, terá lógica deixar de usar os “Hacks”, isto se o IE7 se portar bem.
    Só não percebi porque è que eles pediram para deixar de usar os hacks agora … Passou-me ao lado :|
    E já agora è de referir que no blog tenho mais hacks para o Opera do que para o IE, portanto não è só descarregar no IE

  6. Gravatar

    Margarida

    16 de Outubro de 2005, 08:23

    Bem que eu até de vez em quando uso/usava o primeiro e/ou segundo desses hacks mencionados, mas vá lá que saia o IE 7, porque o que me partia mesmo a cabeça nos layouts era quando não funcionava no IE e no resto já estava resolvido.
    Também tento evitar ao máximo hacks e às vezes até deixo andar com o que o pessoal vê no IE, pois não costuma ser nada por aí além, mas não sei se é por vir o IE 7 que a malta vai toda a correr atrás desse browser, ainda existem os outros: firefox, opera, etc. Mas penso que sim, que façam bem e “stardadizem” o IE :P
    Bom post :) não conhecia o teu blog, mas vou passar a visitá-lo. Fica bem ^_^

  7. Gravatar

    d3x7r0

    16 de Outubro de 2005, 22:12

    Se o IE não sabe colocar as imagens de acordo com a especificação CSS e não suporta transparencias em PNG (apesar de outras aplicações Microsoft como o Office 2003 já o fazerem) é natural que eu me veja forçado a usar hacks…

    E já agora creio que não é propriamente um hack o facto do IE não compreender um codigo só pelo facto de eu ter removido os espaços do meio, teoricamente ele reconheçeria á mesma (HTML>body)…

    Btw bom blog e um layout espetacular, os meus parabéns :)

  8. Gravatar

    Ivo Gomes

    17 de Outubro de 2005, 08:17

    Margarida: Mesmo quando chegar o IE vamos ter que continuar a desenvolver websites tendo em conta os mesmos bugs do IE5 e IE6 porque há pessoas que não os vão actualizar para o IE7. Obrigado pela tua visita, também gostei bastante do teu blog e dos layouts que criaste!

    Rui: Os hacks existentes para o Opera que eu conheço são aplicados por causa dos hacks para o IE… Por exemplo, o box model hack é um hack para o IE, mas no final tens que incluir um hack para o Opera porque apesar do Opera não ter nenhum bug aqui, ele interpreta os hacks do IE e como tal precisamos de um segundo hack para que ele “desinterprete”… não sei se alguém percebeu esta frase :)

    d3x7ro: Não és “forçado” a usar hacks, podes procurar outras alternativas (que as há). Normalmente os hacks só devem ser usados como último recurso. Todo o código não CSS é considerado um hack, portanto, o “HTML>body” é um hack. Os hacks são técnicas de enganar os browsers e essa é uma delas. Provavelmente não teremos que nos preocupar com isto até que saia o IE7, mas nessa altura vai ser bastante mais dificil programar os CSS porque além dos bugs dos IE antigos, ainda teremos que contar com a correcção desses bugs no IE7 e concerteza com alguns novos bugs (espero que não)

  9. Gravatar

    Rui Moura

    17 de Outubro de 2005, 10:57

    Percebi perfeitamente ;) . Obrigado pelo esclarecimento. Estamos sempre a aprender :D

  10. Gravatar

    Romeu Ribeiro

    25 de Janeiro de 2006, 21:44

    Já agora, se o IE7 não vai conter o mesmo erros que o seu anterior irmão, nesse caso todos os sites que tenhamos criado até hoje com hack deverão apareçer tal como apareçem hoje?? o meu raciocinio é o seguinte:

    o firefox apesar de também não ser perfeito é o melhor que se pode encontrar por ai, e ao conceber hack’s para o IE normal o faço sempre com o HTML > body… de forma a que o IE não o interprete mas isso depois de colocar uma linha de codigo normal que funciona no IE, pois o firefox vai ignorar a primeira, assim sendo o comportamento do IE7 não devia ser semelhante? e fazer o render como faz actualemente o firefox?

    talvez não esteja muito claro este post’s mas o tempo já aperta e eu queria mesmo colocar esta questão.

    Mais uma vez obrigado Ivo Gomes

  11. Gravatar

    Bruno

    27 de Janeiro de 2006, 16:17

    Legal! Gostaria de fazer um pedido também; Parem de utilizar Internet Explorer!

    Porque mesmo que o IE7 resolva todos os problemas, nem todos os usuários irão atualizar suas versões e continuaremos com problemas de versões e os hacks continuam a ser uma solução.

  12. Gravatar

    TALLITA CORDEIRO ARAUJO

    6 de Junho de 2006, 17:03

    REALMENTE QUAL A DEFINIÇÃO DE HACKS?

  13. Gravatar

    MIguel

    21 de Agosto de 2006, 00:09

    Usem o Mozilla ou o Opera, pelo menos esses respeitam os standards. E o IE tem demasiadas falhas de segurança.

  14. Gravatar

    fernando

    15 de Dezembro de 2006, 18:18

    eu quero ser hacker

  15. Gravatar

    william

    18 de Fevereiro de 2007, 15:10

    existe um escaner que não da comflito com windows xp editom
    como resouvo este problema

  16. Gravatar

    helder

    4 de Maio de 2007, 15:33

    Pois, é mto bonito tentar, mas não me parece contornável. Queremos fazer algo mais específico e um dos 3 browsers actualmente mais representativos (IE6, 7 e ff) manda-nos dar uma grande curva.

    Exemplo: um cliente pediu-me para pôr uma marca por cima do conteúdo todo na impressão, que se sobreponha ao texto e imagens impressas. O firefox não faz transparencia ao gif. O IE6 só faz ao gif. E agora?

  17. Gravatar

    Ivo Gomes

    4 de Maio de 2007, 15:38

    Um GIF transparente funciona em qualquer browser. O problema pode estar no código que está a usar. Basicamente basta meter a imagem com “positioning: absolute” centrada na página e com um “z-index” superior aos restantes conteúdos para ficar sempre por cima.

  18. Gravatar

    Igor

    28 de Novembro de 2007, 20:41

    * ainda funciona!

  19. Gravatar

    Thalis Valle

    19 de Fevereiro de 2008, 15:17

    hoje está sendo impossícel usar hacks. Eu particularmente desenvolvo em front-end na plataforma Windows com os navegadores IE6/ IE7 / Firefox 2.x / Opera 9.x

    É impossível não precisar usar hacl, pois cada um renderiza de um jeito, mesmo em layouts mais simples.

    Nós sofremos!

  20. Gravatar

    Filipe Abreu

    7 de Agosto de 2008, 14:10

    Eu tenho um cpomputador antigo rodando win98. Só posso usar até o IE 6 nele, pois o IE 7 requer ao mínimo o XP. Também é fato que ainda existe gente que tem win98… bom tem mta gente q tem mta coisa ainda… Usar hack é uma forma de dar um jeitinho… se bem q não tem outro mesmo, a não ser limitar o layout a um formato que não se altere em borwsers diferentes. Vejo diferenças até entre FF de PC e de Mac. Safari e Opera também conseguem serem chatinhos. Uso o meu FF como base, e depois vou hackeando.

  21. Gravatar

    Leo Cabral

    15 de Setembro de 2008, 00:27

    Confesso que não desenvolvo utilizando hacks (exceto em fragmentos de terceiros, como widgets).

    A idéia de programar errado para que apareça corretamente é algo que vai contra qualquer convicção profissional. E me assombra que a Microsoft hoje (estamos em 2008, mas esste artigo ainda é muito atual dado o número de browsers) force a esse hábito contraproducente com o IE6, que ainda persiste.

  22. Gravatar

    Pablo Alves Lima

    6 de Julho de 2009, 15:31

    Gostaria de uma indicação de livros ou curso para me atualizar nessa questão de CSS com ou sem hacks.
    Obrigado.

Blogs que "linkam" para aqui (Trackbacks e Pingbacks )

  1. Rodrigo Muniz | 14 de Outubro de 2005, 19:29
  2. Rodrigo Muniz » CSS Hacks e IE 7 | 11 de Novembro de 2005, 17:57

Comente!

Preencha o seu nome para assinar o comentário. O preenchimento deste campo é obrigatório.

Os comentários são as suas ideias ou opiniões em relação ao artigo que acabou de ler. Assine o seu comentário para dar a conhecer o seu ponto de vista. 
O seu endereço de e-mail não será publicado. O preenchimento deste campo é obrigatório.

Este site suporta a utilização de gravatars. Caso o seu endereço de e-mail esteja registado em gravatar.com, irá aparecer a sua imagem ao lado do comentário. 
Se tiver um website, este é um bom local para o publicitar.

Sempre que alguém ler o seu comentário, irá ver um link para o seu site. Se o seu comentário for relevante para os outros utilizadores, com certeza eles quererão saber mais sobre si e visitarão o seu site. 
Este formulário permite o uso de algumas tags em XHTML. As tags permitidas são as seguintes:

<a href="" title="">
<abbr title="">
<acronym title="">
<b> <blockquote cite="">
<code> <em> <i> <strike>
<strong>
 

Sobre este Artigo

 

Sobre o Autor...

Ivo GomesIvo Gomes tem 32 anos e é licenciado em Ergonomia pela FMH. Durante o curso especializou-se em Ergonomia de Sistemas de Informação e actualmente trabalha do Departamento de Usabilidade e Qualidade do Portal SAPO.

É sócio da Associação Portuguesa de Ergonomia, da Usability Professionals Association, e sócio fundador e membro do Conselho Directivo da Associação Portuguesa de Profissionais de Usabilidade.

Categorias do Blog

Arquivo

Consulte o arquivo para procurar algum artigo específico ou use o motor de busca.

|

Subscreva

Se preferir pode subscrever os artigos deste site via RSS para poder estar sempre actualizado.

O que são Feeds RSS e como as posso subscrever?