Sintaxe II - Elementos e Regras CSS II
No final do Tutorial anterior propusemos a visualização de um exemplo nos navegadores Internet Explorer versão 7.0 e no Mozilla Firefox 2.0 ou versão superior. Veja abaixo o código fonte da página que utilizamos em nosso exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Emprimeiro - Sintaxe e Regras CSS - Exemplo3</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
body {
background-color: #ffffff;
}
p {
width: 250px;
font-family: verdana;
color: blue;
}
</style>
</head>
<body>
<p>Emprimeiro: aqui você estará sempre em primeiro lugar</p>
<br>
<a target="_blank" href="http://www.emprimeiro.com.br/">Veja a formatação
deste link</a>
</body>
</html>
Pois bem, a parte que nos interessa está negritada. No destaque você pode observar que nós temos um parágrafo (contido em <p></p>) seguido de um link (contido em <a></a>, separado do parágrafo por um espaço (<br>).
Veja como a página supracitada é exibida pelo navegador (browser) IE 7.0:
Veja agora como a mesma página é exibida pelo navegador (browser) Firefox 2.0:
Como claramente demonstrado, cada navegador renderiza (interpreta) o código fonte de uma maneira determinada, o que resulta na exibição de aparências distintas.
Esta distinção na forma de exibição de página com estrutura extremamente simples nos alerta para a importância que devemos dar no que se refere ao aspecto "acessibilidade", uma vez que a limitação de suporte à determinada linguagem pode resultar na impossibilidade de acesso parcial ou total ao conteúdo de um Web Site.
Oportuno o momento para destacar que o Órgão responsável pela edição de recomendações com vistas à padronização de codificação é o W3C - principal fonte de consulta para todos aqueles que produzem conteúdo para Internet. Igualmente importante enfatizar a imperativa necessidade de você visualizar as páginas web em diversos navegadores em suas diferentes versões, antes de publicá-las, de modo a evitar que um grupo de usuários que utilizam determinado navegador em uma certa versão, se vejam impedidos de visualizar as páginas de seu documento web da maneira desejada.
Teste a forma de exibição de seu WebSite nas versões mais utilizadas dos principais navegadores.
Veja que o aspecto relativo à forma de exibição de determinado documento Web é tratado sob o enfoque da acessibilidade: documento acessível é o documento que não apresenta limitação de acesso por determinada parcela da população, seja pelo fato de o usuário ser portador de necessidades especiais, seja pelo fato de haver limitação no tocante à hardware ou software - particularmente no que pertine aos navegadores.
Tais questões justificam, de maneira substancial e inequívoca, o movimento no sentido de observar as recomendações voltadas à padronização de codificação: é o processo de normalização - ou "standardização" - que poderá ensejar, em determinado momento, o estabelecimento de uma plataforma mínima comum a todos (ou a maioria) os browsers (navegadores).
O suporte que os navegadores, respectivamente, fornecem às CSS, estabelecem a medida do caminho percorrido em direção à uniformização das plataformas "mínimas" que podem descomplicar a vida de usuários e WebMasters e, neste sentido, lamentamos constatar que há um longo caminho a percorrer. Enquanto não houver uma situação minimamente estabilizada, teremos que nos haver com soluções para inúmeros problemas de acessibilidade.
Feitas tais ponderações, damos por encerrada a nossa incumbência de alertar os nossos leitores quanto às dificuldades de desenvolver documentos web em e para ambientes tão distintos. Para lidar com tal situação será necessário, durante o todo trabalho, submetê-lo a testes de acessibilidade mediante verificação de renderização de código em diferentes navegadores e versões respectivas.
A utilização de hacks* é inevitável se você quer ter seu site visto por diferentes navegadores.
*Um “hack” pode ser entendido como uma brecha em um browser, uma falha, um bug, que pode ser explorada de alguma maneira para forçar a fazê-lo o que ele naturalmente não faz. Os hacks (brechas) são utilizados pelos desenvolvedores web para contornar problemas de renderização de maneira a tornar possível um site ficar relativamente perfeito em diferentes browsers que possuem formas diferentes de interpretar o CSS.
Neste sentido, considere estas duas informações básicas e relevantes:
1 - A maioria dos bugs ocorre no navegador IE (Internet Explorer) versões 6.0 e anteriores - sem desconsiderar que o IE 7.0 apresenta problemas e, em menor proporção o navegador Firefox;
2 - Veja uma estatística, de nossos usuários, em relação ao uso de navegadores:
a) Internet Explorer - 75,75%
b) Firefox - 22,78%
c) Outros - < 1%
Analisando os dados de audiência de nosso site - coletados em 13/07/2008 - importa destacar que dos usuários que utilizam o IE, 74,47% já estão com a versão 7.0 e 24,44% ainda fazem uso da versão 6.0. Tais dados nos permitem constatar que, a despeito do considerável crescimento no número de usuários que vem aderindo o Firefox como seu navegador, há uma equivalência numérica entre os usuários que utilizam o IE (Internet Explorer) 6.0 e os usuários que utilizam qualquer versão do navegador Firefox.
Durante o processo de desenvolvimento de um site, submeta-o permanentemente à validação de código (X)HTML e CSS e verifique a aparência de seu site, pelo menos, nas duas ou três últimas versões dos principais navegadores.
Último aspecto a ser destacado é aquele ligado à sintaxe das regras CSS, particularmente no tocante à ordem da cascata e, por conseguinte, da herança: relação de ascendência e descendência que é determinante para a aplicação de regras de estilo a determinados elementos de um documento Web.
No próximo tutorial vamos tratar dos modelos de layout CSS, estudando os tipos, posicionamento e estrutura.
Publicado em: 14/07/2008 Última atualização: 10/03/2009