quarta-feira, 3 de dezembro de 2014

CSS Resets e Normalizing CSS

Olá pessoal!

Eu sei que praticamente já tem uma década que não posto aqui, mas espero que limpando as teias de aranha com esse post eu volte aqui com mais frequência...mas vamos ao que interessa!

Comecei a estudar RWD (Responsive WebDesign ou WebDesign Responsivo) e gostaria de começar a compartilhar o que estou aprendendo aqui e quem sabe trocar algumas idéias com vocês! (Aliás, já comecei com um problema pra resolver no próprio blog, vou descobrir mais tarde porque raios a sidebar não está no seu devido lugar).

Quem de nós nunca cruzou os dedos e teve aquela ansiedade antes de verificar o seu lindo site no IE, depois de vê-lo funcionando bonitinho no Firefox? E aquele ódio subindo do seu coração até a boca em forma de palavras não bonitas ao ver tudo torto depois do IE carregar seu trabalho? Pois é, acho que todos já passamos por uma situação similar, e é exatamente para situações como essas que usamos o CSS Reset.

Os browsers já tem alguns CSSs padrões, como margens, paddings, diferentes tamanhos de fontes para headings, e por aí vai...um exemplo mais visível, é que se você não coloca nenhum CSS para seus links, o CSS padrão dos browsers fará todos os links serem azuis e sublinhados, e os visitados serão roxos; e é por essa razão que temos tantas dores de cabeça para fazer nossos sites ficarem iguais em todos os browsers; o CSS Reset nada mais é do que "zerar" essas configurações padrões para que você possa trabalhar com um CSS consistente em todos os browsers.

Nesse mesmo contexto, existe também o Normalizing CSS que, ao invés de zerar as configurações padrões dos browsers, transforma esses valores em valores consistentes.

Existe uma lista com variados códigos que você pode usar:

CSS reset:
http://meyerweb.com/eric/tools/css/reset/

normalize.css:
http://necolas.github.io/normalize.css/

Mais exemplos:
http://www.cssreset.com/

No tableless.com.br, o autor postou uma solução bem simples, com o seletor ele zera algumas propriedades, nesse caso, essas propriedades de todos os elementos do site ficarão zeradas:

*  {
margin: 0;
padding:0;
}


Leia o post original sobre CSS resets do tableles.com.br

Saiba mais sobre CSS resets (em inglês)

Espero que eu tenha ajudado, e se alguém quiser trocar informações, curiosidades, experiências de trabalho, comentem!!