Hacks hack hacks!

Meses atrás saiu um convite no blog da Microsoft para que todos os desenvolvedores alterassem os hacks utilizados para o Internet Explorer e os trocasse por uma solução mais limpa e considerada future-proof. A razão disso é o Internet Explorer 7 e os testes realizados em diversos sites que ficaram “quebrados” por causa do uso dos hacks que ironicamente só existem por causa da própria Microsoft por não adotar os web standards como deveriam. No final quem paga o preço são os desenvolvedores.

Existe uma solução com sintaxe válida que permite com que os User Agents modernos renderizem com perfeição o CSS e ao mesmo tempo permite com que as versões anteriores ao Internet Explorer 7 interpretem a forma alternativa que precisamos que ele o faça. A promessa da Microsoft é que com esta solução o Internet Explorer 7 interpretará o CSS corretamente – leia-se: não exibirá seu site quebrado – bem como suas versões anteriores. As discussões morais sobre isso podem se estender mais do que a discussão técnica. E se considerarmos a realidade ambígua de que o pior browser que existe disponível no mundo hoje é o mesmo que possui no mínimo de 80% da fatia do mercado, nos leva a ponderar que discussões morais nunca serão proveitosas. O máximo que podemos fazer é humilhar o “e” azul o quanto pudermos em nossos blogs como uma forma de sublimação da nossa ira.

O que é um hack?

Se você está chegando agora e não está muito inteirado sobre o que é um hack aqui vai a explicação. Um “hack”  no sentido que nos interessa é uma brecha em um browser, uma falha, um bug, que pode ser explorada de alguma maneira para forçar a faze-lo o que ele naturalmente não faz. Os desenvolvedores web utilizam estas brechas para contornar problemas de desenvolvimento e tornar possível um site ficar relativamente perfeito em diferentes browsers que possuem formas diferentes de interpretar o CSS. Em primeiro lugar não deveria existir diferentes formas de interpretar CSS, considerando que existem padrões para isso.  Se isso existe é um bug. A brecha mais famosa que existe é o Box Model Hack documentada pelo Tantek Çelik. Tudo o que você precisar saber sobre hacks está linkado aqui.

Em resumo, um hack é uma brecha, um bug, desnecessário e acaba sendo utilizado para corrigir limitações do próprio browser. Kevin Smith do Centricle, compilou uma listagem com a maioria dos hacks existentes.

Soluções

Se você até agora não usou nenhum tipo de hack, não use, e se precisar de uma solução para um problema específico com o Internet Explorer, use a técnica descrita abaixo. Você pode substituir todos os tipos de hacks utilizados, seja ele qual for por esta solução que utiliza descedant selectors e child selectors.

Ela funciona da seguinte maneira. Para contornar um problema você vai precisar de duas declarações, e em ambas as declarações você vai precisar escrever seu CSS com o conceito de pai e filho como eu sugeri aqui anteriormente usando descedant selectors. A diferença é que a segunda declaração deverá usar um seletor filho especificamente. Veja os exemplos:


.rodape .vcard { 
     padding-top:0px; 
     margin-bottom:-20px;
     float: left;
     border: 1px solid #900;
     background-color: #CCC;
  } 
  
.rodape > .vcard { 
     padding-top:12px; 
     margin-bottom:0px; 
  } 

body .lateral {
     margin-left:3px; 
     width:168px; 
     float:left; 
  } 
html > body .lateral { 
     margin-left:6px;
  }
   
	

A primeira declaração deve conter todas as propriedades que serão interpretadas por todos os browsers, mais a propriedade que será usada pelo Internet Explorer. Lembre-se que você deve declarar em primeiro lugar usando child selectors como no exemplo acima. Na segunda declaração, você deverá colocar as propriedades para todos os outros browsers corrigindo os valores declarados acima para o Internet Explorer. Ou seja, a função da segunda declaração é considerar apenas os valores que foram declarados acima para o Internet Explorer.

A razão disto é que o Internet Explorer 6 e versões anteriores não fizeram as implementações de CSS2 que poderiam ter feito. O resultado disso é que todos os browsers modernos que implementaram CSS2 corretamente vão interpretar a segunda regra sobrepondo a regra anterior. Como o Internet Explorer é cego para descendant selectors, ele vai ignorar a regra posterior.

Este é o convite feito pela Microsoft e a forma que ela encontrou de dividir o próprio prejuízo. O consolo é que está solução é completamente validada e dentro dos padrões. O ruim é a necessidade dela.

  • CosmeWeb

    Dependendo da estrutura as vezes nem precisa de Hacks (AS VEZES).

  • Rodrigo

    Mais uma vez a microsoft ditando regras e acabamos tendo que seguir isso pra não perder mercado (leia-se usuários do IE).

    O que deveriamos fazer, drasticamente falando, é bloquear acesso de quem vem do IE ou no mínimo colocar uma barra sugerindo o download de outro browser (igual do maujor.com por exemplo)

  • http://rodrigomuniz.com/ Rodrigo Muniz

    Henrique, nesse tipo de solução usando seletores, a ordem não influencia.

  • rdigin

    Um detalhe! Se usarmos os child selectors com espaços entre o sinal de maior (html > body {…}) o IE 5.0 reconhece o seletor (mas não funciona com o propósito correto). Sem os espaços o esquema passa a valer também no IE 5 (html>body {…}.

  • http://cirofeitosa.com.br/ Ciro Feitosa

    Mais uma da Microsoft :-(

    Muito bom o artigo Henrique. Agradeço as palavras no meu site. Parabéns. PS.: te adicionei no Blogroll.

    Abraço!

  • http://www.flickr.com/photos/erickwilder Erick Wilder

    Rodrigo: "O que deveriamos fazer, drasticamente falando, é bloquear acesso de quem vem do IE ou no mínimo colocar uma barra sugerindo o download de outro browser (igual do maujor.com por exemplo)"

    Rodrigo, até concordo com você na questão de nós, desenvolvedores, tomarmos a iniciativa de "forçar" uma transição de browser, porém sempre há quem é do contra. Nada contra o pessoal da "antiga" ams eu já ouvi muita coisa do tipo: "Eu tenho 15 anos de profissão e blá, blá, blá..isso é só uma modinha dos jovens, isso não dura e blá, blá, blá…". Se eu pudesse, bloqueava, mas não posso, o que eu faço é colocar banners e botões do Firefox (meu preferido) nas páginas e textos descritivos, explicando o poruqe do apoio a outro Browser, pois eu acho que só bloquear sem explicar também não dá certo.

    Depende de nós, cada um fazendo sua parte, divulgando e fazendo o conecimento chegar a todos, inclusive os usuários.

  • Pingback: Revolução » Revolução

  • Pingback: As Dicas de CSS que você não deve deixar de saber » Revolução

  • Rafael

    Eu testei o IE 7 Beta 2 Public Preview, e achei horrivel. Claro que ainda é beta, mas ta pior que a versão 6, isso ta.

  • Pingback: Conditional Comments no Internet Explorer » Revolução Etc

  • http://www.partiturasencore.com/ Mark de Souza Costa

    Todo mundo utiliza CSS 2.1, mas parece que ninguém discute uma importante questão: CSS 2.1 ainda não é uma recomendação W3C (o CSS 2.0 sim), portanto nem haveria razão, teoricamente, para um browser comercial, como o IE, implementar CSS 2.1.

    Vejo que há um grande esforço por parte dos desenvolvedores em liquidar o IE, mas o que na verdade deveria ser feito é trabalharmos para a finalização da recomendação CSS 2.1 (sim, podemos fazer isso!) e até mesmo a 3.0.

    Aliás, sempre fico na dúvida se quando as pessoas reclamam é do CSS 2.0 ou do CSS 2.1 (ou ambos!). Daria um bom artigo uma análise entre essas versões.

    Links:

    CSS 2.0: http://www.w3.org/TR/REC-CSS2/
    CSS 2.1: http://www.w3.org/TR/CSS21/

    Saudações,

    Mark Costa

  • Pingback: Problemas no Internet Explorer 7 at Hiper - Blog da Comunicação Digital

  • Carlos

    Olá Henrique,

    Gostei do artigo. Estou trabalhando em um site usando o Visual Studio 2005, C# 2.0, Asp .Net 2.0 e estou com problemas com o IE7. O site funciona como esperado no IE6, mas, no IE7 fica com o layout totalmente louco. Para corrigir o problema basta fazer alteração no css como sugerido em seu artigo ou há mais mudanças a fazer? Gostaria se possível de indicação de materiais que tratem de soluções para este tipo de problema para facilitar minha tarefa. Além disso preciso que o site seja apresentado de maneira correta em outros browsers como por exemplo o Firefox, mas não sei como fazer isso, novamente a indicação de material sobre o assunto será muito útil.

    Obrigado,

    Carlos.

  • http://marciotoledo.com/ Marcio Toledo

    Cada dia que passa tenho mais raiva da Microsoft :(

  • Cláudio

    Olá pessoal…

    acho que só em casos críticos (ainda não conheci nenhum) seriam necessários os hacks. Já vi muitos tutoriais e desenhos de css que utilizavam hacks sem necessidade. Até agora contornei todos os "erros" de css sem precisar utilizar os bitelinhos.

  • Daniel

    Chega! Cansei de chingar o IE masis enfim não costmo usar Hacks, normalmente so uso a IEexpresion para layout liquido no IE ou alguma mainha javascript para poder "Simular" o :focus.

  • Majesticskull

    O pior de tudo é que o cara chega e diz pra todo mundo: 'não usa o ie, usa o firefox', aí as pessoas que não tem noção nenhuma dizem: 'mas o ie é o melhor', mesmo sem nunca ter experimentado outro. É triste mas é verdade, o usuário comum não sabe nem que existem outros browsers, o 'e' azul que vem com o Windows pra eles ta bom.

  • http://www.trf3.jus.br Anderson toatoabar@h

    saudações,

    por falando em hacks, segue minha dica que pode ajudar alguns amigos.

    Para solucionar tal problemas com browser antigo (tipo IE 6.0) a dica é a seguinte, use de acordo segue a sequência do ex. abaixo

    #nome da div {

    margin: 0 10px 0 0; (para firefox deixe normal)

    * margin: 0 8px 0 0; (para IE 7.0 use o * )

    _ margin: 0 4px 0 0; (para o IE 6.0 use o _ )

    }

    Serve para qualquer tag desde que respeitada a sequência

    Abrs

    Anderson

  • João Paraiba

    O importante é continuar rezando para a Microsoft, algum dia tudo ficará padronizado!