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…
























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
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