webARTz | CSS Reset – Você sabe o que é e por que usar ??

CSS Reset – Você sabe o que é e por que usar ??

Bom pessoal, muito se fala, se discute, se debate sobre o CSS Reset, alguns são totalmente a favor, assim como outros são contra, mas é aquele velho e conhecido ditado “Nunca vai se agradar Gregos e Troianos“, e é bem por ai que as coisas são, e vou dizer o porque.

CSS Reset nada mais é do que você redefinir tudo antes de começar a criar a sua folha de estilos, mas e por que fazer isso ?? Como disse acima, muitos defendem ou não o uso, mas a principal funcionalidade do reset é que existem pequenas divergência na renderização padrão de cada navegador, sejam elas em borda, alinhamento, margem, etc, e o CSS Reset serve justamente para isso, zerar essas diferenças entre os vários browser, porém uma vez que você zerou esses parâmetros, você terá que ter o cuidado e a atenção de defini-los novamente para cada um dos itens do seu código CSS.

Idealizado e popularizado por Eric Meyer, um dos magos do CSS, por assim dizer, o CSS Reset passou a ser muito utilizado em grandes portais e sites de grande audiência, pois como esses veículos são acessados por inúmeras pessoas com difrentes dispositivos e plataformas, a idéia é que ambas, ou grande parte delas possa ver as informações de forma igual, ou bem próxima dela.

Sim, se você usa CSS deve estar se perguntando, sobre outros recursos como hacks, filtros, adaptações na folha de estilo, não, o CSS Reset não é isso, o que ele faz é padronizar quase todos os atributos de uma forma uniforme para todos os navegadores. Hoje se discute muito sobre o modelo que Meyer sugeriu, e as diversas outras versões espalhadas ai pela grande rede, na verdade não se pode dizer que uma ou outra é a melhor, mas sim que dependendo do que e pra que você vai fazer, uma ou outra se encaixa melhor ao seu uso.

Hoje com o surgimento do HTML 5, novas versões de CSS Reset estão explodindo ai pelo sites, porém sabemos que as tags HTML 5 vão demorar um pouco para ser padrão na grande maioria dos browsers, mas já dá para ir utilizando o reset delas.

Vou postar aqui o CSS Reset sugerido por Meyer, e um outro modelos que já possui as tags do HTML 5.

CSS Reset de Eric Meyer de 2008

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/*
Reset Stylesheet
2008-02-12
Author: Eric Meyer
*/

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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

CSS Reset de Richard Clark de 2010

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Bom, espero ter ajudado, e até a próxima !!!

29 de julho de 2010

Categoria(s): HTML e CSS, Web Standards e Tableless

Tag(s): css, CSS Reset, html, Tableless, W3C, webstandards, xhtml

1°
André disse:

Responder

Bom, acredito que cada browser vem com uma predefinição pra ajudar, até porque um arquivo sem estilos próprios tem que rodar e tem que ser legível.

Mas sempre há esta opção, o reset.

Demanda mais trabaho, mas algumas vezes é necessário mudar algumas “leis do browser” pra que sua página rode como desejamos.

quinta-feira, 29 de julho de 2010 às 12:51

2°
Rodrigo Luis disse:

Sim André, cada browser tem suas pré-definições, na grande maioria são muito semelhantes entre os demais navegadores, entretanto existem algumas que se você não resetar ou redefinir, a estrutura visual de um site pode mudar completamente entre os navegadores.

quinta-feira, 29 de julho de 2010 às 13:32
http://www.webartz.com.br

3°
Blogueigoo disse:

Responder

Essa postagem merece ser favoritada. Sei como é chato esses problemas de CSS entre navegadores, pois sou desenvolvedor Web.

sexta-feira, 30 de julho de 2010 às 11:57
http://blogueigoo.blogspot.com
4°
Danilo Ramos disse:

Responder

Show de bola essa postagem sobre CSS, tenho experiencia com desenvolvimento de sites com css e html mas não sabia da funcionalodade do CSS reset, agora já sei, nunca se sabe tudo !

sexta-feira, 20 de agosto de 2010 às 8:15
http://cssorbit.blogspot.com

Busca no Blog

Publicidade

Nuvem de Tags

Arquivo webARTz

Wordpress Meta

Publicidade

CSS Reset de Eric Meyer de 2008

CSS Reset de Richard Clark de 2010

1°

André disse:

2°

Rodrigo Luis disse:

3°

Blogueigoo disse:

4°

Danilo Ramos disse:

Este post não possui Pingbacks/Trackbacks

Blog webARTz: Onde a WEB encontra a ARTE