Artigos HTML e CSS Como utilizar a técnica CSS Reset

Introdução ao Reset CSS

Um dos maiores problemas enfrentados pelos web designers e programadores web em geral é a forma como um mesmo código se comporta em browsers diferentes. Nem sempre é possível obter o mesmo resultado para a interface trabalhando com diferentes navegadores.

Isso muitas vezes faz com que seja necessário escrever vários arquivos CSS e utilizar “diretivas de compilação” para que o documento identifique qual browser está sendo utilizado e aplique uma formatação específica.

Há momentos também em que um elemento sem formatação alguma é exibido de formas distintas em browsers diferentes, o que ocorre devido à existência de uma formatação básica nativa para essas tags. Essa formatação é necessária para que, caso o usuário visualize a página sem nenhuma folha de estilos, seja possível obter o mínimo de organização a fim de que o documento seja ao menos “legível”.

Essa diferença “natural” entre a formatação aplicada pelos navegadores pode se tornar uma dor de cabeça para os designers, que geralmente precisam obter um padrão mesmo para os pontos da página que não necessitam de estilos “especiais”.

Para contornar esse problema, foi desenvolvida uma técnica chamada “Reset CSS”, que consiste em sobrepor a esse padrão uma folha de estilos básica para remover toda formatação “original” aplicada pelo browser.

Como funciona

Como foi dito acima, trata-se de uma folha de estilos e, como qualquer outra, funciona realizando a aplicação de códigos CSS aos elementos da estrutura HTML. Essa folha de estilos pode ser aplicada internamente no arquivo HTML ou mantida em um arquivo externo, o que é mais comum, pois várias páginas vão precisar dela.

O arquivo contendo o código para realizar o Reset CSS deve ser inserido antes de qualquer outro arquivo de estilo, para que toda formatação adicional seja feita com base nos elementos “sem estilo”.

O ideal é que essa técnica seja utilizada nos momentos iniciais da concepção do site, pois inserir um arquivo desses com o site já funcionando pode gerar problemas, uma vez que o layout foi montado em cima do padrão aplicado pelo browser e não sobre os elementos “resetados”.

Criando o arquivo CSS para reset

Como já foi dito, esse arquivo é uma folha de estilos como outra qualquer. Nela, todas as tags são selecionadas e sobre elas são aplicadas algumas configurações básicas como fonte, margin e padding.

Cada um pode desenvolver seu próprio arquivo CSS para efetuar o reset, mas na web existem vários já prontos e distribuídos para uso livre. Um dos mais conhecidos foi/é desenvolvido por Eric Meyer e disponibilizado em sua página pessoal.

O conteúdo deste arquivo pode ser encontrado na Listagem 1, a seguir.

 /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, b, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Listagem 1. Arquivo para Reset CSS de Eric Meyer

É possível ver que o autor desse arquivo optou por formatar algumas tags de forma genérica (primeiro grupo de tags), enquanto outras precisam ter alguns atributos específicos valorados.

Outros profissionais e autores da área preferem utilizar formas mais simplificadas como, por exemplo, fazendo uso do seletor geral * (asterisco/estrela), que serve pare selecionar e aplicar um estilo a todos os elementos da página.

A listagem a seguir apresenta uma opção para esse arquivo utilizando o seletor *.

* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
Listagem 2. Formatando todos os elementos com o seletor *

É fácil perceber que nem todos os atributos utilizados no primeiro arquivo foram contemplados nesse segundo. Caso seja necessário, pode-se atribuir valores a outras propriedades conforme a necessidade for observada.

Esses foram apenas dois exemplos de arquivo para resetar o CSS, existem vários outros e só a necessidade dirá qual é o mais adequado para cada situação. O site www.cssreset.com agrupa os principais arquivos disponíveis na web, facilitando a escolha e download.

Página cssreset.com
Figura 1: Página cssreset.com

Testando o Reset CSS

A seguir temos um exemplo de página HTML contendo algumas tags comuns que naturalmente possuem alguma formatação especial que as diferencia o texto padrão, como cabeçalhos e listas.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>Título 1</h1>
    <h2>Título 3</h2>
    <h3>Título 3</h3>
    <hr />
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <hr />
    <p>
        Esse é um parágrafo contendo formataçãoes como
        <b>negrito</b>, <i>itálico</i> e <s>riscado</s>.
    </p>
</body>
</html>
Listagem 3. Página HTML sem Reset CSS

Abrindo essa página no browser temos o seguinte resultado, como esperado.

Página HTML básica no browser
Figura 2: Página HTML básica no browser

Agora inserimos uma tag <link> no cabeçalho da página (entre as tags <head> e <head/>), conforme o código abaixo, apontando para a folha de estilos com o conteúdo da Listagem 1.

Nota: Caso o leitor opte por realizar esse teste, deve ficar atento ao caminho correto do arquivo CSS utilizado. No caso desse exemplo, o arquivo CSSReset.css encontra-se no mesmo diretório do HTML.
 <link rel="stylesheet" type="text/css" href="CSSReset.css" />
Listagem 4. Referenciando o arquivo para efetuar o Reset CSS

Agora vemos que a aparência da página foi seriamente alterada, conforme ilustra a Figura 3.

Página básica após o Reset CSS
Figura 3: Página básica após o Reset CSS

A partir desse ponto os estilos específicos podem ser aplicados para montar o layout desejado. Claro que problemas de incompatibilidade existem, mas pelo menos assim se está partindo de uma mesma base, independente do browser. Ou seja, um problema a menos com relação ao layout da página quando esta é visualizada em diferentes navegadores.

Espero que as informações aqui apresentadas possam ser úteis. Até a próxima oportunidade.

Conheça os Cursos de Programação Front-End da Devmedia