|
|
TUTORIAL CSS
SINTAXE
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.
e-mail para contato:
Caso queira, disponibilizamos endereço eletrônico
para contato. Alertamos para o fato de que nem todos
os e-mails recebidos serão respondidos de maneira
individualizada, sendo certo, contudo, que todos
serão atenciosamente lidos e examinados. Fale conosco
através do e-mail
tutoriaiscss@emprimeiro.com.br que estará
disponível até o dia 31 de dezembro do ano corrente.
Aguarde o nosso próximo tutorial - Layouts CSS
- que será brevemente publicado. Até lá.
Publicado: 14/07/2008
|
7 de 9
