03 abril 2009

7

Diferença do seu site nos navegadores


Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.

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

Leia Mais...

De uns tempos para cá tem se visto muito falar nos tais "CSS Resets". Antes de falar o que é o CSS Reset eu vou explicar por quê seu 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 numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja ;P) 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 mais 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 seu site.

Agora você ficou interessado né? (hehe)
No endereço abaixo você encontra um exemplo do CSS Reset em ação:
http://www.monc.se/tripoli/sample.html

Agora pegue o andereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS etc) que você tiver. Se você observar, logo notará 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
  • generic.css - re-constrói e atualiza a forma que o HTML é renderizado pelo navegador
  • ie.css - este arquivo contem regras a parte para que o css reset funcione no Internet Explorer.
  • print.css - torna o HTML legível quando impresso.

Como devo chama-los no meu cabeçalho?


HTML:




  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. <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 seu site e começar a definir as regras do seu layout.

7 Comentários:

Marcelo A. disse...

Cara, minha experiência somente foi com IE e Firefox... Nunca experimentei Opera, Safari e até quis mexer com o Chrome, mas acabei desistindo... Muito esclarecedor o seu post!

Desculpa pela demora em responder, falou?
Apareça lá no "Diz"!

Abraço!

JPSB disse...

Obrigado cara...
Apareço láh sim.. flw

Abraço!

Cisco disse...

Opa, mexo com webdesign desde 2003 e sempre me preocupei com os navegadores, claro que com blog fica dificil. enfim, gostei do tópico é mais uma preocupação que temos que tomar...


Abraços
Cisco
www.borarir.net

JPSB disse...

É... este template por exemplo, sofreu muitas modeificações até q funcionasse tão bem no explorer como funcionava no firefox... Abraço.

Gláucio disse...

Sempre tive este tipo de problema, acabo tento que rever o html para poder concertar ou minimizar as diferenças, no meu layout anterior por exemplo, havia vezes em que ao ser aberto pelo IE ficava totalmente mal configurado, mas ao ser aberto no Firefox nnão tinha este tipo de problema.

Eu nunca soube ao certo o porque disto e adimito ainda não tinha procurado saber. =/ Agora este post explicou muito bem. Parabéns pela postagem, pelo que vejo está fazendo um grande serviço.

JPSB disse...

Muito obrigado... Abraços!

Andress@♥ disse...

Valeu mesmo!!
Adorei o Blog



http://sonhandoacodadinha.blogspot.com/

Postar um comentário

Por favor deixe seu comentário:

Traduzir / Translate