Browsers
Coisas úteis que não funcionam no IE #3 – Seletor com asterísco
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 …
Por Diego Eis
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:
1 2 3 4 | 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:
1 2 3 4 | * { 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:
1 2 3 | #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:
1 2 3 | #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.
Pingback: Xmedia Webfactory » Arquivo do Blog » Saiba mais sobre o seletor *
Pingback: Reset de estilos — RafaelMarin.net
Pingback: Bate-papo sobre Browsers ou Navegadores de Internet. | Poaí Bacana!