Um dos sites que está presente em meu del.icio.us é o blog de desenvolvimento do pessoal do Opera.

E lendo um dos posts do blog, encontrei um que falava sobre criar tabelas totalmente acessíveis (texto em inglês), algo por qual me interessei muito.

Sugiro que vocês dêem uma lida, pois facilita a leitura de tabelas pelos leitores de telas usados por pessoas com deficiência visual além de não exigir nenhum esforço a mais no desenvolvimento. Para os mais interessados no Google, sim isso também ajuda ao Google entender melhor o que significa todos aqueles dados e, possivelmente, retornar seu site em buscas relacionadas à eles.

Além de ajudar na leitura da tabela, ela irá também facilitar na criação do CSS quando determinadas colunas possuem um estilo diferente, por exemplo. Isso evita a utilização de uma class em todas as colunas e linhas da tabela.

Apesar de o texto estar em inglês, quem não entende muito - ou nada - conseguirá se virar bem. Só de ler o código é possível ver o que cada coisa faz.

Não tem como, será sempre - um pouco de exagero - preciso utilizar do hack no CSS para o template ficar correto no IE6, IE7 e Firefox. Quando o IE7 foi lançado, ficou-se um tempo pensando que não havia hack para ele. Bobagem, a Microsoft não consegue fazer nada sem algum problema, que acaba nos ajudando.

Hack CSS para IE6

Como muitos devem saber, o Firefox não tem hack para CSS. Portanto, você deve fazer funcionar primeiramente nele, e de tabela tentar fazer funcionar no IE7 - que tem renderização muito semelhante.

Depois, se falhar no IE6, utilize do famoso hack do underline na frente da propriedade:

#elemento {
  background-color: blue;
  _background-color: red; /* apenas para IE6 */
}

Hack CSS para IE7

Caso fique algum problema no template para o IE7, use o seguinte hack:

#elemento {
  background-color: blue;
  *background-color: red; /* altera propriedade do IE6 e IE7 */
  _background-color: blue; /* apenas IE6 */
}

Perceba acima que o hack para IE7 funciona também para o IE6, por isso uma última regra para reverter o efeito da propriedade do IE7.

CSS Browser Selector

O CSS Browser Selector é um javascript que coloca uma classe específica para cada tipo de navegador na tag html.

Dessa forma, quando você precisa de um hack CSS para o IE6, seu CSS ficaria parecido com isso:

.ie #elemento { color: blue; }
.ie7 #elemento { color: red; }

Você pode ver mais exemplos no próprio site do desenvolvedor.

Já usei uma vez esse script, mas acredito que dessa forma seja mais fácil voltarmos alguns anos atrás, onde existiam dois arquivos CSS - um para o Firefox e outro para o IE.

É bem interessante, mas eu ainda acho melhor usar o hack padrão dos browsers, ou ainda tentar re-estruturar o HTML ou CSS, do que usar o script, que, por pura preguiça, acabamos não tentando resolver o problema - que muitas vezes é simples - e partimos logo para uma regra nova no CSS.

Conclusão

Já consegui diversas vezes criar um template sem a utilização de hacks. Mas quando o template é um pouco mais elaborado, as vezes não compensa sair dos padrões de HTML e dificultar a acessibilidade para poder validar o CSS.

O que vale é o bom senso.

Tem gente achando que não é mais para usar tabela, em circunstância alguma. Isso está errado, pessoal. No próprio site brasileiro tableless.com.br isso já foi dito e esclarecido.

Devemos parar de usar tabelas na arquitetura do site. Ou seja, não podemos usar as tabelas para separar o cabeçalho, menu, conteúdo e rodapé. Para isso que existe o div. Entretanto, devemos continuar usando a tag table para criar tabelas. Mas tem gente usando o div para isso.

Além de ser bem mais complicado e exigir muito mais código que uma simples tabela, o div representa um bloco e não uma tabela.

É preciso entender que cada tag no HTML tem sua função e que não podemos usá-las sem pensar se realmente ela está fazendo corretamente o seu papel.

Outro erro que geralmente vejo nos códigos HTML é a utilização do div para separar parágrafos de um texto. Para isso existe a tag p.

Se os webmasters continuarem a usar somente o div como tag default, precisaremos criar um divless.com.br (hum, acho que vou registrá-lo :).

Link relacionado: HTML 4.01 / XHTML 1.0 Reference