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.

(Leia mais)

Quem trabalha com Tableless sabe que nãoé tão complicado fazer um site inteiro sem usar tabelas, os problemas começam quando o seu código precisa ser Cross-browser, ou seja, seu site deve ser renderizado igualzinho (ou pelo menos com a mesma aparência) em vários browsers diferentes.

Pois bem, estava eu hoje a converter um layout quando me dei conta que estava com 6 (seis) browsers diferentes abertos:

• Internet Explorer 6
• Internet Explorer 7
• Mozilla Firefox 3
• Google Chrome
• Apple Safari 3.1 (Windows)
• Opera 9.5

Aí você pára e se pergunta: “Pra quê?!”.

E eu respondo: “Pra nada…”. Exatamente… PRA NADA!!!

Quem observa as estatísticas do Google Analytics dos sites que fez, vai perceber que menos de 10% dos usuários Windows usam o Safari, o Opera e o Chrome (provavelmente é você mesmo em um daqueles testes e revisões do layout recortado).

Outro detalhe: Quem é que testa o site no OS X e Linux?

Vamos fazer uma conta rápida: São 6 os browsers principais no Windows citados anteriormente, somados com o Safari, Firefox e Camino no Mac, no Linux temos o Firefox e o Conqueror (nem adianta tentar contar as distribuições de Linux, né? Vamos ficar só com os dois mesmo). Juntando tudo temos 11 browsers diferentes pra testar.

Mas como eu não testo em OS X e Linux, Vou reduzir a minha lista pra 3 browsers: IE6 (esse é o mais chatinho), IE7 e Firefox 3. Se você consegue fazer com que seu site tenha a mesma aparência sem bugs nestes 3 browsers a probabilidade de ficar com a mesma aparência em outros browsers é grande, então você só precisa dar uma navegada no final pra ver se tem algum bug que atrapalhe a visualização do site. Não que os outros sejam menos importantes. E não esqueça de dar uma olhada no Analytics pra conhecer os tipos de usuários que visualizam seu produto final.