Houve uma época que o desenvolvimento de layout de websites era totalmente baseado em tabelas. Muitos sites até hoje são assim, alguns por desconhecer as vantagens do CSS (Cascading Style Sheets) e outros por simplesmente usarem ferramentas que não tiram o proveito do CSS.
Jeffrey Zeldman afirma em seu livro Projetando Web Sites compatíveis que 99,9% dos sites são obsoletos.
Por incrível que pareça, com o correto uso do CSS é possível utilizar metade da banda de transferência de um site ou até menos.
O segredo dessa performance é a separação das responsabilidades em três:
- Estrutura – HTML/XHTML
- Apresentação – CSS
- Comportamento – ECMAScript (JavaScript)
Na realidade o que acontece é que a parte de comportamento (arquivos .js) e apresentação (arquivos .css) ficam em cache no browser do cliente, o que faz uma drástica diferença ao contabilizar toda a banda gasta para tranferir as informações de um site. As grandes empresas já perceberam isso e estão adotando essa estrutura, colhendo os frutos de seus benefícios. Experimentem acessar os seguintes sites e olharem o código fonte: HappyCog e Mozilla.
Para tirar proveito do CSS, é preciso conhecer essas 10 dicas:
1. Onde consultar especificação do CSS: é aqui ; e aqui tem bastante coisa também. Essa especificação e muitas outras de HTML, XML estão no site do World Wide Web Consortium, ou simplesmente W3C é um site fundado em 1994 com o objetivo de discutir e definir os padrões utilizados pela internet, hoje mais de 400 entidades participam desse projeto.
2. Conhecer os atributos mais usados: muitos deles são idênticos aos do HTML mesmo: width, background,border; outros são um pouco diferentes,mas com nome intuitivo: font-size ,font-family; outros já são de comportamentos particulares do CSS: padding, float,margin. Um bom lugar para ver exemplos de código é aqui.
3. Conhecer a lista de compatibilidade dos browsers: é muito bom trabalhar com browsers atuais: IE7,Firefox2, Konqueror 3, Opera 9 e Safari 3. Algo mais antigo que essa lista, como Netscape4, IE4~6 você pode ter problemas pois o CSS funciona de maneira incorreta ou nem funciona mesmo. Confira essa lista para entender melhor o problema.
4. Conhecer os principais hacks: pelo problema já citado, podemos ter comportamentos estranhos em certos browsers que não suportam 100% da especificação da CSS2. Daí surgiram um conjunto de gambiarras (hacks) para o CSS funcionar nesses browsers também. A melhor lista que eu conheço sobre isso é essa.
5. Saber a diferença de DIV e TABLE: o pessoal das antigas estava acostumado a montar sites somente com TABLE, agora começa a brincar com DIV achando que é a mesma coisa, tome cuidado. Ao contrário de uma TABLE, uma DIV pode invadir o espaço de outra DIV e comprometer completamente o layout de seu site.
6. Conhecer o movimento tableless: algumas pessoas consideram o uso de TABLE extremamente obsoleto, definindo todo o layout do site por DIV , o que é perfeitamente possível, mas não é nada trivial. Saiba mais sobre o assunto aqui e aqui.
7. Escolher o DOCTYPE correto: conforme o tipo escolhido, o seu site poderá ser renderizado mais rapidamente pelos browsers suportados. Esse artigo ilustra as opções mais comuns, na dúvida opte pelo tipo Transitional, que é mais flexível que o tipo Strict.
8. Conhecer as vantagens que o CSS oferece: além da economia de banda de transferência, tem a vantagem de oferecer fácil manutenção do conteúdo do site, uma vez que a estrutura está pronta (aliás é por esse motivo que, por exemplo, o WordPress possui tantos excelentes temas), e um número muito maior de opções de layout que o HTML. Veja os belos temas criados em CSS nesse site.
9. Começar a brincar com o CSS3: diversas melhorias estão previstas no CSS3, onde eu destaco a propriedade opacity e a resize.
10. Combinar o melhor dos dois mundos: o mundo perfeito não é composto inteiramente de padrões mais novos, simplesmente o melhor de cada um deles. Sair codificando somente em DIV pode ser interessante, mas vai dar trabalho no layout em colunas. Nesses casos, utilize as tabelas, mas deixe suas propriedades separadas no arquivos CSS.
Existem testes por aí que validam a compatibilidade CSS do seu browser.
O mais famoso desses testes é o ACID2 que poucos browsers conseguem passar; atualmente só a versão 3.0a2pre do Firefox passou, além do Konqueror, Opera e alguns outros.
Fernando Boaglio, para a comunidade. =)