CSS Hacks o que são e pra que servem?

CSS Hacks não são mais do que “gambiarras”, no código que abusam de erros de renderização dos navegadores. Eles são códigos CSS que fazem funcionar ou não, um certo código em um determinado browser.

É extremamente comum, após criar o layout do site, ele ficar certinho em um navegador, e em outro ter alguma coisa errada ou tudo errado, principalmente no terrível, Internet Explorer 6 ou anterior, que para alegria e satisfação geral adota os seus proprios padrões do CSS.

Para resolver isso foi criado os CSS hacks, que permitem corrigir, algo, no navegador desejado, podendo ocultar ou adicionar alguma classe ou atributo.

Como os problemas acontecem na maioria das vezes, no Internet Explorer, a maioria dos hacks são feitos somente para ele.

Então vejamos alguns hacks:

Adicionar um _(underline) a frente do seletor. Este hack fará com o que certo código CSS funcione apenas no IE5 ou 6 os outros browsers vão ignorar. Ex:

div {
width:300px;
_width:100px;
}

Todo browser decente não entenderá essa propriedade e a ignorará.

Mas por algum motivo bizarro, o Internet Explorer aceita isso.
Logo, no Internet Explorer, a largura dos divs terão 100 pixels de largura.

Atenção.
Esse hack deve vir depois da propriedade correta. Se vir antes, o IE aceitará a última propriedade que vier, ela sobrescreverá a propriedade underline e dará prioridade para a propriedade que está sem underline.

E Esse hack faz seu CSS não ser validado pelo W3C.

Esse é util se houver alguma coisa fora do lugar, ou com tamanho errado, ou seja pouca coisa, mas e se muita coisa, ou todo o layout, ficar desconfigurado no IE o que fazer?. Nesses casos, existe as conditional comments, que é como um comando de programação if(se então), podendo definir um bloco, a ser executado.

Vejamos a sua sintaxe:

<!–[if condition]> HTML <![endif]–> = para ser executado o CSS desejado.

<!–[if !condition]><![IGNORE[–><![IGNORE[]]> HTML <!–<![endif]–> = para não ser executado o CSS desejado

no [if condition] temos os seguintes atributos:

[if IE] o padrão e quer dizer se for o Internet explorer então…

[if IE X] o X quer dizer a versão do Internet Explorer, como 5, 6, 7.

[if !IE] ! quer dizer se não for o Internet Explorer, ou seja qualquer outro navegador.

[if lt IE X] lt quer dizer se for menor que tal versão, o X quer dizer a versão do Internet Explorer.

[if gt IE X] gt quer dizer se for maior que tal versão, o X quer dizer a versão do Internet Explorer.

[if (gt IE 5)&(lt IE 7)] & é 0 operador logico E(AND), ou seja se IE maior que 5 e menor que 7 entao…

[if (IE 6)|(IE 7)] | é 0 operador logico OU(OR), ou seja se IE é 6 ou 7 entao…

mais informaçoes sobre conditional comments: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Com isso é possivel fazer muitas coisas como: executar algumas classes do css, criar um arquivo .css só pra ele(em casos extremos), exibir mensagens(irei adicionar uma mensagem aqui no clubepc, para baixar o firefox =D ), executar scripts encher de propaganda, e o que mais você conseguir imaginar.

E é logico que existem varios outros hacks para o Internet Explorer, em ingles é possivel achar muita coisa.

Eu postei um que ensina a como vizualizar imagens .PNG transparente, e em breve irei colocar mais 2: como tornar uma imagem transparente( usando o efeito alpha), e como fixar um conteudo na tela(já que o IE não reconhece o position:fixed)

Eu só gostaria de salientar que esses hacks são feitos principalmente para o IE 6 ou inferior. o IE 7 já está muito melhor e aparentemente resolveu adotar os padrões do w3c, mas como o IE7 ainda é pouco usado(19.22% do mercado segunda o w3counter) ainda é preciso usar esses hacks.

então vamos lá, 3 vivas para a M$ e ao seu otimo navegador IE6, todo mundo que faz site comigo: ipi ipi uhaa, ipi….