WhatsApp SAC (31) 98799-0134 WhatsApp Vendas (31) 99294-0024 Ligamos para Você Central de Vendas (31) 3899-7000
0

Seu carrinho está vazio

Clique aqui para ver mais cursos.

Torne realidade o sonho de viver do que você ama! 20% OFF nos cursos online + 5% OFF pagando no cartão

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

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.

Últimos Artigos

Artigos Mais Lidos

Fique por dentro das novidades!