Hacks hack hacks!

Por: Henrique Costa Pereira

Segunda-feira 19 Dezembro 2005 às 20:05

Categoria: Uncategorized

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.