CSS3 e o futuro da Web

O mundo do desenvolvimento Web passa atualmente por grandes mudanças. Com as aplicações Web exigindo cada vez mais dos navegadores, uma verdadeira guerra está sendo travada no client-side da Web. O até então onipresente Adobe Flash vem recebendo críticas e mais críticas. Com suas próprias alternativas, Microsoft, Oracle e Google tentam entrar nesse mercado. E, ainda parecendo velhos e ultrapassados em comparação a tudo isso, estão HTML, CSS e JavaScript.

Mas, se depender dos novos HTML5 e CSS3, o cenário será bem diferente no futuro. Com o grande apelo de serem padrões abertos implementados nativamente nos navegadores, essas novas especificações prometem simplificar bastante o desenvolvimento de aplicações ricas no client-side sem o uso de plugins.

Só para falar do CSS3, assunto desse post, podemos citar entre suas novas capacidades de formatação visual, as queridas bordas redondas, o uso de sombras, múltiplos backgrounds, layouts multi-colunas, novos seletores, uso de fontes externas, transformações 2D e 3D e animações. São recursos que facilitam bastante a tarefa do WebDesigner ao criar interfaces ricas e bonitas.

Embora não seja tão recente assim – o CSS3 data de antes de 2001 -, o suporte nos navegadores ainda é bem precário. Firefox, Safari, Chrome e Opera lideram o movimento, mas ainda estão longe de implementar todos os recursos. O IE tem algumas poucas coisas implementadas em sua versão 8 e uma promessa dos desenvolvedores de melhorar um pouco mais na futura versão 9.

Para demonstrar o uso de alguns recursos do CSS3, recriamos o logotipo da Caelum inteiramente usando recursos do CSS3, como border-radius, pseudo-elementos :after e :before e @font-face. O HTML da página é simplesmente:

  <div class="caelum">
    <strong>Caelum</strong>
    <em>Ensino e Inovação</em>
  </div>

E, sem usar nenhuma imagem (nem JavaScript/canvas/SVG), desenhamos o logo da Caelum. Veja a demonstração usando alguma versão recente do Firefox (3.5+), Safari/Chrome ou Opera (10.50+) e veja também o código CSS. E, por ser tudo CSS, sem imagens, podemos mudar o tamanho do logo a vontade, como mostra esse outro exemplo.

CSS3, HTML5 e outros tópicos da “nova Web” são também assuntos do novo treinamento da Caelum, WD-43: Desenvolvimento Web com HTML, CSS e JavaScript. O CSS3 é peça importante no futuro da Web. Seus diversos recursos mudarão a forma como fazemos WebDesign.

Tags: , , , ,

15 Comentários

  1. Fabio Oliveira 17/02/2010 at 21:23 #

    Salve, Ségio!

    Excelente post, estou trabalhando hoje em uma aplicação RIA data-centric e este assunto mais que me interessa. Para quem está no front, estar antenado nos novos padrões ajuda e muito a tomada de decisão. Na minha opinião, tanto o Flex quanto o Silverlight sofrerão com uma queda da sua fatia de mercado com toda a nova geração de frameworks RIA que surgirão baseados no HTML5 e CSS3. Aqueles que conseguirem se adaptar rapidamente, e neste grupo incluo o GWT, sobreviverão.

    Mais uma vez, parabéns!

  2. Sérgio Lopes 17/02/2010 at 23:44 #

    Update: Algumas pessoas reportaram um possível bug no Firefox mesmo na versão 3.6 onde ele não mostra a estrela corretamente. Parece que o bug está relacionado a configuração de Unicode da máquina (a estrela é um caracter Unicode). Foram detectados já problemas tanto em Windows XP quanto no Snow Leopard.

    E aproveito pra adicionar alguns screenshots de cortesia do BrowserShots:

    http://browsershots.org/http://downloads.caelum.com.br/logo-caelum-css3/caelum-css3.html

  3. Daniel Cukier 18/02/2010 at 12:49 #

    Como o Sérgio comentou, no Firefox 3.5 do Snow Leopard não aparece a estrela. E no meu Safari 4.0.4 a meia lua branca está esquisita… na versão de vários tamanhos. Só deu certo a versão grandona… :-)

    Parabéns pelo post!

  4. camilo lopes 23/02/2010 at 14:22 #

    pow legal o post sérgio, bem explicado! parabens!

  5. Edmar Felipe 03/05/2011 at 14:33 #

    Muito bom o post!

  6. Henrique Gonçalves 30/08/2012 at 14:22 #

    Estou no ultimo periodo do meu curso de Sistemas de Informação e meu TCC sera sobre CSS3. Por favor poderiam me dar algumas dicas para fazer um bom trabalho?

  7. Marcos Ribeiro 01/10/2012 at 18:58 #

    Pessoal da Caelum, não entendo porque não tem nenhum poste sobre GWT, o mesmo vem tomando forma, e vem sendo usado por muitas empresas, aqui na nossa mesmo temos um projeto ERP, com mais de 200 telas, todo sendo feito em GWT+SPRING+HIBERNETE+SENCHA GXT, Gostaria de pedir para o pessoal da caelum da uma atenção para o GWT, claro se não for pedir MUITO. rsrsrs, em sua versão 2.5 está realmente revolucionário…
    https://developers.google.com/web-toolkit/
    http://www.sencha.com/examples/

  8. maciel 25/10/2014 at 09:01 #

    muito bom, cara!

Deixe uma resposta