Tudo que você sabe sobre CSS está errado!!!

Isso foi o que Rachel Andrew, uma colunista britânica do site Digital Web Magazine “cuspiu” (acho que o melhor termo seria “vomitou”, ou daí pra baixo…) em seu artigo Everything You Know About CSS Is Wrong para o site.

Tudo se baseia na propriedade de CSS display de um elemento que for atribuído o valor table ou derivados.

A regra é a seguinte:

  • O elemento-pai deve ser do tipo display: table;
  • os filhos devem ser display: table-row, para linhas da tabela;
  • e dentro dos filhos display: table-cell, para se comportar como uma coluna da tabela.

Veja o código abaixo:

CSS

#main {
	display: table;
	border-collapse: collapse;}
#nav {
	display: table-cell;
	width: 180px;
	background-color: #e7dbcd;}
#extras {
	display: table-cell;
	width: 180px;
	padding-left: 10px;
	border-right: 1px dotted #d7ad7b;}
#content {
	display: table-cell;
	width: 380px;
	padding-left: 10px;}

HTML

⋮ news headlines column content…
⋮ main article content…

Na teoria, isso deveria funcionar como uma tabela, o que resolveria 90% dos nossos problemas pois economizaríamos um bom tempo deixando de fazer validações pra corrigir erros de posicionamento e altura de uma coluna de conteúdo.

Eu, como bom “desenvolvedor Client-side” (aprendi essa esses dias num e-mail sobre padrões da W3C, com o Bruno Dulcetti – que, por acaso é desenvolvedor client-side da Globo.com), fui verificar a notícia, e tive duas surpresas.

A primeira é que: na arquitetura de um site com estrutura Tableless você pode fazer com que suas DIV’s se comportem como células de uma tabela, e esse comportamento inclui: alinhamento vertical e horizontal (maravilha!!!) e controle de altura, ou seja, no fim das contas você faz uma tabela sem usar tabelas… E, segundo os testes que eu fiz funciona realmente! Fantástico…

A segunda surpresa (mas nem é tão surpresa assim, pois já era de se esperar…) é que essa façanha funciona em todos os browsers ‘alternativos’, com exceção para, óbviamente quem?! Quem?! Quem?!?!?!?! Internet Explorer!!! Como não poderia deixar de ser…

Então a incoerente Rachel ‘sei lá o quê’ esqueceu de mencionar que a tal propriedade só passará a funcionar a partir do Internet Explorer 8!!! Vejam só que absurdo!!!

Alguém aí usa, conhece agluém que usa, ou simplesmente já ouviu alguma lenda sobre alguém que já testou o Internet Explorer 8?!

Pois eu conheço!!!

Meu colega de trabalho Shiguenori (acho que é assim que se escreve), vulgo Japonês, já testou a versão BETA do tal IE8, e constatou que o IE8 não dá conta de renderizar sequer o site da própria Microsoft.

Mas nós, esforçados desenvolvedores de web, que prezamos pela boa qualidade e funcionalidade de nossos sites temos esperança de que algum dia, em um futuro breve, a Microsoft vai abolir essa filosfia babaca de desenvolver um browser exclusivo para interesses dela própria e coloque no mercado um browser que atenda às exigências da W3C e facilite nossas vidas.

Mas isso só vai acontecer quando o IE6, que vem na instalação do Windows XP, e o IE7, na atualização do XP e instalação do Windows Vista, forem abolidos completamente da face da Terra (o que, ao meu ver, está longe de acontecer), ainda mais em um país como o Brasil.

Quem me mandou o link foi meu grande amigo Johni Ecco, um dia desses, via MSN…

2 Comments

  1. ow, qdo vc vai postar sobre um super centralizador de DIV?
    sempre tenho dificuldades para centrarlizar um div em tds navegadores…
    o melhor q achei:
    http://www.granneman.com/webdev/coding/css/centertables/

    []s

    Comment by FelipeVR — May 8, 2009 @ 4:13 pm
  2. Não sei qual o mistério nessa coisa de centralizar div… é só definir a largura da div e colocar o margin: auto [...]
    olha o exemplo –> http://pastie.org/472650

    Comment by Ney Ricardo — May 8, 2009 @ 6:48 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.