21 jul

HTML5 e CSS3 – O futuro da internet

Categoria: - Comentários (8)

HTML5 + CSS3 - Por uma internet mais poderosa

HTML5 + CSS3 – Por uma internet mais poderosa

Atualmente os desenvolvedores podem fazer muitas coisas bacanas com HTML e CSS. Podemos estruturar nossos documentos de forma lógica e rica, sem depender dos arcaicos layouts baseados em tabelas. Podemos estilizar nossas páginas com beleza e riqueza de detalhes sem precisar recorrer a tags obsoletas como <font>, <b>, <center>, etc. Na verdade os métodos de desenvolvimento atuais vão muito além da era infernal da “Guerra dos Browsers“, protocolos proprietários, páginas que “piscam”, barras de rolagem coloridas e cansativas introduções em flash.

É, com certeza nós evoluímos bastante de lá pra cá e hoje podemos refinar nossos códigos aumentando a precisão semântica.

Vamos dar as boas vindas e adotar de vez a HTML5 e as CSS3, que felizmente vêm ganhando popularidade dia-a-dia, revelando cada vez mais o seu poder, nos mostrando um novo e excitante caminho rumo ao futuro da internet.

Diga adeus a sopa de <div>, diga olá para a marcação semântica

No passado era bastante comum vermos layouts — estruturados de forma semanticamente incorreta — baseados em tabelas. Mas graças ao pensamento revolucionário de Jeffrey Zeldman e Eric Meyer, desenvolvedores experientes que abraçaram métodos semanticamente corretos, cuja a estruturação era feita com elementos <div> ao invés de tabelas, a web começou sua evolução (pra melhor).

Eventualmente, projetos mais complexos exigem uma estruturação um pouco mais, digamos,  ”confusa”, trazendo <div> dentro de <div> e mais <div>, o que ficou conhecido como a “Síndrome da Sopa de Divs”.

Talvez você já tenha feito algo semelhante:

Embora ligeiramente “tosco”, o código acima serve para ilustrar a redundância estrutural na concepção de layouts com HTML4/ XHTML. Felizmente, a HTML5 “alivia” a síndrome da sopa de divs, dando-nos um novo conjunto de elementos estruturais. Esses novos elementos substituem <div>s sem sentido por definições mais precisas semanticamente e ao fazer isso, contribui também para a simplificação do nosso código CSS.

Veja como o nosso exemplo anterior evoluiu:

Como você pode ver, a HTML5 nos permite substituir aquela quantidade enorme de <div>s por elementos estruturais mais significativos. Esta especificidade semântica não só melhora a qualidade e o significado das nossas páginas web, mas também nos permite eliminar muitos dos atributos class e id que foram empregados anteriormente para orientar o nosso código CSS. Na verdade CSS3 torna possível eliminar praticamente todos os atributos class e id.

Diga adeus ao atributo class, diga olá a marcação limpa

Quando combinado com os novos elementos da HTML5, a CSS3 fornece aos desenvolvedores mais poder e controle sobre suas páginas web. Os elementos HTML5 nos permitem aplicar estilos em seções semelhantes sem a necessidade de definirmos uma classe ou id.

Para o nosso exemplo anterior (o sopa de divs), o código CSS ficaria assim:

Por outro lado, o nosso exemplo HTML5, o código CSS pode ter como alvo as regiões diretamente:

Além de mais prático, isso pode significar um ganho em performance. Mas claro que tudo depende de caso a caso. Muitas vezes é necessário o uso de ids e classes, principalmente se trabalhamos com javascript ou precisamos ter estilos mais específicos para cada região, que mesmo sendo seções iguais, podem ter estilos diferentes.

Enfim, não quero com este artigo, ensinar ninguém a usar a HTML5 e CSS3. Quero na verdade apoiar o uso dessas novas versões, para contribuir com a evolução da internet, porque acho que já passou da hora de ser 100% realidade.

Alguns links interessantes que vão ajudar você a conhecer melhor estas tecnologias

Comentários ( 8 )

  • Lindberg

    Gostei muito das dicas, parabéns pela iniciativa ! Estou aprendendo sempre, e quando encontramos gente boa, precisamos reconhecer.
    Muito obrigado …

Envie seu comentário

Resize-me!