em
10 Técnicas para Reset CSS

10 Técnicas para Reset CSS

Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS Cross-browser.

Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecias por alguns, outras já utilizadas por default por vários desenvolvedores.

1. Generic Reset CSS

Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:

* {
    padding: 0;
    margin: 0;
    border: 0;
}

2. Ateneu Popular CSS Reset

CSS inicial sugerido pelo site Ateneu Popular:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table {	border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

3. Chris Poteet’s Reset CSS

Técnica sugerida por Chris Poteet’s para Reset CSS:

* {
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
}
body {
    padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
    margin: 20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

4. Yahoo’s CSS Reset

Técnica de Reset CSS proposta pelo Yahoo:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
ol,ul {
    list-style: none;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before,q:after {
    content:";
}
abbr,acronym { border: 0;
}

5. Eric Meyer Reset CSS

Esse com certeza deve ser o mais utilizado entre os desenvolvedores, proposto por Eric Meyer, é o que eu utilizo atualmente:

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}
body {
    background: white;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

6. Tantek Celik Reset CSS

Técnica de Reset CSS proposta por Tantek Celik:

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

7. Christian Montoya Reset CSS

Técnica sugeria por Christian Montoya:

html, body, form, fieldset {
    margin: 0;
    padding: 0;
    font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
    margin: 1em 0;
    padding: 0;
}
li, dd, blockquote {
    margin-left: 1em;
}
form label {
    cursor: pointer;
}
fieldset {
    border: none;
}
input, select, textarea {
    font-size: 100%;
    font-family: inherit;
}

8. Rudeworks Reset CSS

Técinca de Reset CSS proposta por Rudeworks:

* {
    margin: 0;
    padding: 0;
    border: none;
}
html {
    font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
    text-shadow: #000 0px 0px 0px;
}
ul {
    list-style: none;
    list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
    font-weight: normal;
    margin: 0 0 1em 0;
}
cite, em, dfn {
    font-style: italic;
}
sup {
    position: relative;
    bottom: 0.3em;
    vertical-align: baseline;
}
sub {
    position: relative;
    bottom: -0.2em;
    vertical-align: baseline;
}
li, dd, blockquote {
    margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
    font-size: 100%;
    font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
    text-decoration: line-through;
}
ins, dfn {
    border-bottom: 1px solid #ccc;
}
small, sup, sub {
    font-size: 85%;
}
abbr, acronym {
    text-transform: uppercase;
    font-size: 85%;
    letter-spacing: .1em;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}
a abbr, a acronym {
    border: none;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}
h3 {
    font-size: 1.6em;
}
h4 {
    font-size: 1.4em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {     
    outline: 0;
    text-decoration: none;
}
a img {
    border: none;
    text-decoration: none;
}
img {
    border: none;
    text-decoration: none;
}
label, button {
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    background-color: #FFF;
}
fieldset {
    border: none;
}
.clear {
    clear: both;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
body {
    text-align: center;
}
#wrapper {
    margin: 0 auto;
    text-align: left;
}

9. Anieto2K Reset CSS

Técnica de Reset CSS proposta por Andrés Nieto:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}
body {
    line-height: 1
}
:focus {
    outline: 0
}
ol, ul {
    list-style: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}
blockquote, q {
    quotes: "" ""
}
input, textarea {
    margin: 0;
    padding: 0
}
hr {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000;
    background-color: #000;
    height: 1px
}

10. CSSLab CSS Reset

Técnica de CSS Reset proposta pelo site CSSLab:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
:focus {
    outline: 0;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
a img, iframe {
    border: none;
}
ol, ul {
    list-style: none;
}
input, textarea, select, button {
    font-size: 100%;
    font-family: inherit;
}
select {
    margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

Se você costuma utilizar alguma técnica de Reset CSS que não foi listada aqui, ou criou alguma, liste-a nos comentários.

Comentários

  1. Eu tbm utilizo a do Eric Meyer, as vezes costumo fazer algumas adaptações dependendo do projeto.. mas em geral utilizo a original.

    Já li vários artigos DESaconcelhando a utilização da técnica de Reset CSS, mas, particularmente, não vejo como desenvolver um website Cross-browser sem a utilização dessa técnica.

    Vou ver se experimento essas outras técnicas para ver se alguma me agrada mais que a do Eric Meyer.

    Belo post. Abraço!

    por Igor Pimentel Responder
  2. eu sempre uso o *{margin:0; padding:0; border:none;font-family:”Trebuchet MS”} XD

    abraços

    por Guilherme R. Woelke — Responder
  3. Só para constar, quem quiser usar o CSS Reset do Eric já tem versão mais nova! Ele mantém sempre a última versão na página http://meyerweb.com/eric/tools/css/reset/index.html

    Foram feitas algumas alterações, como por exemplo o “background: transparent;” ao invés de forçar o tradicional preto/branco diretamente no body.

    por Hugo — Responder
  4. Muitas das técnicas acima propõem o uso de font-size: 100%, que geralmente corresponde a 16px ou a 12pt. Alguém utiliza unidades escalonaveis (%, em) para definir o tamanho das fontes?

    Por serem herdeiras elas necessitam de um ponto onde encontram o valor e unidade pai, por exemplo body { font-size: 10px; } onde aplicando-se a p { font-size: 2em; } teriamos na realidade 20px…

    Queria saber o q vocês utilizam no boby como unidade de medida, px, em, % (como esta em alguns modelos acima – 100%)

    por Isaias Alexandre — Responder
  5. @Isaias,

    Eu costumo definir no body assim: 62.5%, com isso, o tamanho de fonte inicial é de 10px.

    por Pedro Rogério Responder
  6. Mais uma pergunta relacionada ao tamanho das fontes, nas tags p, span, a e afins, vocês costumam utilizar qual unidade de medida? em ou %?

    Encontrei uma referência muito interessante onde o autor do artigo prova porque o % é mais indicado que o em para setar o valor da propriedade font-size. Vejam:

    http://www.thesug.org/blogs/kyles/Lists/Posts/Post.aspx?List=89c8858b%2D90d2%2D4750%2Da11a%2De599248e6c69&ID=22

    Abs

    por Isaias Alexandre — Responder
  7. Eu costumo utilizar “em” para tudo. Aqui você pode ver 2 artigos muito interessantes sobre isso:

    http://clagnut.com/blog/348/
    http://www.ibm.com/developerworks/web/library/wa-aj-webportal/index.html

    Irei dar uma lida nesse link que você mandou e depois lhe dou minha opinião.

    por Pedro Rogério Responder
  8. Modelo bem interessante onde a unidade de medida utilizada é o em, ou seja tudo ai será relativo ao tamanho da fonte, brinquem usando Ctrl+Scroll do mouse.
    http://www.csszengarden.com/?cssfile=/063/063.css

    Modelo utilizando % onde a relação é ligada as dimensões do viewport, divirtam-se mudando as dimensões da tela.
    http://www.csszengarden.com/?cssfile=/063/063.css

    Abs

    por Isaias Alexandre — Responder
  9. @Pedro, você podia pegar os links do Isaias, juntar com o seu e faze um post sobre %, px, em, pt e etc no CSS NO LANCHE né?

    Nem preciso dizer que você é único do mundo que encontra todas essas técnicas. Por isso que eu digo que tu és o Google Humano rsrs

    por Leo Caseiro Responder
  10. Uma ótima idéia Leo, estou reestruturando algumas coisas na minha maneira de implementar e pesquisando na net percebi que o assunto é bem interessante e vasto, pena que não tenhamos referências em pt-BR.

    Abs a todos!

    por Isaias Alexandre — Responder
  11. Feeling free:

    http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/

    por Jens Meiert Responder
  12. Pedro, estava desenvolvendo um WebStandards aqui para aprender. Eu estava utilizando o RESET do Eric Meyer. O mesmo que você informou que sempre utiliza. Eu não sei porque, no Chrome ele não estava zerando as margins. Com isso, resolvi inserir no topo no meu CSS o *{margin:0} e funcionou perfeitamente. Você sabe me dizer pq o Chrome num rola?

    Abs

    por Leo Caseiro Responder
  13. @Leo Caseiro,

    Teoricamente é para funcionar, utilizo essa técnica em todos os meus Jobs e nunca passei por esse tipo de problema. Se você der uma olhada nesse blog: http://www.semlimites.blog.br/ no Google Chrome, verá que funciona tudo ok. Dê uma olhada no CSS e verá que no topo está lá o reset do Eric Meyer. Abraços.

    por Pedro Rogério Responder
  14. Your site is a much needed addition to my life. THANK YOU!

    por tips — Responder
  15. Pingback: Reset CSS | 帕兰映像

  16. Pingback: Guia para estudar CSS | import Zeh.Design

  17. Pra usar qualquer uma das técnicas existe alguma regra de royaltie ou coisa do gênero ou são todos códigos livres?

    Por exemplo, qunado você abre a página do Yahoo e visualiza o código-fonte, o CSS Reset deles tem um Copyright…

    E aí?

    por butilheiro — Responder
    1. Basta não remover o copyright.

      por Pedro Rogério Responder
  18. Eu utilizo um folha parecida com a do Rudeworks e do Eric Meyer. Mas pensando cá comigo…

    @Pedro Rogério

    Será correto, ao invés de usar uma folha “reset”, criar uma folha de estilo próprio ao invés de anular suas configurações?

    Definir os estilos de cada tag, assim como faz os browsers.

    Por exemplo, no reset, na maioria das vezes as lista ficam sem margens, padding e estilos. Penso que seja por causa dos menus.

    No entanto, não deveria ser assim. Deveria ter seu estilo definido para ser usado dentro de um texto, assim como faz os navegadores.

    Caso seja usado no menu, então retiramos ou definimos suas margens, seus espaçamentos no #id do menu.

    Penso até que em relação ao tamanho total dos arquivos CSS seria menor.

    É errado pensar assim?

    por Trambulhao — Responder
    1. Não, pelo contrário, até acho interessante essa opção. Aproveitando, dê uma olhada nesse post:

      http://meiert.com/en/blog/20070922/user-agent-style-sheets/

      por Pedro Rogério Responder
  19. Muito bom..

    Agora é só optar por um exemplo, possivelmente a proposta da w3c, versão CSS 2.1, além de não achar completa. Fazendo umas alterações na body {margin:0}, tamanho da font para 62,5%, table {border-collapse: collapse} e mais umas cosinhas, fica perfeito.

    As opções dos browsers também vale apena. Sei lá o que escolher..

    Alguma sugestão?

    Deveria era ter o estilo pinceladas_da_web.css :P

    Valeu Pedro.. Obrigado.

    por Trambulhao — Responder
  20. Cara já voltei aqui várias vezes para pegar algum reset desses, por isso me sinto obrigado a agradecer, valeu pedro!

    esse post é muito útil!

    Abraço!

    por Diogo Henrique Responder
  21. Pingback: Códigos reseteadores de CSS | Otro Blog Más

  22. Pingback: bulldoggie's blog » Yahoo’s CSS Reset

  23. Pingback: Evolua seu CSS - Dicas | import Zeh.Design

  24. Pingback: CSS Reset - O que é, qual melhor e por que usar? | Blog do Wallace Silva

  25. Pingback: O que são e porque usar Frameworks de WordPress

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

  27. Ei galera, blz? pergunta meio tosca, mas vai lá: vcs usam duas folhas de estilo, ou só adicionam essas configurações? Fico com medo de usar duas folhas e pesar o carregamento, ou então de usar uma só e rolar conflito de informação. E ai, qual a dica da vez?

    por Gabriela — Responder
  28. Pingback: Usando CSS Reset | Ruan Mér – Front-end Developer - XHTML, CSS, jQuery, WordPress

  29. eu costumo utilizar 10px por que o usuário pode alterar nas propriedades do navegar o tamanho padrão da fonte com isso se no body tiver em % pode quebrar o layout

    por neto — Responder
  30. Sou completamente contra utilizar resets dessa forma, acredito que cada projeto deve conter um reset de acordo, não utilizar resets já padronizados destroi totalmente a semantica do documento como também o deixa mais pesado pois reseta elementos que vc nem se quer vai usar …

    fica a dica

    1 – não utlize “*” por razões citadas no post …

    2 – não utilize resets de outra pessoa, contrua seu proprio reset de acordo com o projeto, tendo em mente apenas de resetar “margin”, “padding” dos elementos que vem com o mesmo por padrão.

    Abraços

    por Antonio — Responder
  31. Pingback: Zamana » Yahoo User Interface ou YUI

  32. Haverá maneira de fazer reset ao CSS aplicado às tags?
    Tipo eu tenho uma zona onde mostro uma tabela e ela tem um CSS para ficar mais bonita mas agora estou a usar uma outra noutra zona e o CSS é lhe aplicado ;(

    Existe uma maneira de resolver isso?

    por Rodrigo Graça Responder
  33. Pingback: 10 Técnicas para Reset CSS » Pinceladas da Web – Reflexões sobre XHTML, CSS, PHP e WebStandards » Web Design

  34. Pingback: Metodologia de Organização de Folhas de Estilo – CSS – Eficente! | Diogo Souza

  35. Pingback: CSS Reset | Fábio Bmed

  36. Pingback: HTML&CSS: Layout fixo de duas colunas « Tiago Sabadini

  37. Pingback: A importancia do reset

  38. Pingback: Cómo inicializar la hoja de estilos CSS - Blogpocket

  39. Pingback: Xyberneticos » Blog Archive » 10 técnicas para resetear CSS

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>