CSS3 e o futuro da Web

Postado em 17. fev, 2010 por em Web Design

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: , , , ,

11 Respostas para “CSS3 e o futuro da Web”

  1. Fabio Oliveira

    17. fev, 2010

    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. fev, 2010

    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. fev, 2010

    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. fev, 2010

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

  5. Edmar Felipe

    03. mai, 2011

    Muito bom o post!

Trackbacks/Pingbacks

  1. CSS3 e progressive enhancement | blog.caelum.com.br - maio 6, 2010

    [...] o meu último post sobre CSS3, muita coisa tem acontecido no mundo dos browsers. A guerra que Steve Jobs começou contra o Adobe [...]
  2. Prévia de 2010 : Design | Nak - julho 16, 2010

    [...] a utilização de diferentes bibliotecas de javascript ou o uso experimental de códigos HTML 5 e CSS 3. As tendências tipográficas como um todo são muito difíceis de prevermos, e por isso mantém-se [...]
  3. TOP 10: Os melhores posts de 2010 da Caelum | blog.caelum.com.br - dezembro 21, 2010

    [...] CSS3 e o futuro da Webpor Sérgio Lopes, em 17/02 [...]
  4. Evolução dos navegadores e estatísticas de acesso | blog.caelum.com.br - março 15, 2011

    [...] usuários estivessem nas versões mais recentes dos navegadores mais modernos, para abusarmos de HTML5, CSS3 e outras novidades. Mas a realidade, infelizmente, acaba sendo [...]
  5. Telma Ferreira – 60360 | CSS 3 – lab2 - abril 12, 2011

    [...] http://blog.caelum.com.br/css3-e-o-futuro-da-web/ [...]
  6. JBoss In Bossa 2011 – Eu fui! | blog.caelum.com.br - outubro 11, 2011

    [...] os dados na Session, agora já existe cache distribuído. XML? E JSON, já ouviu falar? HTML5 e CSS 3 já é realidade. SGBD? Bom, que tal NoSQL? #gallery-1 { margin: auto; } #gallery-1 .gallery-item [...]

Deixar uma Resposta