Olá queridos leitores, este é um post especial… Falo especificamente sobre o CSS Reset de uma forma diferente. Falo sobre o CSS Reset de forma orientativa e não de forma explicativa.

Desde que eu divulguei minha matéria no iMasters e aqui no blog , recebi muitos comentários de pessoas dizendo que o CSS Reset não funcionou, tentaram de tudo mas não funcionou, continua torto.

Eu não quero que você leia o texto sobre o CSS Reset e pense DÊMÔRÔ, MEUS PROBLEMAS ACABARAM!, por que você provávelmente vai bater de cara no muro a 900km/h.

Faça um favor à você, veja o CSS Reset como se fosse um Framework CSS. Você já conheceu alguém que desenvolveu tudo da sua maneira e só no final incorporou o Code Igniter, Cake PHP ou Spaghetti* (jaba pros amigos ^^) por exemplo? obvio que não!

O CSS Reset deixa todos os elementos da sua página de forma que eles fiquem com as configurações exatas em todos os navegadores, ele RESETA as propriedades de forma que todos os elementos da sua página sejam vistos de forma igual, sem importar o navegador.

Vou dar um exemplo:

Pense em 2 navegadores (Internet Explorer e Firefox), pensou? ok… Agora vamos levar em consideração que:  O que pode ser padrão em um, pode não ser em outro.

Por exemplo: O Internet Explorer gosta de colocar uma margem de 0.3em nas suas listas, mas o firefox gosta de colocar 0.5em (é só um exemplo, okey? respire fundo.).

Por default, este são os valores iniciais nestes navegadores, a não ser que VOCÊ defina um padrão, se você não definir, o navegador vai assumir um por você, e estes padrões podem ser diferentes dependendo do navegador que você acessa o projeto.

O CSS Reset entra para acabar com isso, deixando todas as carácteristicas dos elementos iguais em ambos os navegadores. Se você faz todo o seu projeto, todo lindo, todo pompozo, de 1.000.000 páginas e só então adicionar o CSS Reset no final do projeto, é bem provável que o seu projeto vá ficar mais torto do que já está.

Para acabar com as dúvidas

Veja o CSS Reset como um Framework, aquele que vai ficar lado a lado com você do início ao fim e ponto.

[]’s
Igor.

Posts Relacionados:

• CSS Reset: Firefox, perfeito! Internet Explorer, torto?

Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que seu site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se visto muito falar nos tais “CSS Resets“. Antes de falar o que é o CSS Reset eu vou explicar por quê seu site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam, por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja) mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro mais sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas, o objetivo dele, é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura etc… sempre vão ser iguais independente do browser que estiver renderizando seu site.

Agora você ficou interessado, né?

É bem simples, salve o código CSS a seguir com o nome de reset.css

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

Como devo chama-los no meu cabeçalho?

Exemplo

<style type="text/css" media="all">/*<![CDATA[*/ @import "/css/reset.css"; /*]]>*/</style>

Pronto!
Agora você só precisa criar o CSS do seu site e começar a definir as regras do seu layout.

Ainda não entendeu? Leia este texto complementar sobre CSS Reset.
Webtutoriais:B92473D6

Posts Relacionados:

• CSS Reset não faz mágica!