Tableless - Desenvolvimento inteligente com Padrões Web

13/09/2007
Artigos

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 …

Por

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.

1
2
3
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:

1
2
3
4
5
6
* {
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.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://jaderubini.wordpress.com Jader Rubini

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

  • http://www.robertolazaro.net ROBERTO

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

  • http://www.camilo87.com Camilo

    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.

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    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.

  • http://blog.cidandrade.pro.br/webdesign/css-reset/trackback/ Cid Andrade

    Muito bom, passarei a sempre tomar este cuidado

  • http://jaderubini.wordpress.com Jader Rubini

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

  • Pingback: CSS Reset | Prof. Cid R. Andrade - TI e Educação

  • Leonardo Klück

    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

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

  • http://www.aguinelopedroso.com Aguinelo Pedroso

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

  • http://www.antenando.com.br Rael B. Riolino

    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!

  • http://www.fantauva.com blackrose

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

  • Mickele

    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

  • http://www.agenciapro.com.br Joabe

    “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! :-?

  • http://project47.viscountbox.com Carlos Eduardo

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

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

  • http://www.richardbarros.com.br Richard Barros

    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

    É 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!

  • http://www.fazedordesite.com Rodrigo Fante

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

    nunca tive problemas com IE6 não.

  • http://blog.eucrio.com Helder Santana

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

  • http://blog.ciin.com.br Daniel Accorsi

    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.

  • http://www.netlus.com.br Rafael Dourado

    E o CSS Reset do Yahoo YUI?

  • Vitor

    Também testei o exemplo dado acima:

    1
    2
    3
    div#geral #texto * {
    color:red;
    }

    FUNCIONOU NO IE5.5 E IE6 PERFEITAMENTE!

  • Marcos Auélio

    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

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

  • Pingback: Blog do Bernard De Luna - Design, web, planejamento e muito mais… » CSS Reset - zerando estilos do seu website

  • Pingback: Dica: CSS Reset | Luiz Eduardo Blog’s

  • Pedro Pisandelli
  • Jacque

    nossa esse css reset salvo minha vida, fiz faculdade de web engraçado que ninguem ensino isso la.

  • http://www.otavioz.com otavio

    Eu costumava usar o reset completo, mas esse * vai me aliviar um bocado :D

  • Pingback: Alguns links indispensáveis para desenvolvedores Web | Profissionais TI - Pra quem respira informação

  • Guilherme

    Eu vi em vários scripts completos o reset, e hoje resolvi pesquisar…
    Me ajudou muito isso !

  • Pingback: CSS Reset

  • Pingback: Algumas dicas para evitar incompatibilidade entre os navegadores

  • http://www.7bis.com.br Heronildes

    corrigindo: “sendo q se vc resetar tudo como no citado acima .. muitas tags vc terá q refazer alguns estilos para determinadas TAGS HTML”

  • Pingback: CSS Reset « Internet Ideias – Dicas de programação, edição de imagem, internet