Assinar
Hacks CSS são piores do que Tabelas
Quando falamos em tabelas podemos estar nos referindo à tabelas propriamente ditas, ou a todo o ritual de desenvolvimento de páginas em HTML da década passada. Tabelas às vezes são sinônimo de toda aquela prática antiquada, GIFs transparentes, tags <font> e tudo mais. Bom, tabelas ao pé da letra são somente tabelas.
Ok, isso é óbvio, eu sei! Mas é importante introduzir isso pra quebrar um grande tabu: o mito de nunca usar tabelas pro layout. Se formos pensar exclusivamente nas tabelas (sem levar em conta tags <font> e outras práticas ruins), não existe hoje em dia argumento forte à favor do Tableless (ao pé da letra).
Para criar um layout simples líquido com três colunas, é necessário usar um monte de hacks CSS. É um inferno que uma tabelinha (só uma, pra ajeitar as colunas) resolveria direitinho. As tabelas sempre vão se comportar daquela maneira, os hacks não, podem sofrer com futuras atualizações dos navegadores.
O problema de usar tabelas é principalmente semântico, a tabela não tem carga de significado pra exibir colunas de layout. Se levarmos em conta que hoje em dia há pouca utilização da semântica na internet, existem poucos sistemas que indexam as páginas, talvez seja desperdício usar hacks ao invés de tabelas, em alguns casos.
Além do mais, o cenário mudou. A semântica hoje é vista por máquinas mais inteligentes do que quando foi idealizada. Uma máquina ideal na época da criação do HTML não poderia identificar uma tabela de layout e ignorá-la, hoje pode. Aliás, é mais difícil pra uma máquina ignorar um div mal utilizado do que uma tabela mal utilizada.
Em outras palavras, eu priorizo os padrões, e na minha concepção um hack css é menos padrão do que uma tabela pra layout.
29/6/2007 às 5:38 pm
Meu caro, você esqueceu a função mais primitiva do CSS, que acho eu, foi o principal motivo de sua invenção: separar o layout do conteúdo.
Tabelas não é o mau do século, ela existe por um motivo: apresentar dados tabulares! E nesse ponto elas têm sua semântica. Mas ao se usar tabelas para se projetar um layout você esta juntando design e conteúdo, fugindo de sua real funcionalidade.
O HTML, como você bem sabe, tem como principais funções separar e adicionar semântica ao conteúdo. Sem bem projetado o HTML pode receber o layout que quiser, seja mudando em uma manutenção corretiva ou numa reformulação geral de designe.
Usar uma tabela para fazer um layout de 3 colunas pode ser mais simples? Talvez sim, mas se no futuro não quiser mais as 3 colunas? Provavelmente precisara mudar boa parte do HTML, tendo um grande retrabalho.
As boas praticas dizem que temos que separar os 3 patetas: conteúdo, design e programação. Ninguém disse que é simples, mas se são boas praticas, é por que existe sentido para isso. Eu ainda sofro hoje em dia dando manutenção em trabalhos que fiz antes de conhecer as boas praticas.
E sim, div mau utilizados podem ser tão ruins quanto usar tabelas, isso que separa as pessoas que acham que sabem (e que estão aprendendo ainda) dos verdadeiros profissionais.
E sinceramente? Hacks? Hoje em dia eu quase não preciso mais de hacks e quando preciso é pouca coisa que coloco em comentários condicionais para o IE.
29/6/2007 às 6:08 pm
Dessa vez terei que descordar de você. Tá que em alguns casos tabelas podem ser mais fáceis de se trabalhar do que o divs, mas isso não justifica destruir a semântica de uma página e voltar a decada passada.
Estamos lutando para espalhar a idéia tableless para organizar as informações e não só por ser -na maioria dos casos- mais fácil de trabalhar com o layout.
Se a pessoa não consegue fazer um layout css liquido funcionar, então estude, quebre a cabeça e faça direito, pq se fizer as pressas com tabela e depois quiser mudar vai ser uma bela dor de cabeça!
29/6/2007 às 6:23 pm
William, eu compreendo sim o problema da separação de conteúdo. O fato é que alguns hacks vão mais contra esse princípio do que as tabelas.
No exemplo que citei, do layout líquido com 3 colunas, a maneira mais tradicional de montar o HTML é com o famoso “container” ou “wrapper”, que não é um hack sujo como o * html, mas é um hack, é um hack semântico, afinal.. aquele container só existe pra que o CSS funcione. No mesmo exemplo das 3 colunas em layout líquido, é impossível mudar a ordem das mesmas sem mudar a ordem no HTML, usando apenas CSS suportado pelos navegadores atuais. Só esses dois problemas já levam por água abaixo a questão da separação de conteúdo da apresentação.
Luan, um div mal utilizado é tão destruidor de semântica quanto uma tabela mal utilizada. Usar um div “container” ou “wrapper” sem significado semântico é praticamente a mesma coisa que usar uma tabela. Em ambos os casos, existe uma porção do HTML feita somente pra ajustar o layout, e a mais simples de ajustar é a tabela.
29/6/2007 às 6:46 pm
É, a lógica seguida faz sentido, é a velha história do bom senso, até não é sair tanto dos bpadroes mas também não pode começar a usar pra tudo que nem era antigamente.
29/6/2007 às 8:41 pm
Hacks para mim são gambiarra no pior sentido da palavra, mas infelismente com a falta de padronização que temos hoje, muitas vezes são o único remédio, ou usa hacks ou mete tabela em tudo de novo.
30/6/2007 às 12:19 am
Os hacks vão contra qual sentido? Hacks por mais q possam ser chatos algumas vezes, se estiverem separados do conteúdo estão completamente por dentro das “boas praticas”, diferente das tabelas.
E como assim não é possível mudar a ordem das colunas em um layout líquido com 3 colunas apenas com CSS??? Se o HTML for bem projetado é possível sim, o grande problema é que como você já disse em outros artigos, muitas pessoas escravizam o HTML ao CSS, o que é errado! Se não fosse possível o Zen Garden não existiria!
Estou para ver ainda algum caso onde não fosse possível separar completamente conteúdo de layout. Se você conhece algum exemplo me mostre, quero ver.
30/6/2007 às 1:49 am
William, está bem. Você pediu um caso, aqui está.
É bastante improvável que alguém consiga criar um layout seguindo aquelas regras usando apenas o CSS dos navegadores atuais. É possível usando CSS3, mas nenhum navegador implementa.
Note que o HTML é completamente semântico e válido. Não é permitido por exemplo adicionar um “container” ou “wrapper” (escravizar o HTML).
Aguardo sua participação
30/6/2007 às 4:00 pm
Olha eu considero mais dificil utilizar tabelas do que o CSS com hacks, acredito que a utilização de tabelas para construção de layout nos escraviza a programas de edição visual(pois é muito complicado mecher com tabelas para layout em um editor de texto normal) e quando eles não estão disponiveis torna praticamente impossivel a manutenção do site.
A ideia dos hacks realmente é a gambiarra desgraçada, mas eles só acontecem por falta de conhecimento do programador ou por problemas de compatibilidade entre os broswer. E esses problemas tende a serem corrigidos com o tempo o que não se pode fazer é deixar de buscar soluções mais robustas.
30/6/2007 às 5:11 pm
Rodrigo, nem sempre é culpa do programador. Olhe por exemplo o arquivo que coloquei para exemplificar a situação. Pra resolver esse problema, você tem que optar por usar hacks css e perde a característica de separar conteúdo da apresentação.
2/7/2007 às 1:35 pm
Alexandre, aceito seu desafio, mas com uma condição, eu quero as seguintes modificações no HTML:
1.
<!–[if lt IE 6]>
<link rel=”stylesheet” type=”text/css” href=”iehacks.css” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
2. Crie 2 divs: o primeiro com id=”regrasDesafio” (com ou sem o H1), e outro com id=”bibliografia” (ou outro nome que lhe parece mais semântico para o texto final). Geralmente eu uso um div “pai” contendo todos os outros chamado “corpo”, mas não é obrigatório, agora os outros dois são.
Espero sua resposta para iniciar o desafio.
2/7/2007 às 2:34 pm
Pronto. Adicionei um div para as regras e um para as informações adicionais. Também coloquei os comentários condicionais como indicou.
O div pai é semanticamente desnecessário, já que o elemento <body> existe com esse propósito.
Aqui está.
9/7/2007 às 5:24 pm
[...] e até modifiquei o desafio de acordo com as dicas do desafiado. Como não obtive resposta ainda, resolvi dar mais visibilidade [...]
7/2/2008 às 9:54 am
Com as tabelas pode se fazer bastante coisa e misturando com css muito mais, as duas coisas podem se fundir, quer dizer, devem para se fazer sites dos melhores como o cifraclub e o baixaki. Aqueles são bonitos.
7/3/2008 às 12:17 pm
Totalmente a favor de layouts com a utilização de tabelas!!
28/8/2008 às 2:15 pm
[...] rjcorrea - apelando para o PHPalexandremagno - apelando para o Jquerymaujor - ótimow3css marcusvbp acordapraweb - uma boa discussão sobre o assuntocledison owebmaster - uma comparação interessante do HACK com [...]