CSS Hacks: O hack do seletor universal
Postado por: Pedro Rogério emA 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
cara seguinte eu to com o mesmo problemas de outros sites no mozilla fica tudo zuado mas no ie 7 funciona certinho estou desconfiado que seja iso por que em um outro modelo eu uso iso e da o mesmo problema e em um terceiro modelo eu não uso iso e da certo. bom mas de qualquer forma gostaria de saber mais sobre os hacks tipo se puder mandar ai alguma coisa sobre eu agradeço.
Black Hawk
Web Master
Boa noite, não pude deixar de comentar neste post…
Em primeiro lugar, a página de exemplo está formatada igualmente para todos os navegadores, acabei de testar aqui no IE, Firefox e Safari. Todos estão em cor preta.
Em segundo, a margin não é um problema do navegador, cada navegador tem uma formatação, no IE a margin é mais torta do que no firefox, mas no firefox o que está torto é o H1, então cada navegador tem os seus prós e contras. Não adianta querer ficar xingando o IE, ele é o mais usado, e sempre será… e se todos os outros navegadores tiverem que “seguir” um padrão de formatação, terá que ser do IE, pois 80% do mundo inteiro usa o IE.
E a versão 8 do IE, virá perfeito, tanto para usuários como para desenvolvedores… e com certeza, quando você for usar ele, vai mudar totalmente sua opinião sobre o “grande” IE.
Então se preocupe somente em deixar o site acessível para todos os navegadores, resoluções de tela, usuários, etc.
Abraços!!!
Passados 2 anos e 2 versões do IE, tudo continua a mesma porcaria e o pior, conseguiram destruir o firefox com as merdas das versões 4 e 5.
Galera funciona sim !! isso é para o IE¨6 , testado e aprovado
dfqvycffsgftujwbm, Vasotec, BHBAMIV.