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?
Fique por dentro de muito mais!
Assine nosso feed RSS ou seguia o Design Blog no Twitter para ficar sempre ligado nas novidades no mundo do design!
8 comentários
“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
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.
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.
É eu ainda uso o CSS3 com moderação e tenho o mesmo pensamento da Helen
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.
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.
eles não substituíram pela helvetica. aqui em casa abriu com arial, mesmo tendo a helvetica instalada.
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.
Um Trackback
[...] O único problema ainda na versão atual do @font-face é que em alguns navegadores ele é dependente do anti-aliasing do sistema. Por exemplo, no firefox 3.5 num windows XP com a opção cleartype desligada, a maioria das fontes fica horrível. Por sorte, do Windows Vista em diante, a Microsoft optou por deixar o cleartype ligado por padrão. Mas o problema é que se for usada num site onde grande parte dos usuários utiliza windows xp, teremos problemas como esse aqui. [...]
Regras
Antes de comentar, por favor atente-se as regras abaixo:
Os comentários neste artigos assim como em qualquer artigo deste blog não necessáriamente refletem a opinião dos autores e donos deste blog, como consta na Política de Privacidade e Uso deste blog.