Tableless - Padrões Web com Pastel e Caldo de Cana

por Diego Eis Dezembro 4th, 2006

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 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.

categorias:
tags:

Se ainda estiver interessado, leia também:

28 Comentários

João Henrique Firmino

É lamentável mesmo! o IEzinho dos %$$#@#…

Rafael Baialuna!

Adorei a frase final “só funciona em browsers”… rs, perfeito!

Samir Araujo Mamude

Não sabia dessa técnica é muito útil mesmo.

Carlos Eduardo

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

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

Pô… Eu sempre fiz isso achando que tava funcionando no IE! =/ Não funciona mesmo?

Mark de Souza Costa

O que seria do “povo do Firefox” sem o IE pra falar mal …

Camilo

É 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

“Mas, só funciona em browsers.” É isso ái, muito bem finalizado.

Rangel

Realmente, finalizou no melhor estilo.
E ótima dica. Eu não sabia dela não.
Abs

Rodrigo Fante

Realmente ja tinha reparado isso, infelizmente, mais trabalho por causa do IE, sempre.

Leandro Vieira Pinho

hehehe, essa foi ótima: “[…] só funciona em browsers.”

Rodrigo

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

Desafio qualquer um camarada que gosta de defender o IE. A cada uma vantagem do IE eu falo duas do Firefox.

Thalis Valle

Ou seja, o IE não é um browser… hehe

Nunca tinha usado assim.

Abraços

Rafael Baialuna!

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 :D

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

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

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

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

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 *

[…] O Diego do Tableless escreveu um post legal sobre o assunto. […]

Nelson

Hey! Eu uso isso direto nos meus sites e eles funcionam normalmente no ie.

Erick Wilder

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

Funciona border, background, fonte, cor, tudo o que testei até o momento….

diego nunes

. 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

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

No IE7 este recurso funciona normalmente. Mas será que isso faz dele um browser?

Reset de estilos — RafaelMarin.net

[…] Coisas úteis que não funcionam no IE #3 - Seletor com asterísco - Tableless.com.br […]

Voltar para o topo

Histórico