iMasters | Por uma internet mais criativa e dinâmica

• CSS

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 8 comentários

Firefox, perfeito! Internet Explorer, torto?

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que um site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se falando muito nos tais "CSS Resets". Antes de falar o que é o CSS Reset, eu vou explicar por quê o site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam. Por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o número de tags e possibilidades, vai entender que isso acontece não por que o Internet Explorer seja ruim, mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro, mas sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas. O objetivo dele é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura, etc... sempre vão ser iguais independente do browser que estiver renderizando o site.

Agora você ficou interessado, não é?

http://www.monc.se/tripoli/sample.html

Agora pegue o endereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS, etc) que você tiver. Se você observar, logo notará que não vai ocorrer diferença de posicionamento, margem, formatação, largura. Se tiver vai ser insignificante ou seu browser é jurássico.

O Nome deste CSS Reset foi chamado pela MONC de Tripoli

Como posso começar a usar?

Você precisa de 4 arquivos:

* reset.css - reseta todas as propriedades independente do browser

* ie.css - este arquivo contem regras a parte para que o css reset funcione no Internet Explorer.

Como devo chamá-los no meu cabeçalho?

Exemplo:

   1. <style type="text/css" media="all">  @import url(css/reset.css);  @import "css/generic.css";  </style> <style type="text/css" media="print"> @import url(css/print.css) print; </style><!--[if IE]>
   2.       
   3. <style type="text/css" media="all"> @import url(css/ie.css); </style> <![endif]-->

Espero que tenha contribuído!

Pronto! Agora você só precisa criar o css do site e começar a definir as regras do seu layout.

Todos os artigos de Igor Escobar

8 comentários publicados

• 1. Todos são obrigatórios ?

  Quinta-feira, 17/04/2008, por Web Designer Demétrios Martins
  

  Se eu quiser usar o "reset.css" preciso utilizar os outros também para ficar 100% padronizado?

  • Igor Escobar - Quinta-feira, 17/04/2008

    

    Sim amigo, como diz no artigo.
    
    Grato,
    Igor.

  Responder comentário

• 2. Esta correto ???

  Sexta-feira, 02/05/2008, por Anderson Oioli
  

  Olá Igor,
  Tem uma linha que vc chama desta maneira
  @import "css/generic.css"
  ou seja sem usar o "url" antes, esta correto isso, funciona ou faltou digitar o termo ???
  
  Abrs e vou fazer estes testes que são muitos interessantes para os sites que eu trabalho...

  Responder comentário

• 3. Diferença

  Terça-feira, 06/05/2008, por Marcus Pequeno
  

  Desenvolvi o CSS baseado no Firefox que ficou perfeito, mas no IE da problema. No IE a fonte fica diferente (grande), estilos de borda da tabela tb fica diferente e outros ... usei este "CSS Reset" mas não resolveu o problema
  
  Qual a melhor forma de otimizar para que funcione em ambos navegadores? (Pelo menos no FF e IE)
  
  Agradeço desde já!

  Responder comentário

• 4. @Marcus

  Terça-feira, 06/05/2008, por Igor Escobar
  

  Esta é uma solução definitiva marcus, provavelmente o problema esta na sua codificação CSS e não no CSS Reset, acredito que dúvidas como estas poderam ser sanadas no fórum do iMasters ok?
  
  Abraços.

  Responder comentário

• 5. No caso de outros arquivos CSS??

  Quarta-feira, 16/07/2008, por
  

  Ola Igor!
  Parabéns pela materia.
  Achei interessante essa Sessão, sobre este assunto.
  Sou Desenvolvedor da área também e algumas vezes ja passei por apuros desse tipo, tendo enderizar de uma forma compatível a todos.
  Entretando minha Dúvida é o seguinte:
  Tenho arquivos CSS, que vinculo em minhas páginas.No caso da inclusão destes arquivos, estas opções que já tenho configuradas neles(margem,largura, etc...), continuam valendo, ou estes arquivos já padronizam?

  • Kenneth becker carletto - Quinta-feira, 18/09/2008

    

    Fala cara...
    Eu acho que esse lance de reset serve para deixar os navegados no mesmo ponto inicial. As formatacoes que vem depois disso, vêm da sua folha de estilos.
    

  Responder comentário

• 6. Css

  Sábado, 11/04/2009, por Max Oliveira
  

  Estou certo que todo webdesigner já teve problema com isso.
  Parabéns pelo artigo

  Responder comentário

Sobre o autor

Igor Escobar é Formado em Desenvolvimento de Sistemas para Internet pelo Instituto Brasileiro de Tecnologia Avançada. Desenvolvedor web da Visie, escreve em veículos de tecnologia como o Web Insider e mantém um blog (www.igorescobar.com).

Indique para um amigo

Tags relacionadas

crescimento publicidade iphone linux desenvolvimento microsoft apple twitter celular android tecnologia web php windows seguranca brasil mercado youtube criação ti internet yahoo lançamento google mobile 3g

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!