Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

A maior dor de cabeça de todos os desenvolvedores com certeza é o uso de hacks em CSS, por culpa de um navegador que não interpreta o código de forma correta (vulgo IE). Uma das dores de cabeça mais conhecidas são as Margens duplicadas, e em certas ocasiões você tem que usar padding ao ínvés de margin, sem nehuma razão, tudo por causa do nosso amigo IE.

Hoje em dia existem muitos hacks, é só você dar uma procurada no Position Is Everything, que você vai encontrar muitos deles, e quem saber uma solução para o seu problema não pode estar lá. Mas vamos dizer que você já tentou de tudo e ainda não encontrou a solução para o seu problema. Ainda resta um último recurso: O Hack do seletor universal.

* html

Como ele funciona

O seletor universal, representando pelo caracter “asterisco” (*) seleciona todos os elementos da árvore do documento. Ele funciona da seguinte forma:

* { color: red; }

Com isso, todos os elementos da árvore do documento teriam a cor vermelho, sobreescrevendo a sua herança. Eric Meyer escreveu um ótimo artigo sobre o poder dos seletores universais, vale a pena dar uma olhada.

Agora voltando ao Hack

* html { }

O que essa regra que dizer é que tudo será aplicado aos elementos HTML descentes de *, ele seleciona todos os elementos filho e descentendes de HTML. O Firefox e o Opera ignoram qualquer regra que comece com * html, sem exceção, mas o IE a interpreta normalmente. Peguemos o seguinte código:

* html body h1 { color:blue; }

O resultado disso seria que todos H1, filhos de body e de HTML teriam a cor azul. No Firefox e no Opera não ocorre nada.

Para vocês entenderem melhor, vou deixar aqui um exemplo, experimente abrí-lo no IE e no Firefox para você ver a diferença.