Words

CSS: A verdadeira linguagem de design na web
Parte I: a separação entre a apresentação e a estrutura dos documentos

por Molly E. Holzschlag

Ainda não aprendemos a "desenhar" a Web. Isto não quer dizer que não tenhamos feito um trabalho intenso no que diz respeito ao web design, usabilidade, progresso tecnológico e inovação. Mas, para chegarmos a este ponto na história da Web, tivemos necessidade de pedir directivas emprestadas a outros meios, encontrar formas de contornar as inconsistências dos browsers, e “moldar” a marcação (markup) tão para além da sua forma normal que quase a quebrámos.

A linguagem CSS (Cascading Style Sheets) existe há bastante tempo, mas o principal problema não tem sido o CSS, mas sim os problemas dos browsers suportarem o CSS. Com o lançamento dos browsers Netscape 6.x e a prevalência dos browsers IE (Internet Explorer), a par com outros browsers, tais como Opera, menos comuns mas que suportam CSS, podemos começar a olhar para esta linguagem como forma de solucionar pelo menos parte das nossas preocupações de design.

Como resultado da proliferação crescente de browsers que suportam CSS, cresce também a convicção que nós, web designers e programadores, seremos fortemente desafiados a olhar para o design na Web de novas formas. As más noticias são que, para aqueles com pouca experiência em CSS, há que aprender como escrever numa linguagem completamente nova.

No entanto, as boas noticias são que o CSS não é uma linguagem assim tão difícil de aprender caso já se trabalhe com HTML há algum tempo. E há mais boas notícias porque, depois de se aprender a usar CSS nos sites, o volume de trabalho diminuirá muito, assim como o excesso de código produzido, como são exemplo as numerosas tags ‘font’, e as imagens vazias que se usam para criar espaço em branco. Os documentos serão mais legíveis, mais fáceis de gerir, e terão tempos de carregamento e apresentação muito menores.

Uma paz à parte

O filósofo Bertrand Russell disse: “A guerra não determina quem está certo – apenas quem resta.”. Para os web designers e outros profissionais, foi a guerra entre browsers que lhes dificultou a vida, e em certos aspectos, levou mesmo alguns a desistir. Aqueles que ficam têm de encontrar um caminho mais estável.

Se procuramos inovação no design, temos de nos debruçar primeiro sobre o Web browser, pois é através do browser que os nossos designs visuais são apresentados. Temos também que observar as nossas práticas em HTML e XHTML. A essência da informação sobre a forma como os Web browsers, bem como os autores de documentos devem idealmente actuar, encontra-se sob os auspícios do World Wide Web Consortium (W3C), www.w3.org. Designadas como recomendações ou especificações, e por vezes referidas como standards, o HTML, o XHTML, o CSS, e muitas outras linguagens e metodologias, estão a ser desenvolvidas pelo W3C a par de directivas muito claras em relação ao seu uso.

Felizmente, tem havido suficiente discussão ao longo dos últimos anos sobre a importância de usar as recomendações do W3C como standards de facto para a Web. Muitos fabricantes de browsers, autores Web, e fabricantes de ferramentas começam a prestar atenção à criação de meios consistentes para os autores Web conseguirem resultados consistentes, independentemente do browser usado.

Para os autores Web que trabalham num tempo de mudanças constantes como o de hoje, algumas ideias que existem em termos de marcação estão a passar para o primeiro plano como uma preocupação. A principal questão em termos de CSS foi abordada pela primeira vez na especificação HTML 4, e defende como ideal a separação entre a apresentação e a formatação de um documento e, na sua versão mais rigorosa, exige essa separação. Isto traduz-se em deixar o CSS a cargo do design e o documento a cargo da estruturação mais linear do conteúdo.

Historicamente, os documentos Web não têm sido desenvolvidos desta forma. Em vez disso, temos desenvolvido e aprendido a confiar em elementos e atributos de apresentação, tais como o elemento “font” e os atributos para o alinhamento, cor, tamanho, entre outros. Esta é a prática mais comum na Web hoje em dia, mas irá idealmente mudar à medida que a fundamentação lógica e implementação do CSS cresce.

Compreender o que separar

Ao escrever documentos virados para a estrutura em vez da apresentação, usam-se provavelmente os elementos básicos da estrutura de um documento, que incluem:

Dentro do corpo (body) do documento, a marcação estrutural inclui os seguintes elementos:

Alguns aspectos de apresentação que idealmente serão separados em folhas de estilo incluem:

Existem muitos mais aspectos que dizem respeito à apresentação. Uma boa regra base: se um elemento ou atributo tem a ver com a forma como algo está desenhado e não com a forma como está estruturado, provavelmente será um elemento de apresentação.

Um exercício de separação

Para clarificar o ponto da apresentação versus estrutura, comecemos por observar um exemplo de HTML que usa elementos e atributos de apresentação (Listagem 1). Este documento foi construído com base nas directivas para HTML 4.01 para documentos de transição. Este tipo de documentos permite o uso de elementos de apresentação, apesar do HTML 4 não recomendar o seu uso sempre que se possam usar estilos.

Listagem 1: Exemplo de uma página em HTML 4.01 Transitional com elementos e atributos de apresentação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Documento com Marcação de Apresentação</title>
</head>

<body>

<h1 align="right">Marcação de Apresentação</h1>

<p align="right"><font face="Arial, Helvetica, sans-serif" size="2" color="blue">Aqui o conteúdo será alinhado à direita, num tipo de letra sans-serif de tamanho 2, e a azul.</font></p>

</body>

</html>

Apesar da estrutura do documento estar razoavelmente intacta, é fácil observar com apenas um parágrafo, o grau de complexidade que rapidamente o documento pode atingir usando elementos de apresentação. Acrescentando mais parágrafos, ou tabelas ou outros elementos, a página ficará excessivamente carregada de código.

Como os documentos HTML 4.01 Strict (rigoroso) exigem que não sejam usados elementos ou atributos de apresentação, vamos remover todos os componentes de apresentação. Uma vez retirados, verão que podemos usar a versão Strict do HTML 4.01 e ter um documento que respeita as recomendações do W3C.

Nota: Não se preocupe, vamos passar a apresentação para uma folha de estilo mais abaixo para mostrar claramente como funciona a separação.


Na Listagem 2, observe o documento HTML, desta vez sem elementos e atributos de apresentação.

Listagem 2: Exemplo da mesma página HTML da Listagem 1, mas sem elementos de apresentação e de acordo com a versão HTML 4.01 Strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Documento com Estrutura</title>
</head>

<body>

<h1>Documento Estruturado</h1>

<p>A não ser que lhe seja aplicada uma folha de estilo, este parágrafo será apresentado com os valores por defeito: alinhado à esquerda, fonte por defeito, tamanho e cor por defeito.</p>

</body>

</html>

No caso da Listagem 2, o documento está devidamente estruturado, de acordo com as directivas do HTML 4. Com a remoção dos elementos de apresentação, este documento poderá ser declarado como um documento HTML 4 Strict em vez de HTML 4 Transitional.

Recuperando o estilo

É claro que nossa página neste momento não têm qualquer estilo aplicado – está simplesmente devidamente estruturada. Assim, para lhe acrescentar estilo, recorremos ao CSS. Neste caso, usaremos uma folha de estilo externa. Primeiro que tudo há que criar as regras de estilo para cada elemento.
Comecemos pelo header, que queremos alinhar à direita:

h1 {
text-align: right;
}

Segue-se o parágrafo, que também queremos alinhar à direita:

p {
text-align: right;
}

Agora a fonte. Podemos acrescentar esta informação à regra que criamos para os parágrafos, uma vez que esta será a fonte que queremos usar no corpo do documento.

p {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: blue;
}

A Listagem 3 mostra a folha de estilo completa.

Listagem 3: A folha de estilo completa.

h1 {
text-align: right;
}

p {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: blue;
}

Escreva, ou copie esta informação num editor de texto ou de HTML. Grave o documento com o nome ‘apresentacao.css’. Logicamente, o documento tem de estar ligado à folha de estilo para que resulte. Abra o documento HTML e repare da forma como o elemento link é usado no topo do documento (head) para estabelecer o link para o ficheiro ‘apresentacao.css’.

Listagem 4: Estabelecer o link para a folha de estilo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Documento Estruturado</title>
<link type="text/css" rel="stylesheet" href="apresentacao.css">
</head>

<body>

<h1>Documento Estruturado</h1>

<p>A não ser que lhe seja aplicada uma folha de estilo, este parágrafo será mostrado com os valores por defeito: alinhado à esquerda, tipo de letra por defeito, tamanho por defeito e cor por defeito.</p>

</body>

</html>

Abra agora o documento HTML num browser e veja como os estilos alteram a apresentação. Certifique-se que usa um browser compatível com CSS.

Começando pela simplicidade, segue-se a complexidade

Apesar desta introdução ao conceito da separação da estrutura e apresentação de um documento ser bastante directa, existem muitas outras maneiras de abordar os estilos. De facto, o uso de folhas de estilo pode tornar-se bastante complexo, mas os resultados são muito compensadores. Num artigo futuro, abordarei o CSS tanto numa perspectiva teórica como em termos práticos, dando exemplos. À medida que se avança, percebe-se porque é que o CSS é uma tecnologia tão importante. O vosso entusiasmo ao ver o potencial do CSS irá inegavelmente encorajá-los a começar a usar ou alargar o vosso uso actual de estilos.

A autora

Molly E. Holzschlag é autora, instrutora e designer. Como membro do Web Standards Project (WaSP), Molly trabalha em conjunto com um grupo de profissionais da Web no sentido de promover as recomendações do W3C. Mais sobre as suas actividades em http://www.molly.com.

Versão Portuguesa por: Pedro Mendes
Link para a Versão original (em Inglês)
(publicado originalmente em Fevereiro de 2002)

Words

Referrers