Hacks CSS para IE6 e IE7

Hacks CSS são regras que só servem para determinado navegador. No caso, esse determinado navegador geralmente é o Internet Explorer, mas podemos encontrar alguns hacks para o Safari também.

Usamos hacks para resolver bugs de renderização desses navegadores. O IE6 possui um hack específico e o IE7 possui outro. Há situações que o IE6 renderiza igual ao Firefox ou IE8 e não precisa de hack, mas o IE7 precisa de um ajuste no padding, por exemplo.

Em geral, se você faz um belo HTML, vai precisar de hacks apenas para o IE6, mas nesses meus últimos anos de trabalho tenho percebido que o IE7 é pior que o IE6.

Hacks para IE6

O hack para o IE6 é muito conhecido, devido a idade do navegador. Basta colocar um underscore antes da regra CSS para que apenas o IE6 renderize a regra.

body {
  background-color: blue;
  _background-color: red; /* Apenas o IE6 terá fundo vermelho */
}

Perceba que a regra deve vir após a principal. Se você inverter as ordens a segunda regra irá sobrepor a primeira e o hack de nada servirá.

Hack para IE7

Quando a Microsoft desenvolveu o IE7 removeram o hack de CSS usado no IE6, mas deixaram um outro. Basta usar o asterisco no lugar do underscore.

body {
  background-color: blue;
  *background-color: red; /* Tanto o IE6 como o IE7 terão fundo vermelho */
}

Evitando conflitos de hacks

Você pode perceber que o IE6 reconhece o hack do IE7. Ainda bem que o IE7 não reconhece o hack do IE6. Dessa forma, para usar um hack só para o IE7, por exemplo, basta usar o hack do IE6 novamente para redefinir uma regra.

Como no exemplo acima, quero que apenas o IE7 tenha um fundo diferente:

body {
  background-color: blue;
  *background-color: red; /* Tanto o IE6 como o IE7 terão fundo vermelho */
  _background-color: blue; /* Agora reescrevemos para o IE6 ter fundo azul */
}

Bizarro né?! Mas infelizmente é isso que se deve fazer.

Boas práticas ao usar hacks

Hack não é bonito. Mas infelizmente as vezes precisamos desse artifício para que o site fique bom em vários navegadores.

Portanto, se o estupro é inevitável, curta ele. Se você vai usar hacks CSS, use-o de uma forma que fique fácil identificar onde foi usado e o motivo. O que geralmente faço é colocar os Hacks CSS em regras separadas da demais e colocar comentários explicando o motivo do hack.

.bloco {
  background-color: blue;
  padding: 10px;
  margin: 5px;
  width: 150px;
}

.bloco h1 {
  font-size: 13px;
  color: red;
  padding: 5px;
}

/**  hacks para IE6 e IE7 */
.bloco {
  _width: 130px; /* O IE6 soma a largura com o padding, portanto faço novamente o calculo */
}

.bloco {
  *padding:5px; /* IE7 estava quebrando devido ao anti-alias da fonte. */
}