Adeus tabelas, viva CSS: a evolução do Web design

Desde que eu recomecei a estudar o estado da arte em aplicações Web, um dos temas de maior importância que pude ver foi o crescimento do uso de desenho de páginas web baseadas em CSS, ou "Cascading Style Sheets". As páginas desenhadas usando corretamente os recursos de HTML+CSS tem várias vantagens: o código fica menor, sendo carregado e desenhado com mais rapidez no browser, economizando banda e tempo do usuário. Nesta filosofia de trabalho, não se usam tabelas para definir o layout do site; apenas divisões e estilos CSS. O código resultante fica mais limpo e fácil de manter. Outra grande vantagem está na separação entre a parte visual e o conteúdo do site: é possível mudar o visual do site totalmente sem ter que reescrever o conteúdo da página. Para quem desenvolve aplicações dinâmicas (com ASP ou PHP, por exemplo), isto permite que o visual da página seja modificado sem alterar o programa que gera o conteúdo.

O site css Zen Garden: The Beauty in CSS Design é uma demonstração viva do poder da combinação HTML+CSS. O mesmo site pode ser visto com diferentes folhas de estilo, gerando visuais completamente diferentes. Se você ainda não conhece, visite o site e clique nos exemplos, para ter uma noção da variedade de design que é possível. Os exemplos destacam algumas das vantagens do CSS, e desbancam alguns mitos que ainda persistem:

• Mudanças radicais de layout. No Zen Garden, algumas folhas de estilo colocam a coluna auxiliar to lado esquerdo. Outros colocam do lado direito.
  
• É possível usar gráficos em CSS. Todas as imagens de fundo são especificadas como parte da folha de estilo. Isso inclui imagens de fundo de colunas, preenchimentos automáticos, e desenhos altamente sofisticados de bordas para colunas. Não é necessário codificar estas imagens no código HTML, o que facilita a sua modificação posterior.
  
• Uso de colunas flexíveis. As colunas em CSS não são como as colunas de uma tabela. Elas são flexíveis, e podem se ajustar de forma muito mais natural à largura da tela. Em inglês, o termo é conhecido como liquid layout, e é uma das tendências de design atuais.
  
• Compatibilidade entre browsers diferentes. Mesmo com todas as particularidades, e com problemas conhecidos (sejam bugs, ou apenas diferentes interpretações das normas do W3C), é possível desenhar sites que aparecem com a mesma formatação em uma ampla gama de browsers. O código escrito à moda antiga (entremeado dentro do conteúdo da página) é quase impossível de ajustar.
  

Se o desenho baseado em CSS tem tantas vantagens, porque é que ele ainda não é amplamente utilizado? Há várias razões para isso, nenhuma delas boa suficiente para que esta situação se mantenha:

• Hábito. Muita gente que está no mercado já escreve páginas Web há anos, e não vê motivo para mudar ou aprender novas técnicas.
  
• Falta de disciplina. O desenho baseado em CSS exige uma disciplina própria, separando as atribuições do artista gráfico e do programador. Há uma grande tentação de embutir formatação no código que gera as páginas em uma aplicação Web; isto frequentemente previne o artista gráfico de conseguir os efeitos desejados. É preciso disciplina, e uma interface clara para que o trabalho seja complementar, e não ocorram interferências prejudiciais.
  
• Falta de designers treinados. Poucos designers conhecem CSS profundamente, e não se sentem confortáveis com o processo muitas vezes não-visual de escrever o código em CSS. No entanto, usando as ferramentas adequadas, e com um pouco de treinamento, é possível superar este problema. As vantagens em termos de liberdade de design compensam as dificuldades de adaptação.
  
• Ferramentas defasadas. Este talvez seja o motivo mais sério, e a principal razão pela qual muitas páginas continuam sendo escritas "à moda antiga". Os editores de páginas Web mais tradicionais não oferecem um ambiente que encoraje a separação de conteúdo e de estilo. Pelo contrário, é muito fácil sucumbir à tentação de selecionar elementos visuais e aplicar o estilo diretamente. O código resultante costuma ser complicado, lento e pesado, tanto em termos de tempo de transmissão como de renderização no browser. Finalmente, é quase certo que este tipo de página só será visualizada corretamente em um único tipo de browser, que é aquele que o autor utilizou para testar o visual (na maioria das vezes, o Internet Explorer).
  

Apesar de todos estes problemas, o uso do desenho baseado em CSS vem crescendo por seus próprios méritos. No caso de aplicações dinâmicas, o seu uso se torna quase uma exigência natural, uma vez ultrapassada uma fase natural de adaptação ao modelo de desenvolvimento. A economia de banda é outra vantagem importante, bem como a possibilidade de atender um universo maior de clientes, com telas variando desde o "pocket" até dimensões de 1280x1024 ou superiores, com um design que se não é idêntico, pelo menos é consistente, e preserva a intenção do designer.

Finalmente, para os céticos de plantão, uma amostra dos benefícios em um caso prático. A equipe da Atípico redesenhou a página do Terra usando CSS. Os resultados imediatos foram uma redução de 50% no tamanho total da página e consequentemente, no uso de banda e no tempo de carga da página (que caiu de cerca de 16 segundos para menos de 10 segundos). Se todo o benefício estético não vale nada, que tal um leve apelo para o bolso?