Busca

Boas práticas de Desenvolvimento com Padrões Web


CSS Reset

Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset. Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando [...]

13/09/2007 por Diego Eis
26 Comentários

Sempre que começo a escrever meu CSS, eu inicio colocando um * (asterísco) e zero algumas propriedades. Esse técnica se chama CSS Reset.

Alguns elementos do HTML já tem um valor de margin, padding, borda e outros tipos de formatação definidos como padrão. O que acontece é que esses valores pré-definidos são necessários para que quando o site seja visto sem CSS algum, o usuário conseguirá ter um mínimo de legibilidade na visita.
Quando você vai implementar o CSS, esses valores atrapalham um bocado. Por isso, usamos essa técnica para zerar todas esses valores pré-definidos e inserir os valores que realmente usaremos para reproduzir o layout.

O asterísco é um seletor de CSS. Muito útil por sinal. A função dele é simples: selecionar todos os elementos.
div#geral #texto * {
color:red;
}

Neste caso, o asterísco irá “selecionar” todos os elementos que estão dentro do objeto #texto que está dentro do div #geral. Não importa quais elementos eles sejam, o * captura todos.
Infelizmente, não funciona no IE6.

Eu reseto meu CSS desta maneira:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}

Não se preocupe, usar o asterísco sozinho no seletor funciona em todos os browsers.

Se você tiver a necessidade de zerar mais propriedades, fique à vontade. O Eric Meyer já é mais violento e faz um reset geral em seu CSS, note que ele não usou asterísco.
Não acho necessário tanta coisa. Mas isso vai da maneira de trabalho de cada um. O código que mostrei aqui é simples resolve meus problemas e é isso que importa. Você vai adaptá-lo com sua maneira de desenvolvimento.

26 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

26 Comentários

Jader Rubini 13/09/2007 às 12:37

Como não funciona no IE6? Funciona sim.

Também sempre ouvi dizer que margin:0 auto não funciona no IE6, mas, pelo comigo, sempre funcionou.
Nunca precisei do body {text-align:center} #geral {text-align:left}.

ROBERTO 13/09/2007 às 12:43

Mais infelizmente ainda, se não funciona no IE é um elefante branco!!!

Camilo 13/09/2007 às 13:12

Jader,

O que não funciona no IE 6 é o primeiro exemplo.
Usar o * pra selecionar elementos de divs ou classes específicas.
Pra selecionar todos os elementos da página (* sozinho) funciona sim.

Eu uso bastante isso também.

Pedro Rogério 13/09/2007 às 13:26

Se não me engano o margin:0 auto não funciona nos IEs menores que o 6. Eu também costumo utilizar o * pra zerar tudo logo no início, bem melhor do que ficar zerando item por item depois.

Cid Andrade 13/09/2007 às 14:50

Muito bom, passarei a sempre tomar este cuidado

Jader Rubini 13/09/2007 às 15:08

Camilo, o que eu disse é justamente sobre o primeiro exemplo. ;)

CSS Reset | Prof. Cid R. Andrade - TI e Educação 13/09/2007 às 15:13

[...] Diego Elis, do Tableless, escreveu um excelente artigo sobre a importância de redefinir o padrão de certas propriedades com o CSS. [...]

Leonardo Klück 13/09/2007 às 15:23

Ambos os exemplos funcionam no IE6 sim! Não é a primeira vc menciona isso no blog Diego, mas tá errado. É só fazer o teste para comprovar.

Igor Escobar 13/09/2007 às 15:28

Legal, valeu a dica ;)
Realmente os valores default atrapalham um bocado.

Aguinelo Pedroso 13/09/2007 às 16:36

Muito bom, bem mais fácil do que setar propriedade a 1 por 1, e como sempre o IE não suporta

Rael B. Riolino 13/09/2007 às 18:20

Eu tb uso o CSS Reset, que por sinal ajuda de uma maneira absurda….

eu costumo usar margin, padding, border e font-family na maioria dos casos! font-size as vezes quebra um galho tb hehe :-)

Isso sempre me poupa tempo e algumas linhas de css!

blackrose 13/09/2007 às 18:29

nossa! Valew mesmo, essa dica é mesmo muiiiiito útil!!!

Mickele 13/09/2007 às 21:06

Pessoal, margin:0 auto funciona no IE 6 sim, basta usar um doctype decente

Dizem que é mais interessante resetar os estilos específicos de cada tag pois utiliza menos recursos do pc quando está aplicanto o css em tags específicas ao invéz de todas

Tem também o framework css do yahoo, bem interessante

Joabe 13/09/2007 às 22:15

“Margin 0 auto” só funcionado no IE 6 em Standards compliance mode, em Quirks mode não funciona, se o seu xhtml possui declaração XML (como deveria) ele será Quirks para o IE 6 (um Bug maldito), então margem automática e outras coisas não funcionam.

Agora sobre o asterisco depois de outras elementos eu testei no IE 6 e funcionou! :-?

Carlos Eduardo 13/09/2007 às 22:47

Sim, eu também utilizo o seletor * { propriedade: valor; } e funciona no IE6 também :)

Ah, o reset que utilizo é somente margin e padding.

Richard Barros 14/09/2007 às 01:32

Opa! Só não conhecia por CSS Reset.. mas já costumava fazer isso também. Meu reset é sempre com Padding e Margin, para evitar diferença de layout entre browsers, né? Muito bom. Abraços!

Matheus 14/09/2007 às 02:02

É verdade, Diego, já vi você afirmando o mesmo, se não me angano no vídeo tutorial 10, mas é possível sim, até mesmo no Internet Explorer 5, utilizar #geral * {propriedade:valor;}. Só para confirmar mesmo. O CSS reset é muito útil, mas muito útil mesmo!

Abraços!

Rodrigo Fante 14/09/2007 às 05:36

Também já usei muito esse tipo de “reset”
#geral * {propriedade:valor;}

nunca tive problemas com IE6 não.

Helder Santana 14/09/2007 às 09:48

O Eric tem problema? ou ele ama escrever seletor??? auhauhauhauha

Daniel Accorsi 14/09/2007 às 10:09

Olá Diego, legal a dica!
Já sofremos com esse tipo de coisa! muitas vezes reduz consideravelmente o código mas principalmente traz uma boa consequencia: um código limpo e com menos “correções” de magens.

Rafael Dourado 14/09/2007 às 11:29

E o CSS Reset do Yahoo YUI?

Vitor 14/09/2007 às 14:59

Também testei o exemplo dado acima:

div#geral #texto * {
color:red;
}

FUNCIONOU NO IE5.5 E IE6 PERFEITAMENTE!

Marcos Auélio 19/09/2007 às 14:02

Eu tenho uma dúvida. E se eu quiser reabilitar esta tag, em um determinado local, com os valores padrão originais?

Supondo que eu tenha posto:

* {
list-style:none;
}

mas em um determinado div eu queira deixar “natural”, como desfazer o reset inicial naquele div?

João David 20/09/2007 às 17:46

O reset feito pelo Eric Meyer integra o framework Blueprint, que além de “zerar” o css fornece mais alguns recursos.

Dica: CSS Reset | Luiz Eduardo Blog’s 10/11/2008 às 15:24

[...] vários css resets, como por exemplo o YUI CSS RESET,  o CSS RESET do site TABLELESS.COM e o CSS RESET do Meyer, que acredito ser um dos mais [...]