Por muito tempo o desenvolvimento de sites tem sido através de tabelas, mas poucos sabiam que a utilização correta do css, em conjunto com o XHTML e o JavaScript pode reduzir cerca de 50% da banda usada para carregar um site.
Aqui vão algumas dicas para voce que está iniciando o desenvolvimento com Tableless e para quem já desenvolve.
Leia com atenção que isso te ajudará muito.
1. Onde consultar especificação do CSS: 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[/i; outros já são de comportamentos particulares do CSS: padding, float, margin.
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 mesmo funciona.
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.
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.
7. Escolher o DOCTYPE correto: conforme o tipo escolhido, o seu site poderá ser renderizado mais rapidamente pelos browsers suportados. 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.
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.
Aqui vão algumas dicas para voce que está iniciando o desenvolvimento com Tableless e para quem já desenvolve.
Leia com atenção que isso te ajudará muito.
1. Onde consultar especificação do CSS: 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[/i; outros já são de comportamentos particulares do CSS: padding, float, margin.
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 mesmo funciona.
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.
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.
7. Escolher o DOCTYPE correto: conforme o tipo escolhido, o seu site poderá ser renderizado mais rapidamente pelos browsers suportados. 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.
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.