Como obter compatibilidade entre diferentes navegadores web? July 9


Uma tarefa bem chata, cá pra nós, para todo webdesigner é deixar o site compatível com vários navegadores, O site está redondinho no Firefox mas no Internet Explorer 6 e no Safari, o site está totalmente torto. Ai ai ai.

Para lhe ajudar, aqui estão dicas que são fundamentais para tornar nosso site compatível com vários navegadores. Esta dica vem do australiano Antony Short que fez um resumo de algumas dicas básicas para evitar  problemas no momento de conceber um site e evitar o mal funcionamento entre os diferentes navegadores:

1.  Utilize sempre tipo rigoroso de documento (DOCTYPE strict) que cumpram a norma HTML / CSS

2. Utilize sempre um “reset” no início de seu css

3. Use -moz-opacity: 0.99;  sobre elementos de texto para limpar e renderizar no Firefox, e text-shadow: #000 0 0 0 no Safari.

4. Nunca redimensionar imagens em HTML ou CSS
   

5.  Checar rendereização de fontes em cada navegador. Não utilize a fonte Lucida
   

6. Tamanho do texto como % no body  e em ao longo da folha de estilo.

7.  Todos os divs que são flutuantes, deve incluir: display: inline; e overflow: hidden;

8. Os containers devem ter: overflow: auto

9. Não use seletores fantasia CSS3
 

10. Não usar PNG’s transparentes, a menos que tenha colocado alpha.

 

Para o alto e Avante!


Esse texto te ajudou? Então porque não pagar um cafezinho para o Bruno? Aceitamos moedas.


Postado em CSS por Bruno Ávila | 7 comentários


7 comentários

  1. Guilherme Jul 9

    Ótimas dicas

  2. Luiz Jul 9

    Seria interessante citar, que há como desenvolver scripts em javascript, para fazer o css de acordo com cada browser.

    Um Abraço!

  3. rogerio Jul 9

    e se fisessemos tudo em tbleless?

  4. anderson faro Jul 15

    Boa Bruno e pessoas.

    boas dicas bruno essas ai. parabens.

    gosto sempre de lembrar sempre que é se suma importancia desde do comeco da construcao do site testar sempre nos navegadores, ñ deixar pra depois, evitar os atrazos e os estreses

    valew!

  5. Andreia Jul 16

    Olá Bruno,

    Esse post caiu como uma luva… pois estou desenvolvendo um site e estou testando-o em 3 navegadores: IE7, Firefox 3 e Ópera 9,5.
    Você acha suficiente os testes nestes 3 brownsers ou é necessário fazer em mais algum, como o Safari?

    Ainda não sei muito sobre CSS (mas estou estudando) e, a maioria das dicas citadas no seu post me deixaram na estaca zero do mesmo jeito pq não tenho tempo hábil para aprender CSS da maneira como deveria. Tenho que entregar o site na próxima semana e, após meus testes nos navegadores, o Internet Explorer 7 é o que tem me dado mais dor de cabeça. Ele não assume as regras dos links, nem das fontes, e to ficando doida com isso.

    No primeiro comentário desse post, o “Luiz” diz que existe uma maneira de burlar o problema dos brownsers com um JavaScript. Se alguém puder me ajudar dizendo se existe e onde posso encontrar um script desses para que eu me baseie e possa resolver o problema do site.

    Agradeço pela atenção e colaboração dos amigos de profissão, pois sabem como é difícil o início de qualquer webdesigner ainda sem grande experiência.

    Um abraço a todos!

  6. Rafael Lima Aug 15

    Leia ai e depois nos tiramos nossas duvidas blz

  7. Jeferson Naztick Aug 15

    Olá … Bruno

    eu desenvolvi um site que funciona no firefox no iE7 e no opera 9.0 mas no IE 6 ele perde todo css dele …

    será que seria possivel se vc tivesse um tutorial de como fasso essa correção por favor estou desesperado
    obrigado agradeço sua atenção e aproposito parabéns pela matéria

Comente!

Email