Reset CSS: Guia B�sico

Com o alto n�mero de navegadores no mercado, um dos principais problemas para quem constr�i websites responsivos � que cada um deles pode possuir diferentes valores padr�o para a margem e o padding (margem interna) dos elementos. Isso faz com que sejam obtidos resultados visuais distintos, o que acaba prejudicando, exatamente, a responsividade. Pensando nisso, veremos nesse artigo como resetar esses valores atrav�s de algumas t�cnicas simples de CSS, evitando assim esse problema.

Seç�o 1: Entendendo o problema

Para entendermos esse problema na pr�tica, criamos um HTML b�sico, com apenas um texto, como mostrado a seguir:


<body>
  <h2>DevMedia - Reset com CSS para desenvolvimento responsivo</h2>
</body>

A partir desse c�digo, conseguimos observar as diferenças entre o visual do elemento sem o CSS Reset aplicado (Figura 1) e com esse recurso (Figura 2). Na Figura 1, nota-se, com muita clareza, que existe uma certa dist�ncia do texto para a margem nos tr�s navegadores (Google Chrome, Mozilla Firefox e Microsoft Edge). Isso � muito prejudicial ao desenvolvimento responsivo, principalmente por um motivo: o desenvolvimento responsivo, em geral, baseia-se em porcentagens. Imagine um layout com quatro colunas, cada uma com 25% da largura da p�gina. Caso n�o haja o reset, esses 100% seriam somados aos pixels de margem/padding do navegador, quebrando o layout e fazendo com que a quarta coluna fique na linha de baixo.

Figura 1. HTML exemplo sem CSS reset.

Figura 2. HTML exemplo com CSS reset.

Seç�o 2: Reset espec�fico para alguns elementos

O reset do CSS dos elementos � uma operaç�o bastante simples, por�m, muitas vezes acabamos esquecendo desse passo quando começamos a desenvolver de forma responsiva. No geral, isso leva a designs �quebrados� em alguns navegadores, mas que potencialmente funcionam bem em outros.

No caso de nosso exemplo, precisamos resetar apenas os elementos <html>, <body> e <h2>, uma vez que estamos utilizando somente eles. Dessa forma, um CSS como o da Listagem 1 seria suficiente.


   html, body, h2 
   {  
       margin: 0;  
       padding: 0; 
   }

Listagem 1. CSS para resetar somente os elementos necess�rios.

Linha 01: definiç�o dos elementos que ser�o resetados: <html>, <body> e <h2>;

Linha 03: zeramos a propriedade CSS �margin�, que elimina a margem padr�o que os navegadores definem para os elementos;

Linha 04: zeramos a propriedade CSS �padding�, que elimina a �margem interna� que os navegadores definem para os elementos.

Uma aç�o simples como essa � suficiente para termos o layout mostrado na Figura 2, possibilitando um design id�ntico em todos os navegadores. Tamb�m � importante ressaltar que, caso tiv�ssemos mais elementos no HTML, bastaria zer�-los tamb�m. Por exemplo, se tiv�ssemos um elemento <div>, ter�amos que zer�-lo da mesma maneira que a ensinada na Listagem 1.

Seç�o 3: Reset para todos os elementos

Caso a complexidade do HTML aumente, podemos concluir que a abordagem anterior pode prejudicar a construç�o da interface. Seria necess�rio controlar o reset de muitos elementos. Diante disso, o CSS traz uma outra possibilidade de reset, mais simples, e que permite que tenhamos todos os elementos do DOM como alvo: atrav�s do operador *. Vejamos um exemplo no c�digo abaixo:


  * { margin: 0; padding: 0; }

Com isso, ao inv�s de informarmos cada elemento do DOM que ser� resetado, com o operador * determinamos que todos eles o ser�o. Assim, � garantido que, independentemente do que for inserido no HTML, teremos um design responsivo sem diferenças entre os navegadores.

Confira tamb�m

HTML e CSS

Cursos

CSS

Guia

O que � CSS?

Curso

Desenvolvimento responsivo: como resetar os estilos com CSS

Aprenda neste artigo como resetar os estilos de todos os elementos HTML através do CSS, garantindo o mesmo comportamento para eles em todos os navegadores.