HTML5 e CSS3
Talvez eu seja um otimista, mas acredito que nos encontramos em uma época revolucionária para o desenvolvimento web. A internet se proliferou pelo mundo graças aos avanços de banda larga e os diversos dispositivos capazes de navegar pela rede — celulares, tablets, televisões e videogames.
Diversas empresas do mundo digital impulsionam a evolução das tecnologias que usamos para criar uma web melhor. Profissionais em empresas como Google, Microsoft, Apple e Facebook trabalham exclusivamente em melhorias para os navegadores mais utilizados, além de participar da definição de novos padrões e disseminam bastante conhecimento junto à comunidade de desenvolvedores.
Caso você seja um designer sem muita experiência com desenvolvimento, ou um programador mais acostumado a trabalhar com linhas de comando e compiladores do que navegadores, me deixe explicar um pouco a importância de se aprender HTML e CSS.
Se você estiver trabalhando ou pretende trabalhar com tecnologia, acredito que boa parte — ou tudo — dos seus projetos será utilizado através de um navegador. Seja um sistema interno de um banco, uma rede social, um grande portal de notícias ou sites para campanhas de publicidade, o meio comum hoje em dia é a web, e é bastante interessante ter uma ótima base de conhecimento sobre desenvolvimento front-end (um dos termos usados para se referenciar a interface de uma aplicação) para contribuir para o sucesso dos projetos que você estiver participando.
Todo o HTML e o CSS que escrevemos ganha vida dentro dos navegadores utilizados por quem acessa nossas páginas e sites, por isso é bastante importante ter um bom entendimento de como eles funcionam e, principalmente, dos buracos no meio do caminho.
Desde os tempos do Mosaic (que eventualmente se tornou o Netscape) e das primeiras versões do Internet Explorer em 1995 sempre enfrentamos uma guerra de incompatibilidade entre os navegadores e a necessidade de padrões para garantir a interoperabilidade da web entre clientes diferentes.
🚀 Google Chrome
Mudou a perspectiva sobre o processo de atualização contínua, garantindo que a maioria dos seus usuários possuam a última versão do navegador.
🦊 Firefox
Começou a adotar um processo similar ao Chrome. O Firebug definiu o modelo básico para ferramentas de inspeção nos navegadores.
🌐 Internet Explorer
Atualmente na versão 9 (versão 10 em desenvolvimento), ainda se encontra bem atrás dos demais, mas as promessas para a próxima versão são interessantes.
Para quem está acompanhando a crista da onda, diversas propriedades e funcionalidades novas não se encontram completamente definidas e implementadas nos navegadores, mas isso não nos impede de utilizar versões "experimentais" delas. Para isso, cada navegador costuma expor essas novidades com prefixos específicos para diferenciar da implementação final.
O que a princípio pode soar como uma ótima ideia, se tornou um fardo para todos os desenvolvedores: escrever as mesmas linhas de CSS (até) 4 vezes, assim:
Enquanto hacks como esse podem parecer desnecessários e culpados por sujar o código, é preciso entender a importância deles. Já estamos desfrutando e testando essas propriedades enquanto elas são definidas e refinadas. O objetivo é, eventualmente, não precisar mais das versões prefixadas e se utilizar apenas a versão canônica das propriedades.
✅ Propriedades finalizadas
Propriedades como border-radius e box-shadow não precisam mais de prefixos para os principais navegadores de desktops.
🔄 Em finalização
Até o final de 2012, propriedades como animation, transition e transform estarão finalizadas e devidamente implementadas.
🔧 Soluções
Você pode mitigar ou automatizar o ruído e retrabalho gerado pelo uso de prefixos, seja com soluções como pré-processadores ou ferramentas em JavaScript.
Neste livro, vamos passar por diversas receitas e técnicas para você utilizar em seus projetos, e vamos ler e escrever muito código — muito mesmo. Usaremos tags e propriedades que estão em uso a anos, além de passar por adições recentes do HTML5 e do CSS3.
A minha intenção é mostrar exemplos práticos que provavelmente você chegou a ver ou irá usar no seu dia-a-dia, mas deixo essa avaliação a você. Eu sei que vários deles já me ajudaram uma ou duas vezes por aí.
Normalize.css • -prefix-free • jQuery
Normalize.css será utilizado como um estilo de base, para garantir uma consistência melhor entre navegadores diferentes. O -prefix-free será responsável por tratar os prefixos proprietários para as propriedades de CSS3 que ainda não se tornaram um padrão entre navegadores. Além deles, iremos precisar de um pouco de JavaScript para finalizar alguns dos nossos exemplos, e aí o jQuery entrará em ação.
Abaixo, segue o mínimo necessário de código HTML que iremos precisar para começar os exemplos:
Para o CSS específico de cada exemplo, você pode criar um arquivo com um nome relacionado ao que estiver fazendo e adicionar uma referência a ele, logo abaixo do normalize.css.
- ✅ Desenvolvimento web está em uma época revolucionária, com novos dispositivos e tecnologias.
- ✅ HTML e CSS são fundamentais para quem trabalha com tecnologia, pois a web é o meio comum hoje em dia.
- ✅ Navegadores como Chrome, Firefox, Safari, Opera e Internet Explorer têm diferentes níveis de suporte.
- ✅ Navegadores antigos (IE6, IE7, Firefox < 8) ainda são um desafio em alguns ambientes.
- ✅ Prefixos proprietários (-webkit-, -moz-, -o-, -ms-) são necessários para propriedades CSS3 experimentais.
- ✅ Ferramentas como Normalize.css, -prefix-free e jQuery facilitam o desenvolvimento.
- ✅ caniuse.com é a referência para verificar suporte de navegadores.
Domine HTML5 e CSS3 e faça parte do futuro da internet!
0 Comentários