10 Técnicas para Reset CSS » Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS
Pedro Rogério em 10 de novembro de 2008
Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS Cross-browser.
Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, inciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser. Abaixo vou mostrar algumas técnicas, algumas desconhecias por alguns, outras já utilizadas por default por vários desenvolvedores.
1. Generic Reset CSS
Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:
2. Ateneu Popular CSS Reset
CSS inicial sugerido pelo site Ateneu Popular:
3. Chris Poteet's Reset CSS
Técnica sugerida por Chris Poteet's para Reset CSS:
Técnica de Reset CSS proposta pelo Yahoo:
5. Eric Meyer Reset CSS
Esse com certeza deve ser o mais utilizado entre os desenvolvedores, proposto por Eric Meyer, é o que eu utilizo atualmente:
6. Tantek Celik Reset CSS
Técnica de Reset CSS proposta por Tantek Celik:
7. Christian Montoya Reset CSS
Técnica sugeria por Christian Montoya:
8. Rudeworks Reset CSS
Técinca de Reset CSS proposta por Rudeworks:
9. Anieto2K Reset CSS
Técnica de Reset CSS proposta por Andrés Nieto:
10. CSSLab CSS Reset
Técnica de CSS Reset proposta pelo site CSSLab:
Se você costuma utilizar alguma técnica de Reset CSS que não foi listada aqui, ou criou alguma, liste-a nos comentários.
Eu tbm utilizo a do Eric Meyer, as vezes costumo fazer algumas adaptações dependendo do projeto.. mas em geral utilizo a original.
Já li vários artigos DESaconcelhando a utilização da técnica de Reset CSS, mas, particularmente, não vejo como desenvolver um website Cross-browser sem a utilização dessa técnica.
Vou ver se experimento essas outras técnicas para ver se alguma me agrada mais que a do Eric Meyer.
por Igor Pimentel — 10 de novembro de 2008 @ 08:38 Responder
eu sempre uso o *{margin:0; padding:0; border:none;font-family:"Trebuchet MS"} XD
por Guilherme R. Woelke — 10 de novembro de 2008 @ 09:52 Responder
Só para constar, quem quiser usar o CSS Reset do Eric já tem versão mais nova! Ele mantém sempre a última versão na página http://meyerweb.com/eric/tools/css/reset/index.html
Foram feitas algumas alterações, como por exemplo o "background: transparent;" ao invés de forçar o tradicional preto/branco diretamente no body.
por Hugo — 11 de novembro de 2008 @ 03:05 Responder
Muitas das técnicas acima propõem o uso de font-size: 100%, que geralmente corresponde a 16px ou a 12pt. Alguém utiliza unidades escalonaveis (%, em) para definir o tamanho das fontes?
Por serem herdeiras elas necessitam de um ponto onde encontram o valor e unidade pai, por exemplo body { font-size: 10px; } onde aplicando-se a p { font-size: 2em; } teriamos na realidade 20px…
Queria saber o q vocês utilizam no boby como unidade de medida, px, em, % (como esta em alguns modelos acima – 100%)
por Isaias Alexandre — 11 de novembro de 2008 @ 15:51 Responder
Eu costumo definir no body assim: 62.5%, com isso, o tamanho de fonte inicial é de 10px.
por Pedro Rogério — 11 de novembro de 2008 @ 15:59 Responder
Mais uma pergunta relacionada ao tamanho das fontes, nas tags p, span, a e afins, vocês costumam utilizar qual unidade de medida? em ou %?
Encontrei uma referência muito interessante onde o autor do artigo prova porque o % é mais indicado que o em para setar o valor da propriedade font-size. Vejam:
por Isaias Alexandre — 12 de novembro de 2008 @ 09:08 Responder
Eu costumo utilizar "em" para tudo. Aqui você pode ver 2 artigos muito interessantes sobre isso:
http://www.ibm.com/developerworks/web/library/wa-aj-webportal/index.html
Irei dar uma lida nesse link que você mandou e depois lhe dou minha opinião.
por Pedro Rogério — 12 de novembro de 2008 @ 09:15 Responder
Modelo bem interessante onde a unidade de medida utilizada é o em, ou seja tudo ai será relativo ao tamanho da fonte, brinquem usando Ctrl+Scroll do mouse.
Modelo utilizando % onde a relação é ligada as dimensões do viewport, divirtam-se mudando as dimensões da tela.
por Isaias Alexandre — 12 de novembro de 2008 @ 14:58 Responder
@Pedro, você podia pegar os links do Isaias, juntar com o seu e faze um post sobre %, px, em, pt e etc no CSS NO LANCHE né?
Nem preciso dizer que você é único do mundo que encontra todas essas técnicas. Por isso que eu digo que tu és o Google Humano rsrs
por Leo Caseiro — 12 de novembro de 2008 @ 16:55 Responder
Uma ótima idéia Leo, estou reestruturando algumas coisas na minha maneira de implementar e pesquisando na net percebi que o assunto é bem interessante e vasto, pena que não tenhamos referências em pt-BR.
por Isaias Alexandre — 13 de novembro de 2008 @ 08:38 Responder
por Jens Meiert — 15 de novembro de 2008 @ 08:33 Responder
Pedro, estava desenvolvendo um WebStandards aqui para aprender. Eu estava utilizando o RESET do Eric Meyer. O mesmo que você informou que sempre utiliza. Eu não sei porque, no Chrome ele não estava zerando as margins. Com isso, resolvi inserir no topo no meu CSS o *{margin:0} e funcionou perfeitamente. Você sabe me dizer pq o Chrome num rola?
por Leo Caseiro — 10 de dezembro de 2008 @ 16:23 Responder
@Leo Caseiro,
Teoricamente é para funcionar, utilizo essa técnica em todos os meus Jobs e nunca passei por esse tipo de problema. Se você der uma olhada nesse blog: http://www.semlimites.blog.br/ no Google Chrome, verá que funciona tudo ok. Dê uma olhada no CSS e verá que no topo está lá o reset do Eric Meyer. Abraços.
por Pedro Rogério — 10 de dezembro de 2008 @ 18:20 Responder
por tips — 26 de maio de 2009 @ 17:51 Responder
Pingback: Reset CSS | ????
Pra usar qualquer uma das técnicas existe alguma regra de royaltie ou coisa do gênero ou são todos códigos livres?
Por exemplo, qunado você abre a página do Yahoo e visualiza o código-fonte, o CSS Reset deles tem um Copyright…
por butilheiro — 14 de outubro de 2009 @ 15:40 Responder
Basta não remover o copyright.
por Pedro Rogério — 14 de outubro de 2009 @ 16:02 Responder
Eu utilizo um folha parecida com a do Rudeworks e do Eric Meyer. Mas pensando cá comigo…
@Pedro Rogério
Será correto, ao invés de usar uma folha "reset", criar uma folha de estilo próprio ao invés de anular suas configurações?
Definir os estilos de cada tag, assim como faz os browsers.
Por exemplo, no reset, na maioria das vezes as lista ficam sem margens, padding e estilos. Penso que seja por causa dos menus.
No entanto, não deveria ser assim. Deveria ter seu estilo definido para ser usado dentro de um texto, assim como faz os navegadores.
Caso seja usado no menu, então retiramos ou definimos suas margens, seus espaçamentos no #id do menu.
Penso até que em relação ao tamanho total dos arquivos CSS seria menor.
É errado pensar assim?
por Trambulhao — 12 de março de 2010 @ 14:17 Responder
Não, pelo contrário, até acho interessante essa opção. Aproveitando, dê uma olhada nesse post:
por Pedro Rogério — 12 de março de 2010 @ 14:56 Responder
Agora é só optar por um exemplo, possivelmente a proposta da w3c, versão CSS 2.1, além de não achar completa. Fazendo umas alterações na body {margin:0}, tamanho da font para 62,5%, table {border-collapse: collapse} e mais umas cosinhas, fica perfeito.
As opções dos browsers também vale apena. Sei lá o que escolher..
Deveria era ter o estilo pinceladas_da_web.css :P
Valeu Pedro.. Obrigado.
por Trambulhao — 12 de março de 2010 @ 18:08 Responder
Cara já voltei aqui várias vezes para pegar algum reset desses, por isso me sinto obrigado a agradecer, valeu pedro!
por Diogo Henrique — 1 de junho de 2010 @ 08:41 Responder
Pingback: Códigos reseteadores de CSS | Otro Blog Más
Pingback: bulldoggie's blog » Yahoo's CSS Reset
Pingback: Evolua seu CSS - Dicas | import Zeh.Design
Pingback: CSS Reset - O que é, qual melhor e por que usar? | Blog do Wallace Silva
Pingback: O que são e porque usar Frameworks de WordPress
Pingback: CSS Reset « Internet Ideias – Dicas de programação, edição de imagem, internet
Ei galera, blz? pergunta meio tosca, mas vai lá: vcs usam duas folhas de estilo, ou só adicionam essas configurações? Fico com medo de usar duas folhas e pesar o carregamento, ou então de usar uma só e rolar conflito de informação. E ai, qual a dica da vez?
por Gabriela — 30 de março de 2011 @ 17:18 Responder
Pingback: Usando CSS Reset | Ruan Mér – Front-end Developer - XHTML, CSS, jQuery, WordPress
eu costumo utilizar 10px por que o usuário pode alterar nas propriedades do navegar o tamanho padrão da fonte com isso se no body tiver em % pode quebrar o layout
por neto — 29 de agosto de 2011 @ 14:16 Responder
Sou completamente contra utilizar resets dessa forma, acredito que cada projeto deve conter um reset de acordo, não utilizar resets já padronizados destroi totalmente a semantica do documento como também o deixa mais pesado pois reseta elementos que vc nem se quer vai usar …
1 – não utlize "*" por razões citadas no post …
2 – não utilize resets de outra pessoa, contrua seu proprio reset de acordo com o projeto, tendo em mente apenas de resetar "margin", "padding" dos elementos que vem com o mesmo por padrão.
por Antonio — 6 de fevereiro de 2012 @ 12:30 Responder
Pingback: Zamana » Yahoo User Interface ou YUI
Haverá maneira de fazer reset ao CSS aplicado às tags?
Tipo eu tenho uma zona onde mostro uma tabela e ela tem um CSS para ficar mais bonita mas agora estou a usar uma outra noutra zona e o CSS é lhe aplicado ;(
por Rodrigo Graça — 27 de abril de 2012 @ 11:04 Responder
Pingback: 10 Técnicas para Reset CSS » Pinceladas da Web – Reflexões sobre XHTML, CSS, PHP e WebStandards » Web Design