CSS Reset - O que é e como usar?

CSS Reset - O que é e como usar?

Quarta-Feira, 20 de Janeiro de 2010 às 11:39

Há um grande problema quando implementamos um layout em HTML e CSS e vamos testar em outros browsers como o Internet Explorer ou Safari… Alguns elementos não se comportam da mesma forma, mesmo que esse comportamento não tenha sido definido/sobrescrito por você… por exemplo o H1, H2 e H3… Eles têm tamanhos diferentes em cada browser, mesmo usando a mesma fonte eles vão aparecer – se você não definir esse tamanho – com tamanhos diferentes.

O que é?

O CSS Reset é – basicamente – um arquivo que “limpa” os estilos padrões de todos os elementos HTML que já possuem uma formatação padrão. Ele tira cores, tamanhos de fonte, margins, paddins, efeitos e decorações… Quase tudo de quase todos os elementos vira “padrão”, como um texto sem formatação/alteração nenhuma.

Como usar?

Da forma mais simples do mundo: inserindo o arquivo no seu site como um CSS normal, antes de qualquer outro CSS que seu site usar.

Se você inserir em um site pronto você pode ver seu site se desfigurar todo, isso vai significar que você se baseou em estilos padrões de alguns elementos, o que é errado… Já que esse estilo pode mudar entre navegadores/futuras versões.

É altamente recomendável que você insira/use esse arquivo sempre que for começar a implementar um site.

E como é esse arquivo?

Existem vários CSS Reset rolando pela Internet… Todos funcionam da mesma forma mas alguns atingem mais elementos que outros… Mas teoricamente não há diferença.

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

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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


Se você preferir, existe um CSS da Yahoo mesmo, chamado de YUI CSS Reset:

http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

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


E existe um CSS Reset Reloaded criado por Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/):

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;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Fonte: Thiago Belem

Tags:

Qual a sua opinião?

Comente e interaja!



#1
fernando(http://www.blogsil.co.cc) | Domingo, 06 de Fevereiro de 2011 às 17:44

cara sei la

cara na verdade ainda criando o site com este css ainda se tem dor de cabeça prefiro usar meu script if (navigator.userAgent.indexOf("Firefox")!=-1) document.write("@import url("fire.css");"); if (navigator.userAgent.indexOf("MSIE")!=-1) if (document.documentElement && typeof document.documentElement.style.maxHeight!="undefined") { document.write("@import url("ie7.css");"); } else { document.write("@import url("master.css");"); } criando dois css para ie e firefox
Denunciar