neyRicardo

Hoje, em uma conversa com meu ex colega de trabalho, Renan Teles, que comentou que gosta de ver dicas de desenvolvimento web aqui no blog, em especial técnicas de programação tableless.

Coincidentemente eu já vinha pensando em escrever algo sobre um assunto conhecido por poucos programadores e usado por menos desenvolvedores ainda: é o CSS Reset. Meu ex chefe, Carlos Gustavo (também conhecido como B1), foi quem me apresentou ao conceito, mas eu ainda não tinha tido tempo de estudar sobre o assunto e não utilizava. Depois, com mais tempo fui analizando e acabei montando um “pacote” que incluo em todos os sites que desenvolvo antes de começar a escrever os estilos.

Um CSS Reset é um documento CSS que pré define o comportamento e as propriedades de todos os elementos HTML a fim de que todos sejam renderizados de acordo com um só padrão, ao invés de deixá-los à mercê dos diferentes browsers.

A vantagem de ter um documento que ‘reseta’ todos os elementos é que você terá todos os objetos HTML se comportando da mesma forma em todos os browsers (ou pelo menos deveria). É como se todos os objetos fossem ‘zerados’ e estivessem prontos para receber suas instruções sobre como devem se comportar dali pra frente.

Consequentemente, você não precisa escrever tantos hacks pra ficar corrigindo akeles elementos rebeldes que aparecem de uma forma no IE e de outra no Firofox, por exemplo.

Agora vou me aprofundar e falar sobre este pacote que eu preparei e no final tem um link pra download do mesmo.

O problema dos browsers

Em primeiro lugar vem, obviamente, o CSS Reset desenvolvido e gentilmente cedido à comunidade pelo americano Eric Meyer, um dos mestres do CSS, ex Standards Evangelist da Netscape Communications. Observe o código:

Compactei o código, tirando todos os comentários, quebras de linha e espaços inúteis a fim de minimizar o tamanho do arquivo, e também pelo fato de ser um arquivo que eu não precisarei alterar nunca mais, e salvei como reset.css.

O problema do PNG transparente

Resolvido o problema dos browsers agreguei ao pacote a solução para um problema antigo do Internet Explorer 6: a correta renderização de imagens PNG com transparência. Como todos já devem saber o IE6 não renderiza um PNG transparente com transparência, ao invés disso ele renderiza a imagem com um background cinza. Como este é um problema específico do IE6, não há necessidade de sujar o código com um hack para IE, então criei um documento CSS específico para ele chamado: iehacks.css, onde devem ser agrupados todos os hacks para IE. Mais tarde eu explico como deve ser feita a inclusão deste documento no HTML. Voltando ao PNG… a melhor solução para este problema vem de uma experiência antiga minha com arquivos do tipo HTC (HTML Component), dos quais eu usava bastante quando trabalhava na Yotsuba. O HTC nada mais é que um código escrito em JavaScript que funciona como componente do browser pra qualquer funcionalidade que você determinar. Para usá-lo basta referenciar o caminho do arquivo com a propriedade de CSS behavior, que só funciona no IE. Detalhe: já vou adiantando que os HTC também só são interpretados pelo IE, o que é uma pena pois seria ótimo desenvolver componentes em JS e escondê-los no meio do CSS, não é mesmo? Pois bem adaptei o JS que corrige o problema do PNG a este HTC, salvei como pngfix.htc e referenciei-o dentro do arquivo iehacks.css. E o iehacks.css ficou assim:

Ok, feito isso agrupamos tudo e fechamos o pacote pra ser usado em todos os projetos antes de começar a escrever os estilos da página. Logo, temos:

• reset.css
• iehacks.css
• pngfix.htc
• blank.gif

Como você deve ter percebido eu citei o arquivo blank.gif mas não disse pra que serve. O GIF serve simplesmente pro bom funcionamento da função JS que regulariza os PNGs e nada mais é que um gif transparente de 1x1px, ou seja, quase não ocupa espaço no servidor.

Como usar o pacote

Descompacte a pasta css contida no arquivo css_hack_pack.rar que você baixou e copie para a raiz do projeto. É muito importante que todos os arquivos estejam dentro da pasta css, ou o pacote não vai funcionar muito bem, a menos que você entenda o que cada um faz e altere o que for necessário, caso contrário não é preciso mudar nada.

No cabeçalho do HTML você deve incluir os arquivos exatamente na ordem que é mostrado no código abaixo (já explico o motivo):

Na linha 1 temos o CSS Reset abrindo caminho para os novos estilos que você vai escrever.

Na linha 2, padrao.css, mas pode levar o nome que você preferir, é chamado o documento com os estilos que modelam a página de acordo com seu layout e que você mesmo vai escrever.

Nas linhas 3 a 5 acontece a inclusão do documento que contém os hacks de IE, iehacks.css, e vem por último justamente pra corrigir o que ficou errado no IE. Deve ser incluído da forma que está aí mesmo, pois tudo que vier dentro deste comentario só será interpretado pelo Internet Explorer e desta forma seu CSS não ficará inválido. Mais informações sobre esta sintaxe e como usá-la aqui: Tutorial CSS – IE7 e Hacks CSS.

Bom, espero que isso tudo tenha sido útil assim como está sendo pra mim.