Peepcode sponsors akitaonrails.com

Vergonha com XHTML e CSS

AkitaOnRails / 11.Jan.2008 at 01:44am

English readers, click here

Eu tenho uma história vergonhosa hoje. É sobre 2 e-mails que recebi. O primeiro veio logo pela manhã de um dos leitores do meu site. Ele reportoou que minha homepage estava toda bagunçada no IE 7. De cara eu não me importei muito (“oh droga, sempre fica estranho no IE”). Eu normalmente me satisfaço quando vejo meu site funcionando tanto no Firefox quanto no Safari – o raciocínio sendo – “se funciona no Safari, deve funcionar no IE 7.”

Então, deixei passar. Agora vem a parte feia com o segundo e-mail, que recebi à noite, do meu chefe, Carl. Ele me reportou que estava falando com um possível futuro cliente e decidiu orgulhosamente mostrar meu website. Claro, o cliente abriu seu IE 7 e BUM! Vergonha! Para a surpresa do Carl, meu website renderizou completamente quebrado e inusável no browser do cliente! Eu posso imaginar a situação. E ele tentou ajeitar ainda dizendo: “mas eu garanto que ele sabe XHTML e CSS …”

Que droga! Eu não sou nenhum expert em web design mas eu sei um truque ou dois sobre XHTML e CSS bem formatados. Então eu abri os validadores de XHTML e CSS da W3C. 100 erros de XHTML e 2 de CSS! Muito Feio!

Isso não é bom. Vamos consertar. Felizmente os validadores dão boas dicas sobre o que está errado. Então deixem-me dizer, quase todos os erros foram nesses elementos:

  • quadro do Facebook
  • quadro do Twitter
  • quadro do Rec6
  • tocador de video streaming do Soapbox
  • tocador de apresentações do Slideshare

Parece que o validador odeia todos eles. Ok, felizmente o Facebook tem uma opção para mudar de um quadro javascript por uma imagem estática. Beleza. Twitter não foi tão fácil. Eu não estava com bom humor para brincar no código dele, então simplesmente tirei fora. Mesma coisa com o Rec6. Os players Flash de vídeo eu joguei pras páginas internas pra não quebrarem mais a homepage. Além disso, haviam alguns erros meus mesmos, tags que esqueci de fechar e esse tipo de coisa. Depois dessa limpeza (não demorou tanto, talvez meia hora), este é o status atual:

Desci de 100 erros de XHTML para Zero e de 2 erros de CSS para Zero. Parece que estou bem agora. Mas não por muito. Algumas das páginas internas ainda vão quebrar porque tem os tocadores de vídeo Flash. Minha reclamação é: sim eu poderia mexer neles até ficarem corretos. Mas esse não é o ponto: o ponto é que esses serviços oferecem o HTML para nós apenas copiarmos e colarmos em nossos websites. Então, por que eles não conseguem produzir tags compatíveis com XHTML, caramba!? Eu definitivamente não vou perder meu tempo consertando as tages deles!

Então, não terei mais Twitter ou qualquer desses tocadores Flash na minha homepage até que eles consertem essa vergonha. Nós bloggers ajudamos a promover esses websites, o mínimo que eles podem fazer é não quebrar os nossos!

No fim: agora meu website renderiza perfeitamente bem no Safari, Firefox 2 (tanto Mac quanto Windows) e no IE 7. Mas no IE 6 ele ainda não renderiza a barra lateral direito (dêem uma olhada). Mesmo agora sendo um XHTML e CSS “perfeitamente” bem estruturados, o IE 6 se recusa a renderizar corretamente … oh bem, o IE 6 normalmente não renderiza direito de qualquer jeito …

Update: O Carl me enviou uma dica interessante para Flash neste link. Coloquei meu Twitter de volta. Não é a melhor solução mas funciona (o melhor seria a solução ser default no próprio Twitter). E agora o XHTML não quebra.

del.icio.us, twit this, rec6, digg it, dzone, ycombinator, technorati, reddit, facebook, google bookmark,

12 Comments

Realmente Akita, as vezes até esquecemos de uma tag aqui outra ali, mas as incompatibilidades entre navegadores, inclusive entre as próprias versões do IE (5.5, 6 e 7) enche o saco, sem contar os htmls porcos que os serviços que você comentou geram, é ridículo….

Com relação as incompatibilidades dos navegadores esses dias atrás encontrei uma biblioteca que promete “resolver o problema”, ainda não testei, mas vale a pena dar uma olhada.

http://ie7-js.googlecode.com/

a versão IE8.js parece ser a mais completa pois trata o IE 5, 6 e 7.

Parabéns pelo seu blog, é uma grande referência!!!

PS: E seu novo livro, a quantas anda? já tem uma previsão?

Abração!


marcio gasparotto / 11.Jan.2008 at 03:47am

Oi Akita, realmente o IE sempre dá um trabalho extra. Nós nossos sites sempre nos preocupamos em testar no IE6 e no IE7 e frequentemente eles tem comportamentos bem diferentes.

Quando o IE7 saiu cheguei a pensar que ele tinha aprendido a fazer parser de html mas hoje não acredito mais nisso. É incrível o poder do IE de não respeitar nenhum padrão. Eles não conseguem nem fazer com que uma versão nova mantenha o mesmo comportamento da antiga !

Definitivamente acho que o IE deveria ser banido do mapa. A Microsoft podia criar vergonha na cara e por como browser oficial dela o Firefox. :-)

Li em algum lugar que o IE8 será revolucionário. Provavelmente ele não irá conseguir renderizar nem o site do google que é o mais simples que eu consigo imaginar.

Agora de curiosidade, as pessoas visitam o seu site ou acompanham por RSS mesmo ? Eu só uso o RSS mesmo, eu entro tão pouco que nem sabia que tinha tanta coisa na barra lateral ! :-)

Um abraço


tapajós / 11.Jan.2008 at 07:32am

É esse tipo de coisa acontece mesmo, afinal não é qualquer um que tem paciência pra ficar manipulando XHTML e CSS, mas temos que fazer né? :-)

Estou reformulando meu site e passei por esses problemas com o IE (pra variar), principalmente imagens png com transparência.


samir / 11.Jan.2008 at 08:33am

Opa, deixa eu ir olhar o meu no IE…


carlos brando / 11.Jan.2008 at 09:50am

Para quem tem paciência, sugiro testar seu site com o http://browsershots.org/.


caio moritz ronchi / 11.Jan.2008 at 11:00am

trabalhar com IE é um saco mesmo.

Fiz uns testes, e acho que em futuros projetos seria bom fazer melhor uso dos frameworks css como base para o trabalho.

O YUI tem o CSS grid, que é bacana. Mas achei o blueprint mais interessante.

Falou Marcus


marcus derencius / 11.Jan.2008 at 11:01am

Por curiosidade testei alguns sites “famosos”. Veja a quantidade de erros:

UOL:1347 Terra:577 Sun:93 RubyForge: 45 Receita: 43 Microsoft:29 RoR: 8 IBM: 0 Folha online: 0

Abraço!


glaucio guerra / 11.Jan.2008 at 08:58pm

o meu segundo blog tem vários erros de xhtml, o atual não tinha mas estou relaxado de novo. O problema sempre é com serviços de terceiros mesmo, seria interessante que pelo menos eles fornecessem um mecanismo de scripttag com json como as APIs do yahoo e google fazem.


christiano milfont / 12.Jan.2008 at 12:24pm

Akita, certa vez eu estava navegando aqui no seu blog e eu usava uma tool do firefox (webdeveloper) e por curiosidade resolvi validar sua página, deu uma porrada de erro mesmo, isso já tem acho que 1 mês +-, mais eu pensei que você sabia dos erros. Foi mal, da próxima (se houver) eu reporto. :P

[]s


nelson / 12.Jan.2008 at 02:00pm

Não quer dizer que se seu site tiver erros em validadores ele vai quebrar nos browsers. Tem que lembrar que tem muita coisa que são apenas recomendações e os validadores reconhecem como erros, tipo colocar alt em todas as imagens. Widgets em js é uma coisa que normalmente sempre gera problema nos validadores mas quase nunca quebram seu site. Seu site pode estar sem nenhum erro e ainda quebrar no IE ou ficar diferente do FF pq o IE lê as tags margin e padding diferente, e etc. Erro de css nos validadores provavelmente são so hacks para corrigir pau do IE, tipo _height ou _width, coisas que so vão aparecer no IE… isso gera erros nos validadores mas funciona perfeitamente. Outra coisa, os arquivos flash dão erro pq usam object embed essas duas tags não existem no padrão do W3C mas foram incorporados ao netscape e em seguida em todos os browsers a quase 10 anos atrás… por isso os erros, nao quer dizer que seu site vai dar pau por isso apenas que dizer que o validador nao reconhece esse tag mas os browsers sim. Oque o swfobject que o Carl te passou faz é olhar se vc tem o flashplayer e depois trocar o conteudo da div pelas tags object e embed isso não gera erros pois isso é feito com JS e o validador nao tenta interpretar as tags que eu disse. Entao ele serve para deixar conteudo flash válido para os validadores permitindo vc colocar aqueles iconezinhos XHTML e CSS no site mas a ideia principal dele é fazer substituições quando vc tem ou nao tem o flash e mais coisas como instalar o plugin automaticamente e etc… não é só para validar.


daniel / 23.Jan.2008 at 12:07pm

O HTML Validator, plugin do Firefox, mostra um ícone com o resultado das validação da página atual na barra de status do browser.

Com alguns cliques é possível obter o detalhamento dos erros ocorridos e dicas para corrigi-los.

Acho que não valida alterações realizadas via AJAX…

Muito útil!

http://users.skynet.be/mgueury/mozilla/


rafael walter / 28.Jan.2008 at 12:34am

o validor deu no www.animestgs.rg3.net como corrijo os eeros?


luciano / 08.May.2008 at 04:35pm

Leave a Comment