08.09.2009

Usando CSS Reset

Hoje em dia, o maior problema de quem trabalha com HTML/CSS é as diferentes formas que os elementos e suas propriedades são apresentados pelos diferentes navegadores. O que causa muita dor de cabeça para quem quer construir um site Cross-browser (um site igual em todos os navegadores).

O CSS Reset nos ajuda a resolver um pouco desse problema. É uma técnica que reseta todas as propriedades dos elementos, para que sejam vistas de forma igual em todos os navegadores. Nos poupando um grande trabalho.

Existe vários modos de usar um CSS Reset, mas vou mostrar aqui o que eu uso.

Obs: Repare que no final do código eu fiz um comentário no CSS relacionado aos elementos input, textarea, select e button, que eu adiciono no Reset, mas fica a seu critério usar ou não.

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;
	vertical-align: baseline;
}
body {
        line-height: 1;
}
ol, ul {
	list-style: none;
}
:focus {
	outline: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* input, textarea, select, button */
/*Eu reseto esses elementos, mas deixei comentado pois tem desenvolvedor
que não estiliza esses campos no CSS e usa o padrão do navegador, então
fica a seu critério usar ou não. Se não for usar remova todo o comentário.

input, textarea, select, button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
*/

Você pode adicionar esse código a um CSS já existente, ou então, criar um novo CSS com o nome de reset.css. Eu aconselho a segunda opção. E aconselho que esse reset.css seja importado para dentro do CSS principal que você usa.

Por exemplo, você tem um CSS principal chamado base.css, então adicione no início dele o import :

/* adicione o import no início do CSS */
/* em URL você poe o caminho de onde está o reset.css */
@import url(reset.css);
.
.
.
/* resto do seu código CSS */

Observações Finais:

Não esqueça que todos os elementos terão suas propriedades “zeradas”, então você precisará atribuir novas propriedades para esses elementos. Fique atento aos BUGs que podem ocorre quando você declarar essas propriedades, pois cada navegador entende elas de uma forma.

Existe um artigo no site pinceladas da web sobre mais modelos de CSS Reset. Vale a pena dar um olhada.

Uma resposta a "Usando CSS Reset"

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *