por Diego Eis
Novembro 8th, 2007
Acabei de fazer uma Tabela de Compatibilidade de CSS..
Quem achar algum erro, por favor, me dá um alô.
Essa tabela será atualizada com outros elementos do CSS. Ainda tenho alguns elementos pré-definidos que faltam ser colocados. Assim que der mais um tempinho, vou colocar os links dos exemplos e atualizar a tabela com novas coisas.
Sei que a navegação vai ficar um pouco pesada. Preciso colocar links de âncora para poder facilitar a navegação entre as tabelas. Mas, por enquanto, isso deve quebrar o galho de quem está com dúvidas
[update] Seguindo a dica do Rubens, fiz uma versão para impressão da tabela. Agora ficou fácil imprimir sem gastar tanta tinta. 
Se ainda estiver interessado, leia também:
Este post foi criado
na Quinta-feira, Novembro 8th, 2007 às 01:53 e está arquivado em Artigos.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Excelente, só não entendi o HTML da página … tablemore 
.
Só pra pegar no pé.
É errado eu fazer uma tabela com qualquer outro elemento que não seja tabela…
Pois é Diego, mas tem quem ache que tableless != webstandards… ahahah vai entender esse povo
Diego, não sei se você conhece o Flex, é um esquema que une xml (mxml) com actionScript para criação de aplicativos.
No Builder do Flex eles aceitam CSS, e inumeras classes propostas para o CSS 3.0 são compatíveis lá, como as nossas tão sonhadas bordas arredondadas, degradee, e um monte de coisas …
Quando eu vi achei muito legal, mas é só pra constar mesmo hahaha
Ótimo trabalho essa tabela!
Um abraço!
Diego Eis, só para ficar perfeito faz um CSS de impressão, ai fica legal.
Muito bom, Diego.
Pra quem tinha dúvidas se o IE7 era mesmo a solução pra uma boa parte de nossos problemas, tá aí a resposta.
Achei alguns errinhos, mas depois volto aqui pra comentar. tenho que sair agora mesmo.
Gente, tableless nao é esquecer as tabelas e não usá-las nunca mais hehe
É usar cada atributo corretamente.. li pra uma lista, e um table… pra uma tabela e etc…
Quanto à tabela de compatibilidade de css:
GENIAL!!
ps: porque no firefox é tudo compatível? ![:-\](http://www.tableless.com.br/smilies/yahoo_question.gif ":-\")
“
Excelente! Muito obrigado, será útil.
Parabéns pela iniciativa, está ficando muito bom
Bom, muito bom, isso com certeza irá ajudar muita gente!!!!
@Jonatas: Tableless, não No-Tables.
@Bruno: Pois é, o Firefox é um ótimo navegador, apesar de eu ser usuário do Opera. Mas, convenhamos, os caras são meio “apressadinhos”, o CSS 3 ainda nem está pronto 
@Diego: keep up the good job
Genial!
Muito bom Diego! Mandou super bem!
Pois bem Bruno Francisco, realmente estou pensando seriamente nisso!
Estou desenvolvendo um site totalmente em tableless, porém uma parte dele não consigo fazer de jeito nenhum! Quem puder me ajudar..
Abraços a todos!
valeu..
MUITOOOO ÚTIL na luta do dia-a-dia contra os navegadores.
hehe
Abraços
Excelente. Eu tinha ciencia de todos os itens da tabela, mas haja cabeça para lembrar de todos. Vou imprimir e colocar na pasta de charts aqui. Muito bom mesmo.
Muito bom Diego!
Já tinha uma cópia do PDF de referência de CSS para distribuir pro pessoal que me perguntam qual a diferença entre margin e padding…
Vou guardar este tbm, abraço!
Muito bom, mas fica melhor aliada ao site abaixo
CSS Sandbox
Você clica nas propriedades e vê a alteração instantanemante, além do código.
Rodrigo Fante, culpe o péssimo termo, não o usuário…
Muito bom! Estava procurando por algo assim, hoje mesmo.
Ótima iniciativa. =)
Olá Diego! Sou usuário do Opera já faz algum tempo. Atualmente uso a versão 9.23 e queria
destacar alguns detalhes que observei na tabela.
1º Os seletores abaixo funcionam perfeitamente no Opera 9.23:
1: a[href^=http://visie.com.br] {color:red;}
2: a[href="visie"] {color:red;}
3: a[href$=html] {color:red;}
Uso esses seletores com frequência na construção de formulários e só para garantir fiz uma página antes de escrever o comentário para ter absoluta certeza. Eles funcionam mesmo.
2º Destaque para a definição do seletor do item 2 (acima):
No segundo caso, a definição da w3c para o seletor é
E[foo="warning"] » “Matches any E element whose “foo” attribute value is exactly equal to “warning”.”
Ou seja, não é “Seleciona elementos com atributos cujo valor contenha…” como descrito na tabela de compatibilidade. É “Seleciona os elementos com atributos cujo valor seja exatamente igual a…”.
Você mesmo disse isso em outra parte da tabela., no item “Seleção por valor de atributo. Seleciona elementos que tem um atributo com valor especifico.” E isso é outra coisa que não ficou claro, me parece que esse seletor está duas vezes na tabela. Com os exemplos:
input[type=text] {border:1px solid black;}
a[href="visie"] {color:red;}
São os mesmos seletores, certo? Se há uma diferença eu desconheço ou não entendi. Fica ai o registro =)
3º Versão do CSS para seletores do item 1 e 3:
No caso 1 e 3, os seletores fazem parte da definição 3 do CSS e não da 2. Isso pode ser conferido aqui: http://www.w3.org/TR/2001/CR-css3-selectors-20011113/ (Logo no começo da página)
Por fim, queria deixar um link que não sei se é de conhecimento de todos. Na parte de suporte no site do Opera, há uma lista de tudo que o navegador suporta (ou não). CSS, HTML/XHTML, EcmaScript, SVG e etc! Vale a pena conferir, segue o link: http://www.opera.com/docs/specs/opera9/css/
Desculpe a chatice Diego, mas identifiquei esses detalhes e como você pediu um alô… taí =/ . Conforme for sobrando tempo eu continuo analisando a tabela. Espero ter ajudado!
Abraços e parabéns pela iniciativa. =)
Impressionante o tanto de não na coluna do IE 6 
A Tabela está ótima !
FALOW !
Oii achei muito legal você falar sobre CSS pois estou aprendendo esse informativo é muito interessante continue assim
Muito legal a tabela, e será que existe alguma forma que forçe o IE a reconhecer os seletores, ou pelomenos parte deles?