BoingBoing e o desastre do CSS3

Por Canha | 13 de outubro de 2009 | Tags: css3 | 10 Comentários

Recentemente, o site americano BoingBoing completou 10 anos e decidiu inovar no seu layout. Decidiram usar da nova tecnologia e utilizar CSS3 e o código @font-face, que permite utilizar uma fonte personalizada nos sites. Mas algo deu muito errado.

BoingBoing antes e depois da atualização de visual. Estilo mais retrô.

Embora a função @font-face do CSS3 seja suportado pelas versões mais novas do Safari, Firefox, Opera e Chrome, usuários do Windows XP não possuem a opção de anti-aliasing ligada (já que não é padrão no sistema operacional). Sem levar em conta que o @font-face ainda é um rascunho do CSS3 e ainda não é suportado por nenhuma versão do Internet Explorer. Levando tudo isso em conta, imagine se um site gigante decide reformular seu site inteiro usando CSS3.

A BoingBoing redesenhou seu site inteiro, mas os títulos dos textos apareciam de forma diferente em cada navegador de cada sistema operacional, principalmente em Internet Explorer no Windows XP – que ainda era uma das maiores parcelas do padrão de usuários que acessam aquele site. Muita gente gritou e esperneou que o site ficou “terrível”, sendo que na verdade era o navegador e sistema operacional delas que estava interpretando de forma errônea o código CSS.

Após muita gritaria, os donos do site decidiram remover aquela fonte que estava causando problemas e substituíram pela boa e velha Helvetica. Isto levanta a discussão: será que a web não está pronta pro HTML5 e CSS3?

Você, web designer, acha que já dá pra começar a implementar códigos CSS3 em seus sites?

Quem leu isto também leu:

Gostou? Por favor, compartilhe!

Canha

Criador e editor-chefe do Design Blog, atualmente é web designer freelancer. Nerd desde pequeno, ama tudo relacionado a internet, é apaixonado por design e está na área há 11 anos.

Acesse seu site Siga no Twitter

Deixe seu comentário!

http://www.eberfdias.com Éber Freitas Dias

“Sem levar em conta que o @font-face ainda é um rascunho do CSS3 e ainda não é suportado por nenhuma versão do Internet Explorer.”

Na verdade, @font-face é suportado desde o Internet Explorer 4…

Aqui tem um artigo bem legal sobre @font-face em geral:
http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

E aqui mais sobre o suporte dos browsers:
http://webfonts.info/wiki/index.php?title=@font-face_browser_support

[]‘s
http://twitter.com/marciobda Marcio B D A

Eu já fiz uns testes com @font-face e dependendo do navegador fica horrível mesmo. Além do que as fontes legais e gratuitas são poucas. Mas… tem muita coisa legal para ser usada com CSS3. Sempre que posso coloco um pouco dele nos meus trabalhos.
http://www.htmhelen.com Helen Fernanda

Como o Marcio disse, dá para usar um pouco de CSS 3 sim, desde que exista bom-senso. Tem que funcionar como um brinde para o visitante que usa um navegador melhor e não como um castigo para o usuário do IE.

Alguns dos recursos que acredito poderem ser usados sem traumas são as bordas arrendondadas, sombras e opacidade.

No caso do BoingBoing, além de faltar bom-senso, sobrou preguiça. Testar no IE antes pode ser chato, mas nunca matou ninguém.
Istvan de França

É eu ainda uso o CSS3 com moderação e tenho o mesmo pensamento da Helen
http://melinka.net tplayer

A maior questão ainda é que o CSS 1 é suportado a pouco menos de um ano por todos os navegadores (em suas versões mais atualizadas), o CSS 2 ainda está longe de ser suportado por todos e o CSS3 ainda nem foi definido por completo. Logo não faz sentido utilizar ainda, o CSS 2 ainda vai , mas o CSS 3 é desperdício de tempo atualmente.
http://glauberkelvin.wordpress.com Gláuber Kélvin

Rapaz! Eu acho que deve ter sido horrível. Acho que a equipe desse BoingBoing aí não teve competência. Era pra ter feito testes e mais teste antes de acabar com tudo duma vez (entre aspas).

Abraços.
thiago

eles não substituíram pela helvetica. aqui em casa abriu com arial, mesmo tendo a helvetica instalada.
http://www.twitter.com/mcarneiro/ Marcelo Carneiro

Além do que o Éber lançou de ser suportado a muito tempo pelo Internet Explorer, existe uma questão mais importante que a possibilidade que é a escolha: existem fontes para "impressão" e para "tela", além das versões de famílias conhecidas, como a helvetica, que tem suas versões para "tela". E a fonte para tela decente, deve ficar bem com e sem anti-alias, e ter apresentação em tamanhos reduzidos (com base em pixel): vai muito do designer ter conhecimento das fontes, do público, das variações que o site pode ter nas diferentes configurações.
Pingback: PixDesign Blog! » Blog Archive » Tipografia na web
Ewerton Bruno

Na verdade a web já esta pronta. O que falta é os usuários "OLD SCHOOL" se atualizarem e perceberem que eles só tem a ganhar utilizando o sistema mais atual, e mais importante que isso, um navegador atualizado.

Isso seria uma glória para os desenvolvedores que não precisariam mais ter que adaptar seus projetos para padrões "fora de moda".