Técnicas para reset CSS

* Artigo do site iConnect.

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

Fonte: iMasters

Posted in: CSS, Webdesign