Entendendo e conhecendo o CSS Reset

Neste artigo iremos ver porque precisamos usar um arquivos externo de css chamado de CSS Reset para padronizar os valores no desenvolvimento cross-browser.

Para quem não sabe, alguns navegadores possuem algumas propriedades css com valores diferentes, por exemplo a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. , esse é um dos motivos para vermos sites perfeitos em alguns navegadores e completamente tortos em outros.

O CSS Reset faz exatamente com que o todos os navegadores fiquem zerados e sem nenhum tipo de valor padrão(por isso o nome de reset), dessa forma fica mais fácil identificar qualquer tipo de bug que tenha em determinado navegador.

O início do CSS Reset

Um dos primeiros, senão o primeiro css reset que surgiu foi o de Eric Meyer, em 2008. Muitas pessoas confundem o css reset com algum tipo de hack ou coisa parecida. Mas não, o css reset não é nenhum tipo de hack, ele é nada mais, nada menos que uma forma de padronizar quase todos os atributos de uma forma uniforme para que fique igual em todos os navegadores.

Listagem 1: CSS Reset de Erick Meyer

1:  /*  
2:  Reset Stylesheet  
3:  2008-02-12  
4:  Author: Eric Meyer  
5:  */  
6:     
7:  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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  
8:    margin: 0;  
9:    padding: 0;  
10:    border: 0;  
11:    outline: 0;  
12:    font-size: 100%;  
13:    vertical-align: baseline;  
14:    background: transparent;  
15:  }  
16:  body {  
17:    line-height: 1;  
18:  }  
19:  ol, ul {  
20:    list-style: none;  
21:  }  
22:  blockquote, q {  
23:    quotes: none;  
24:  }  
25:  blockquote:before, blockquote:after, q:before, q:after {  
26:    content: '';  
27:    content: none;  
28:  }  
29:  /* remember to define focus styles! */  
30:  :focus {  
31:    outline: 0;  
32:  }  
33:  /* remember to highlight inserts somehow! */  
34:  ins {  
35:    text-decoration: none;  
36:  }  
37:  del {  
38:    text-decoration: line-through;  
39:  }  
40:  /* tables still need 'cellspacing="0"' in the markup */  
41:  table {  
42:    border-collapse: collapse;  
43:    border-spacing: 0;  
44:  }  
45:    
46:    

Com o surgimento do HTML5 e do CSS3, muitas novas versões de css reset apareceram. Mesmo com as novas tag’s não sendo padrões em muitos navegadores, já dá pra se ter uma boa noção de como funcionam os novos resets e também ir usando de acordo com a sua necessidade específica, como o modelo que vou postar a seguir:

Listagem 2: CSS Reset de Richard Clark

1:    
2:  /*  
3:  html5doctor.com Reset Stylesheet  
4:  v1.4.1  
5:  2010-03-01  
6:  Author: Richard Clark - http://richclarkdesign.com  
7:  */  
8:     
9:  html, body, div, span, object, iframe,  
10:  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
11:  abbr, address, cite, code,  
12:  del, dfn, em, img, ins, kbd, q, samp,  
13:  small, strong, sub, sup, var,  
14:  b, i,  
15:  dl, dt, dd, ol, ul, li,  
16:  fieldset, form, label, legend,  
17:  table, caption, tbody, tfoot, thead, tr, th, td,  
18:  article, aside, canvas, details, figcaption, figure,  
19:  footer, header, hgroup, menu, nav, section, summary,  
20:  time, mark, audio, video {  
21:    margin:0;  
22:    padding:0;  
23:    border:0;  
24:    outline:0;  
25:    font-size:100%;  
26:    vertical-align:baseline;  
27:    background:transparent;  
28:  }  
29:     
30:  body {  
31:    line-height:1;  
32:  }  
33:     
34:  article,aside,canvas,details,figcaption,figure,  
35:  footer,header,hgroup,menu,nav,section,summary {  
36:    display:block;  
37:  }  
38:     
39:  nav ul {  
40:    list-style:none;  
41:  }  
42:     
43:  blockquote, q {  
44:    quotes:none;  
45:  }  
46:     
47:  blockquote:before, blockquote:after,  
48:  q:before, q:after {  
49:    content:'';  
50:    content:none;  
51:  }  
52:     
53:  a {  
54:    margin:0;  
55:    padding:0;  
56:    border:0;  
57:    font-size:100%;  
58:    vertical-align:baseline;  
59:    background:transparent;  
60:  }  
61:     
62:  ins {  
63:    background-color:#ff9;  
64:    color:#000;  
65:    text-decoration:none;  
66:  }  
67:     
68:  mark {  
69:    background-color:#ff9;  
70:    color:#000;  
71:    font-style:italic;  
72:    font-weight:bold;  
73:  }  
74:     
75:  del {  
76:    text-decoration: line-through;  
77:  }  
78:     
79:  abbr[title], dfn[title] {  
80:    border-bottom:1px dotted #000;  
81:    cursor:help;  
82:  }  
83:     
84:  table {  
85:    border-collapse:collapse;  
86:    border-spacing:0;  
87:  }  
88:     
89:  hr {  
90:    display:block;  
91:    height:1px;  
92:    border:0;   
93:    border-top:1px solid #cccccc;  
94:    margin:1em 0;  
95:    padding:0;  
96:  }  
97:     
98:  input, select {  
99:    vertical-align:middle;  
100:  }  
101:    

Como pudemos ver, o Segundo reset postado já possui as tag’s HTML 5, dessa forma caso você esteja desenvolvendo um projeto totalmente ou parcialmente em HTML 5, já pode usar esse reset para evitar qualquer dor de cabeça no desenvolvimento cross-browser.

A tendência é sem dúvida os navegadores se padronizarem e começarem a usar valores padrões iguais, evitando a necessidade do uso de reset, mas enquanto isso não acontece, temos que utilizar dessas ferramentas para que nossos projetos não sejam prejudicados. :)

Espero que tenham gostado e que o conteúdo passado no artigo seja útil para os leitores do site.

Créditos: Ricardo Arrigoni

Tweet

Pin It