O código CSS e a compatibilidade entre navegadores

É imprescindível, em um projeto WEB, testar as páginas do site em todos os navegadores, já que existem incompatibilidades entre eles, e o código CSS tem essa função

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

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.

Aprimore seus conhecimentos, acessando os Cursos CPT, da área Desenvolvimento de Sites e Softwares, elaborados pelo Centro de Produções Técnicas.

Entre os cursos, temos:

Curso CPT Desenvolvimento de Sites – Parte 2 – CSS

Curso CPT Desenvolvimento de Sites – Parte 1 – HTML

Curso CPT Desenvolvimento de Sites – Parte 3 – JavaScript

Curso CPT de Programação Java

Curso CPT Programação PHP

Curso CPT Avançado de Programação PHP

Curso CPT Lógica de Programação

Cursos Relacionados

Curso de Programação Java Curso de Programação Java

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Lógica de Programação Curso Lógica de Programação

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Programação PHP Curso Programação PHP

Com Prof. Allan Guerreiro Carneiro

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 1 - HTML Curso Desenvolvimento de Sites - Parte 1 - HTML

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 2 - CSS Curso Desenvolvimento de Sites - Parte 2 - CSS

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais
Curso Desenvolvimento de Sites - Parte 3 - JavaScript Curso Desenvolvimento de Sites - Parte 3 - JavaScript

Com Prof. Sérgio dos Santos

R$ 486,00 à vista ou em até 12x de R$ 40,50 sem juros no cartão

Frete Grátis 2 ou mais Cursos
Saiba mais

Deixe seu comentário

Avise-me, por e-mail, a respeito de novos comentários sobre esta matéria.

O CPT garante a você 100% de segurança e confidencialidade em seus dados pessoais e e-mail.
Seu comentário foi enviado com sucesso!

Informamos que a resposta será publicada o mais breve possível, assim que passar pela moderação.

Obrigado pela sua participação.

Outros artigos relacionados à área Desenvolvimento de Softwares

Últimos

Mais Lidos

Atendimento Online
Quer Facilidade