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 {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?
margin:0;
padding:0;
}
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 {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.
border:1px solid black;
}
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.
29 Comentários
29 Comentários
João Henrique Firmino 04/12/2006 às 08:41
É lamentável mesmo! o IEzinho dos %$$#@#…
Rafael Baialuna! 04/12/2006 às 08:52
Adorei a frase final “só funciona em browsers”… rs, perfeito!
Samir Araujo Mamude 04/12/2006 às 09:23
Não sabia dessa técnica é muito útil mesmo.
Carlos Eduardo 04/12/2006 às 09:27
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…
Rafael Oliveira 04/12/2006 às 09:32
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é!
Tiago Madeira 04/12/2006 às 09:33
Pô… Eu sempre fiz isso achando que tava funcionando no IE! =/ Não funciona mesmo?
Mark de Souza Costa 04/12/2006 às 09:40
O que seria do “povo do Firefox” sem o IE pra falar mal …
Camilo 04/12/2006 às 09:50
É 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.
Wagner Rodrigues 04/12/2006 às 10:43
“Mas, só funciona em browsers.” É isso ái, muito bem finalizado.
Rangel 04/12/2006 às 11:30
Realmente, finalizou no melhor estilo.
E ótima dica. Eu não sabia dela não.
Abs
Rodrigo Fante 04/12/2006 às 12:19
Realmente ja tinha reparado isso, infelizmente, mais trabalho por causa do IE, sempre.
Leandro Vieira Pinho 04/12/2006 às 12:19
hehehe, essa foi ótima: “[...] só funciona em browsers.”
Rodrigo 04/12/2006 às 14:17
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!
Diego Eis 04/12/2006 às 21:28
Desafio qualquer um camarada que gosta de defender o IE. A cada uma vantagem do IE eu falo duas do Firefox.
Thalis Valle 04/12/2006 às 23:20
Ou seja, o IE não é um browser… hehe
Nunca tinha usado assim.
Abraços
Rafael Baialuna! 05/12/2006 às 09:18
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
Fernando 05/12/2006 às 11:19
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 !
Bernardo Medeiros 05/12/2006 às 14:14
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
Leonardo Klück 05/12/2006 às 18:10
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.
Maujor 06/12/2006 às 07:20
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
Xmedia Webfactory » Arquivo do Blog » Saiba mais sobre o seletor * 06/12/2006 às 10:05
[...] O Diego do Tableless escreveu um post legal sobre o assunto. [...]
Nelson 06/12/2006 às 10:26
Hey! Eu uso isso direto nos meus sites e eles funcionam normalmente no ie.
Erick Wilder 06/12/2006 às 12:47
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.
Nelson 06/12/2006 às 16:30
Funciona border, background, fonte, cor, tudo o que testei até o momento….
diego nunes 08/12/2006 às 18:55
. Até onde eu sabia, também sempre achei que funcionava. Usei com muito sucesso o seletor universal inclusive nas versões 5 do IE…
Paulo Andrade 08/12/2006 às 22:55
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>
Cledison Eduardo Fritzen 18/12/2006 às 20:11
No IE7 este recurso funciona normalmente. Mas será que isso faz dele um browser?
Reset de estilos — RafaelMarin.net 04/05/2007 às 14:14
[...] Coisas úteis que não funcionam no IE #3 – Seletor com asterísco – Tableless.com.br [...]
Bate-papo sobre Browsers ou Navegadores de Internet. | Poaí Bacana! 25/09/2008 às 11:01
[...] Sempre aparece matérias na internet sobre esses navegadores sem padrão. Matéria 1, Matéria 2. [...]