por Diego Eis
Dezembro 4th, 2006
Alguns elementos do HTML tem valores padrões de Margem ou Padding ou outros valores de outras propriedades. Estes valores, normalmente são totalmente diferentes dos valores que os designers aplicam para seus layouts. Se você não for regrado, pode fazer confusão com esses valores e causar alguns transtornos na hora da implementação porque esqueceu de zerar os valores padrões dos elementos.
Portanto, sempre que eu começo um CSS, eu me preocupo em zerar todos os valores que possam me atrapalhar futuramente. Me deixando livre para colocar os valores personalizados nestes elementos. Algumas pessoas fazem isso também, mas fazem desta maneira:
body, h1, h2, h3, h4, h5, h6, p, form, ul, ol, fieldset {
margin:0;
padding:0;
}Acontece que esta maneira não é a mais elegante e você pode esquecer de mencionar um objeto. Há outra maneira muito mais fácil e mais elegante para fazer isso, é usando o *. Veja como fica:
* {
margin:0;
padding:0;
}O * quer dizer TUDO. Então ele seleciona todos os objetos do HTML, e aplica as características que você quiser. Interessante, huh?
Até aqui isso funciona perfeitamente em tudo quanto é browser e até no IE. Só que você pode utilizar este * de diversas outras formas úteis, e claro, que não funcionam no IE. Por exemplo: Você tem um div #conteudo, e dentro deste div existem diversos outros objetos. Deu na telha de você querer colocar para todos estes objetos uma mesma característica, como por exemplo, borda. Normalmente você faria assim:
#conteudo div, #conteudo form, #conteudo p, #conteudo fieldset {
border:1px solid black;
}E daria certo. O ruim é que a cada objeto novo inserido dentro do div#conteudo, você teria que abrir o CSS e editar este seletor mencionando o objeto novo.
O jeito bonito de se fazer e que não funciona no IE é este:
#conteudo * {
border:1px solid black;
}
Ou seja: tudo que estiver dentro de #conteudo, vai ter uma borda (ou qualquer outra característica que queira).
Mais fácil, bem simples e dá menos, muito menos trabalho. Mas, só funciona em browsers.
Se ainda estiver interessado, leia também:
Este post foi criado
na Segunda-feira, Dezembro 4th, 2006 às 07:00 e está arquivado em Browsers.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
É lamentável mesmo! o IEzinho dos %$$#@#…
Adorei a frase final “só funciona em browsers”… rs, perfeito!
Não sabia dessa técnica é muito útil mesmo.
Haha… que engraçado esse final!
Fiquei na dúvida se era um erro (faltando algum adjetivo para o “browsers”) ou se era de propósito mesmo… 
Sempre o IE! Até quando ele vai ser uma pedra no sapato?
E isso não funciona nem no IE 7?
A propósito, preciso dar um jeito de baixar ele e testar as coisas. Nem ví a cara dele ainda. =X
Té!
Pô… Eu sempre fiz isso achando que tava funcionando no IE! =/ Não funciona mesmo?
O que seria do “povo do Firefox” sem o IE pra falar mal …
É legal pensar que pelo menos um dia não vamos mais ter problemas como esse.
Bom também pra quem está começando, não deixar aquele código todo sujo.
“Mas, só funciona em browsers.” É isso ái, muito bem finalizado.
Realmente, finalizou no melhor estilo.
E ótima dica. Eu não sabia dela não.
Abs
Realmente ja tinha reparado isso, infelizmente, mais trabalho por causa do IE, sempre.
hehehe, essa foi ótima: “[…] só funciona em browsers.”
Gente não sei do que vcs estão falando… uso isso sempre, e funciona no IE e no FF! Só no de vcs que não funciona!
Desafio qualquer um camarada que gosta de defender o IE. A cada uma vantagem do IE eu falo duas do Firefox.
Ou seja, o IE não é um browser… hehe
Nunca tinha usado assim.
Abraços
Desafio qualquer um camarada que gosta de defender o IE. A cada uma vantagem do IE eu falo duas do Firefox.
Eu concordo.. para cada uma do IE dá para falar 6 do Firefox 
A única IE boa que eu conheço é a injeção eletrônica do meu carro! Não é vanglorizar o Firefox (mesmo porque tenho usado muito o Opera).. e sim mostrar que o IE infelizmente é o que é :S
Realmente, nem tem como comparar o IE com o FF, mas também… o Microfofa num gosta de fazer nada seguindo padrão… =\
é nisso que dah !!! =)
[]’s all ae !
Diego, estava reparando agora, que o Tableless tá com o layout meio bagunçado no IE7.
Tem um endereço de e-mail para que eu possa mandar um SS?
Att,
Bernardo Medeiros
Sou Firefox desde criancinha, mas está se cometendo uma injustiça aqui, ao que me parece. Costumo usar esse método de #algo * {} e ele funciona perfeitamente mesmo no não-browser da microsoft, pelo menos na versão 6. Vai ver não funciona no 5, então.
OPS! Há algo estranho nesta matéria.
O seletor universal (também chamado de seletor estrela) é bem suportado e funciona normalmente nas versões IE5/Win e posteriores e IE/Mac.
Ver Suporte para seletores CSS
[…] O Diego do Tableless escreveu um post legal sobre o assunto. […]
Hey! Eu uso isso direto nos meus sites e eles funcionam normalmente no ie.
Não sei o porque isso acontece com você, mas comigo sempre usei e nunca tive problemas no IE6 (ainda nao vi o 7)
Talvez, possa ser atributos especificos que nao funcionam. Ex: border não funciona, enquanto padding e margin pra mim está normal.
Funciona border, background, fonte, cor, tudo o que testei até o momento….
. Até onde eu sabia, também sempre achei que funcionava. Usei com muito sucesso o seletor universal inclusive nas versões 5 do IE…
Engraçado o codigo abaixo funciona no meu IE6
<style type=”text/css”>
#geral * {
border: 1px solid black;
}
</style>
<div id=”geral”>
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<p>Paragrafo</p>
<ul><li>Lista 1</li><li>Lista 2</li></ul>
</div>
No IE7 este recurso funciona normalmente. Mas será que isso faz dele um browser?
[…] Coisas úteis que não funcionam no IE #3 - Seletor com asterísco - Tableless.com.br […]