O código CSS e a compatibilidade entre navegadores

Não é possível você saber com exatidão como o website que você está desenvolvendo será visto em outro computador com um sistema operacional diferente. Na verdade, existem três fatores fundamentais que alteram a forma com que os documentos WEB são mostrados na tela dos clientes:

1º Os navegadores (Firefox; Internet Explorer; Opera; Google Chrome; ou Safari) e as suas específicas versões, uma vez que você pode ter em seu computador instalado o Firefox 20 e o usuário que vai navegar no site que você está desenvolvendo pode usar o Firefox 19 e assim por diante;

2º O sistema operacional (Mac, Windows, Linux);

3º A resolução da tela.

Estes três fatores são de fundamental importância e influenciam, em todos os aspectos, na exibição de um website na tela do usuário final. Por isso, é importante você ficar atento e testar, durante o processo de desenvolvimento do website, em diversos navegadores, Sistemas Operacionais e micros com resolução de tela diferente. Isso pode ser feito simulando em seu próprio computador ou então testando em computadores diferentes.

Entenda que um site visualizado no Firefox 20, em um computador em que está instalado o Sistema Operacional Windows, certamente não será exibido da mesma forma quando for aberto em um Sistema Operacional Mac com o Firefox 20.

Pode acontecer de você ter sorte e tudo o que você fez e testou em seu computador permanecer idêntico aos demais navegadores, Sistemas Operacionais e resoluções de tela. No entanto, não é aconselhável ficar dependendo de sorte.

Existem várias dicas de como manter o site visualmente igual em qualquer plataforma, navegadores e resoluções de tela. Vejamos as mais importantes:
* {
          margin:0;
          padding:0
   }

O código CSS acima deve ser a primeira linha de seu documento CSS. Isso significa que todos os elementos HTML irão começar com margem e padding zerados, uma vez que cada navegador atribui margens e paddings padrões aos elementos.

Os navegadores podem alterar a forma com que os documentos WEB aparecem na tela, pois podem apresentar diferentes versões.

Colocando esta regra, você está zerando os valores padrões dos navegadores. Você mesmo irá colocar as margens e paddings aos elementos que desejar. Você pode criar um documento chamado de “reset.css” e incorporá-lo ao documento HTML utilizando, por exemplo, o seguinte código:
 <link
          type="text/css"
          rel="stylesheet"
          href="reset.css"
          media="screen"
  />

Este código deve ser a primeira incorporação de documento CSS ao documento HTML. No documento “reset.css”, deve-se resetar todos os elementos HTML.

Vejamos:
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, tudo {
           margin: 0; padding: 0; border: 0; outline: 0;
           font-size: 100%; vertical-align: baseline;
           background: transparent;
 }
 body {line-height: 1;}
 ol, ul {list-style: none;}
 blockquote, q {quotes: none;}
 :focus {outline: 0;}
 ins {text-decoration: none;}
 del {text-decoration: line-through;}
 table {
           border-collapse: collapse;
           border-spacing: 0;
 }

É importante utilizar sempre o tipo rigoroso de documento (DOCTYPE strict), que cumpre a norma HTML/CSS para facilitar a renderização nos navegadores. Além disso, toda vez que você for utilizar a propriedade float para formatação de colunas, em um documento CSS, deve- se ficar atento a algumas regras básicas:

1.Se as colunas estão inseridas dentro de algum outro elemento, você terá de usar, obrigatoriamente, neste elemento “externo”, a propriedade display:table e a propriedade height:auto. Caso contrário, no Firefox, seu background pode não aparecer ou tão pouco obedecer à altura das colunas.

2.Se após as colunas, existir outro elemento com propriedade horizontal, formando uma linha, o elemento obrigatoriamente deve receber a propriedade clear: both, para que este elemento não incorpore a propriedade float inserida nas colunas e, com isso, fique logo abaixo delas.

Por Andréa Oliveira.