Deixem de usar CSS Hacks!

Por Ivo Gomes, em Sexta-feira, 14 de Outubro de 2005 | 24 Comentários

"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:

Se conhecemos que existe um bug, podemos tentar prevenir que ele aconteça;
Se não for possível preveni-lo, podemos fazer ajustes (workarounds) ao código para evitar que ele apareça;
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

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…

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.

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”.

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.

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 …

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 ^_^

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

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)

Rui Moura

17 de Outubro de 2005, 10:57

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

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

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.

TALLITA CORDEIRO ARAUJO

6 de Junho de 2006, 17:03

REALMENTE QUAL A DEFINIÇÃO DE HACKS?

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.

fernando

15 de Dezembro de 2006, 18:18

eu quero ser hacker

william

18 de Fevereiro de 2007, 15:10

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

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?

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.

Igor

28 de Novembro de 2007, 20:41

* ainda funciona!

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!

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.

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.

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

Comente!

Comente este artigo!

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…
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.
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”.
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.
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 …
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 ^_^
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 :)
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)
Rui Moura

17 de Outubro de 2005, 10:57

Percebi perfeitamente ;). Obrigado pelo esclarecimento. Estamos sempre a aprender :D
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
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.
TALLITA CORDEIRO ARAUJO

6 de Junho de 2006, 17:03

REALMENTE QUAL A DEFINIÇÃO DE HACKS?
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.
fernando

15 de Dezembro de 2006, 18:18

eu quero ser hacker
william

18 de Fevereiro de 2007, 15:10

existe um escaner que não da comflito com windows xp editom
como resouvo este problema
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?
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.
Igor

28 de Novembro de 2007, 20:41

* ainda funciona!
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!
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.
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.
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.

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