CSS Hacks

Antes de mais, para aqueles que não sabem o que são CSS Hacks: são técnicas para alterar a forma como se vê o estilo da página web. Costumam ser usados para conseguir o mesmo efeito em browsers diferentes.
Por vezes estes truques são necessários porque cada browser interpreta o CSS de forma diferente... outras vezes, porque os programadores dos browsers se enganaram e o browser não lê o CSS como era suposto.
Há quem advogue que não se deve usar CSS Hacks, mas enquanto não encontrar uma forma de obter os mesmos resultados com código "politicamente correcto", vai servido. Ah, outro detalhe, muitos CSS Hacks são baseados nos erros de programação dos browsers. Portanto de forma sintética:

«Um CSS Hack é um bug nos browsers que são usados para adaptar o CSS a outros bugs dos browsers.»

Posto isto, voltemos ao assunto que me levou a escrever este post.

Para todos aqueles que não são webdesigners mas as vezes trabalham com CSS (ou até para designers que não tenham isto tatuado nas costas das mãos), aqui vão uns hack para conseguir CSS que funcionem bem em todas as páginas.

Isto é no fundo um método que arranjei para adaptar facilmente CSS a vários browsers. Eu faço assim, se alguém tiver uma forma melhor, faça o favor de me esconjurar.

Eu escrevo o CSS, tal como pretendo para o browser que uso com mais frequência (Firefox 3.0 rula!). Depois, adapto para os restantes browsers sendo que IE6 + IE7 + FF3 + FF2 representam cerca de 90% dos browsers usados nos meus websites (nota: IE = Internet Explorer, FF=Firefox).

Então para introduzir os hacks eu adiciono as seguintes linhas por esta ordem exacta:


/* for FF2 (x:-moz-any-link) */
/* for FF3 (x:-moz-any-link, x:default) */
/* for IE6 and IE7 (*) */
/* for IE6 (_) */


Isto são apenas comentários no código CSS. A ordem é importante porque usa-se o efeito overload em que uma propriedade sobrepõe-se a outra.

Para o Firefox, o hack é feito no selector. Para o IE, o hack é feito nos elementos. Por exemplo, se tivermos uma div com texto preto por dentro:


div{
color:black;
}


E quisermos uma div com texto branco para o firefox2 (FF2) basta fazer o seguinte:


div{
color:black
}

/* for FF2 (x:-moz-any-link) */
x:-moz-any-link, div{
color: white;
}

/* for FF3 (x:-moz-any-link, x:default) */
/* for IE6 and IE7 (*) */
/* for IE6 (_) */



Notem como eu fiz a parte a bold: adicionei o código entre parêntesis do comentário "for FF2", depois uma virgula e finalmente o selector do elemento que quero afectar. Agora, apenas no FF2 o texto será branco, sendo preto em todos os outros browsers.

Para o FF3 o processo é semelhante. Vamos dar cor azul ao texto do FF3:


div{
color:black
}

/* for FF2 (x:-moz-any-link) */
x:-moz-any-link, div{
color: white;
}

/* for FF3 (x:-moz-any-link, x:default) */
x:-moz-any-link, x:default, div{
color: blue;
}

/* for IE6 and IE7 (*) */
/* for IE6 (_) */



Mais uma vez, foi só copiar o texto entre parêntesis (x:-moz-any-link, x:default) para o sítio do selector, adicionar uma virgula e o selecto do elemento que queremos afectar (div). E agora temos texto branco no FF2, azul no FF3 e preto em todos os outros browsers.

Para o Internet Explorer 6 e 7 a coisa é um pouco diferente. Agora, é preciso preceder as directivas por um caractere especial. Para ambos os browsers (IE 6 e 7) o caractere é um asterisco (*).

"Oh não! Mas eu preciso de efeitos diferentes para cada um deles!" - dizem vocês, desesperados. Não se preocupem, porque para afectar apenas o IE6 existe podem usar o underscore (_). Assim, podem usar o asterisco para afectar os 2. Se quiserem afectar apenas o IE7, basta usar o underscore para repor o efeito que pretendiam para o IE6. Isto ficou um bocado confuso, vamos ver um exemplo.

Vamos colocar texto vermelho no IE7:


div{
color:black
}

/* for FF2 (x:-moz-any-link) */
x:-moz-any-link, div{
color: white;
}

/* for FF3 (x:-moz-any-link, x:default) */
x:-moz-any-link, x:default, div{
color: blue;
}

/* for IE6 and IE7 (*) */
div{
*color: red;
}


/* for IE6 (_) */



Ok, temos texto vermelho no IE7. Oops, mas também temos texto vermelho no IE6! Não há problema, basta usar o hack para IE6 para repor o texto preto:


div{
color:black
}

/* for FF2 (x:-moz-any-link) */
x:-moz-any-link, div{
color: white;
}

/* for FF3 (x:-moz-any-link, x:default) */
x:-moz-any-link, x:default, div{
color: blue;
}

/* for IE6 and IE7 (*) */
div{
*color: red;
}

/* for IE6 (_) */
div{
_color: black;
}


E voilá! Texto preto em todos os browsers, excepto no FF2, FF3 e IE7. Nestes o texto é branco (FF2), azul (FF3) e vermelho (IE7).

Se quisermos suportar um quinto browser (por exemplo Opera) podemos fazer o CSS dedicado a esse browser e usar estes hacks para adaptar a estes quatro que aqui vimos.


Isto pode ser feito assim como aqui mostrei (CSS normal mais hacks em conjunto), ou podem escrever o CSS todo depois separar em ficheiros; (1) todos só hacks num ficheiro à parte chamado "hacks.css"; ou (2) um ficheiro para cada tipo de hack, por exemplo "IE67_hacks.css", "IE6_hacks.css", "FF2_hacks.css", ...

E pronto, acho que está bem explicado. Ora digam lá se não sou vosso amigo?