CSS Hacks

2 Comentários

Quem já trabalhou com design para a web já enfrentou algum tipo de incompatibilidade na forma que diferentes navegadores renderizam os elementos de um documento HTML. Algumas vezes, se faz necessário o uso de algum artifício para se conseguir uma melhor compatibilidade de algum CSS entre esses navegadores, normalmente se fazem o uso dos CSS Hacks.

Abaixo segue um exemplo de como alguns navegadores aprensentam de forma diferente o conteúdo HTML, e o CSS logo abaixo para o mesmo botão:

button { padding:1px 16px 3px }

A regra CSS acima define que o elemento button irá ter padding superior de 1 pixel, padding nas laterais de 16 pixels, e padding inferior de 3 pixels, vale lembrar que na visualização existem pixels adicionais do elemento button que 4 pixels naturais do elemento. Como podemos ver, o botão é visualizado no firefox com 20 pixels de padding nas laterais, padding superior de 5 pixels e padding inferior de 7 pixels, já no internet explorer 6 e 7, o botão é exibido de forma diferente, com 30 pixels de padding lateral, padding superior de 4 pixels e padding inferior de 8 pixels, um incremento de 10 pixels nas laterais e desvio de 1 pixel do padding superior para o inferior.

Abaixo está uma forma bem simples de corrigir essa diferença aplicando dois tipos de CSS Hack para isso. O primeiro é o * html tag que faz com que a regra seja interpretada ao internet explorer 6 ou inferior, e o segundo é o *+html tag que faz com que a regra seja utilizada ao internet explorer 7 ou inferior. A vantagem da utilização desses dois hacks é que você irá conservar um CSS válido, não apresentando problemas ao ser validado, tornando-o mais limpo . Segue um exemplo que irá corrigir a diferença de pixels detalhados anteriormente:

/* aplicável em todos os navegadores */
button { padding: 1px 16px 3px }

/* aplicável apenas para o internet explorer 7 ou inferior */
*+html button { padding: 2px 6px }

/* aplicável apenas para o internet explorer 6 ou inferior */
* html button { padding: 2px 6px }

Uma forma próxima à anterior é fazendo o uso de comentários condicionais dentro do head do documento. Comentários condicionais tem a seguinte estrutura:

<!--[if condicao]> HTML <![endif]-->

As condições válidas são:

IE

Qualquer versão do internet explorer

lt IE versao

Versões menores que versao

lte IE versao

Versões menores ou iguais a versao

IE versao

Somente versão versao

gte IE versao

Versões maiores ou iguais a versao

gt IE versao

Versões maiores que versao

Dessa forma pode-se garantir que certo(s) navegador(es) utilizem determinados arquivos para causar o mesmo efeito anterior. Abaixo estão alguns exemplos de comentários condicionais:

<link href="todos_navegadores.css" rel="stylesheet" type="text/css" />

<!--[if IE]>
<link href="ie_somente.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 7]>
<link href="menor_que_ie_7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if !IE]>
<link href="nao_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Outra forma de fazer a correção da diferença demonstrada antes pode ser aplicando o uso de !important, que não é reconhecido pelo internet explorer 6, e de outro hack que somente é reconhecido pelo internet explorer 7, fazendo o uso de *propriedade. Vale lembrar que dessa forma iremos ter um arquivo CSS menor, mas que irá gerar um CSS inválido. Veja um exemplo abaixo dessa combinação:

button {
/* aplicável em todos os navegadores, menos ie 6 ou inferior */
padding: 1px 16px 3px !important;

/* aplicável apenas o internet explorer 7 ou inferior */
*padding: 2px 6px !important;

/* aplicável para o internet explorer 6 ou inferior */
padding: 2px 6px;
}

Outra forma similar de fazer isso seria:

button {
/* aplicável em todos os navegadores */
padding: 1px 16px 3px;

/* aplicável apenas para o internet explorer 7 ou inferior*/
*padding: 2px 6px;

/* aplicável para o internet explorer 6 ou inferior */
_padding: 2px 6px;

/* aplicável para o internet explorer 6 ou inferior (semelhante a _padding) */
-padding: 2px 6px;
}