Site Overlay

Ferramentas para uso do CSS3

Muitas das vezes, precisamos criar estilos do zero, pensar nas cores dos botões, nas divisões de colunas do página, no estilo das tabelas ou até mesmo coisas que podem ser mais trabalhosas, como cuidar para que a página funcione em browsers mais antigos, que não possuam os novos recursos de CSS 3 e HTML5. Só que para nos ajudar nessas situações, temos disponível diversas ferramentas que nos auxiliam nesse trabalho, como o Twitter Bootstrap, HTML5 Boilerplate, -prefix-free entre outras. Saber o que cada uma nos oferece é muito importante, assim podemos escolher qual delas melhor se encaixa com o projeto que está sendo desenvolvido.

Twitter Bootstrap

Um dos projetos de maior sucesso no GitHub, o Twitter Bootstrap é um toolkit criado por designers do Twitter e adotado por diversas empresas e equipes para acelerar o início de projetos por já incluir diversos componentes e facilidades de CSS, HTML e JavaScript. O projeto inclui um grid fluído, diversos botões e campos de formulários, abas de navegação, plugins em JavaScript e muito mais.

O projeto é desenvolvido usando LESS, um pré-processador de CSS que facilita a escrita de todo o CSS do Bootstrap, mas você pode baixar o arquivo CSS final e utilizar ele em qualquer de seus projetos.

Você pode usar o estilo padrão do Twitter Bootstrap sem precisar escrever nenhuma linha de CSS – apenas utilizando o HTML e as classes que a documentação do projeto indica. Depois disso, basta sobrescrever o que for necessário para adequar o visual às necessidades do seu projeto, como cores, tamanhos, bordas etc.

O Bootstrap é uma ótima pedida para desenvolvedores que não possuem tanto conhecimento (ou tempo para dedicar) em design e CSS. Se o quesito originalidade for importante para você, dedique um tempo para personalizar o visual do Bootstrap para o seu projeto. Toda a documentação e exemplos podem ser encontrados no site http://twitter.github.com/bootstrap/.

Com o sucesso do projeto, algumas alternativas surgiram com o tempo, disponibilizando soluções similares para os mesmos casos de uso do Bootstrap:

  • Foundation, feito pela ZURB – Toolkit similar ao Bootstrap criado por uma empresa com mais de 10 anos de experiência no ramo de web design – http: //foundation.zurb.com/;
  • HTML Kickstart, criado por Joshua Gatcke – http://www.99lime.com/;
  • Skeleton – um toolkit minimalista, que possui um grid responsivo e alguns componentes simples, como botões e abas. – http://getskeleton.com/.

Vale a pena baixar cada um desses frameworks, testar os seus componentes, grids e funcionalidades para descobrir se algum deles se encaixa mais com seu gosto ou até mesmo se você prefere criar todo o CSS por si próprio.

HTML5 Boilerplate

Enquanto frameworks como o Bootstrap e o Foundation possuem diversos componentes como grids, botões usando gradientes, sombras e outras novidades do CSS3, o HTML5 Boilerplate, que não é exatamente um framework, segue por outro caminho: um template simples, construído em cima de boas práticas para garantir compatibilidade e performance.

O HTML5 Boilerplate usa o Normalize.css como reset básico, classes utilitárias adicionais (para corrigir floats e substituição de imagens, por exemplo), jQuery disponibilizado pelo CDN do Google e mais. Apesar de não disponibilizar nenhum componente gráfico, ele é uma base sólida para começar um projeto novo.

Para fins de informação, CDN – Content delivery network – é uma rede de distribuição de arquivos com o objetivo de servir conteúdo contando com alta disponibilidade e performance, com servidores estrategicamente localizados ao redor do mundo, sendo uma ótima solução para servir arquivos estáticos como imagens, scripts e vídeos.

O CDN do Google é famoso por disponibilizar as principais bibliotecas de JavaScript usadas atualmente, como o jQuery, o MooTools e o Prototype. Além disso, é possível contratar a infraestrutura de empresas como a Amazon e Akamai para servir seus próprios arquivos.

Plugins em JavaScript

As vezes apenas HTML e CSS não é o suficiente, pois no meio de incompatibilidade com navegadores e APIs novas que não foram implementadas por completo, é possível preencher essas lacunas com JavaScript ou identificar o que o podemos ou não fazer com um navegador específico usando JavaScript para analisar o User Agent ou testando as APIs disponíveis.

Modernizr

Modernizr é uma biblioteca que permite identificar o que é suportado e o que não é suportado no navegador dos nossos usuários e adequar a experiência do seu site para isso, seja via CSS ou JavaScript. Por exemplo, identificar o suporte a tag e a qual formato se deve usar, como ogg, mp3 ou m4a. Ou, para navegadores que não suportam animações e transformações, aplicar um estilo alternativo para que o seu layout continue funcional para seus usuários.

O Modernizr permite duas abordagens: a primeira é através da adição de classes ao elemento html, identificando as funcionalidades disponíveis (em navegadores sem suporte à interação por toque, como os desktops, ele adiciona a classe no-touch) ou pela API em JavaScript no objeto Modernizr:

if(Modernizr.canvas) {

// Ok, podemos usar Canvas aqui.

} else {

// Canvas não está disponível neste navegador.

}

Para mais detalhes das funcionalidades que o Modernizr pode detectar e para baixar o código para adicionar ao seu projeto, visite http://modernizr.com/.

-prefix-free

É fato que nenhum desenvolvedor gosta de repetir o mesmo código para satisfazer 3 ou 4 prefixos diferentes toda vez que se vai usar um gradiente ou uma animação em CSS.

Para solucionar isso direto nos navegadores, Lea Verou, uma engenheira de front-end grega, desenvolveu uma biblioteca que altera o CSS da sua página, adicionando apenas os prefixos necessários. A maior vantagem disso é que você não precisa escrever as suas folhas de estilo se preocupando com qual prefixo você precisa usar para cada propriedade nova do CSS3.

Se interessou no -prefix-free? O site da biblioteca é http://leaverou.github.com/ prefixfree/. Interessado ou não, não deixe de visitar o blog da Lea Verou, ele conta com outras ferramentas e posts interessantes sobre JavaScript e CSS3 – http://lea.verou. me/.

Polyfills

Existem dezenas de outras bibliotecas que ajudam a preencher os buracos de funcionalidades ausentes em diversos navegadores diferentes que precisamos enfrentar, como suporte a SVG, LocalStorage, WebSockets, Geolocalização. As bibliotecas que implementam essas APIs em navegadores antigos ou que não possuem suporte receberam o nome de Polyfills.

Na Wiki do Modernizr no GitHub existe uma lista extensa de diversas implementações de Polyfills feitas pela comunidade, https://github.com/Modernizr/ Modernizr/wiki/HTML5-Cross-browser-Polyfills.

Pré-processadores

Infelizmente, o CSS não possui o dinamismo e alguns recursos de linguagens de programação como Ruby, Python ou JavaScript, o que faz muitas vezes com que o nosso código fique extenso e repetitivo. Para amenizar isso, existem linguagens intermediárias que adicionam alguns recursos interessantes na linguagem e ajudam a criar mais estilos, com menos códigos. Essas linguagens intermediárias são chamadas de pré-processadores, três são os mais conhecidos: LESS, Sass e Stylus.

Os três possuem muitas funcionalidades em comum, o que ajuda a transitar entre cada pré-processador para avaliar todos e escolher o seu favorito. Veja algumas das principais funcionalidades a seguir.

Seletores aninhados

Para reduzir a duplicação de seletores, os pré-processadores permitem que você aninhe os seletores de elementos contidos em outro elemento (como no caso abaixo):

header {

padding: 10px 5px;

nav {

float: left;

}

a {

color: red;

}

}

Com este exemplo, conseguimos gerar o seguinte CSS:

header {

padding: 10px 5px;

}

header nav {

float: left;

}

header a {

color: red;

}

Variáveis

Valores em comum, como uma cor ou um tamanho específico, que você tende a repetir com frequência na sua folha de estilo podem ser extraídos para uma variável. Assim, caso você precise mudar todos os vermelhos do seu site para roxo você não terá tanto trabalho.

@darkred: #990000;

@grid: 960px;

body {

color: @darkred;

width: @grid;

}

.sidebar {

width: @grid / 3;

}

.container {

width: @grid / 2;

}

Quando processamos este exemplo utilizando o LESS, as definições de variáveis geram os seguintes seletores:

body {

color: #990000;

width: 960px;

}

.sidebar {

width: 320px;

 

}

.container {

width: 480px;

}

Mixins

Mixins trazem muita flexibilidade a sua folha de estilo para repetir definições similares, executar cálculos ou gerar prefixos específicos sem repetir as mesmas definições diversas vezes.

transform() {

-moz-transform:arguments;

-ms-transform: arguments;

-o-transform:arguments;

-webkit-transform: arguments;

transform:arguments;

}

.slider {

transform: width 0.2s linear;

}

.popup {

transform: opacity 0.5s;

}

Com esta definição de mixin, o Stylus consegue gerar o seguinte código:

.slider {

-moz-transform: width 0.2s linear;

-ms-transform: width 0.2s linear;

-o-transform: width 0.2s linear;

-webkit-transform: width 0.2s linear;

transform: width 0.2s linear;

}

.popup {

-moz-transform: opacity 0.5s;

-ms-transform: opacity 0.5s;

-o-transform: opacity 0.5s;

-webkit-transform: opacity 0.5s;

transform: opacity 0.5s;

}

Apesar de toda a facilidade, os pré-processadores exigem alguns cuidados: Muitos aninhamentos complicam a leitura do seu código e gera seletores muito maiores do que você realmente precisa. Muitos mixins e variáveis distanciam demais o código que você escreve do código gerado, o que complica o debug e a resolução dos problemas que aparecerem durante o desenvolvimento.

Com o devido conhecimento de CSS, os pré-processadores podem ajudar bastante a tornar o seu código fonte mais flexível e inteligente, seja manipulando cores para facilitar a criação de gradientes, escrevendo prefixos de navegadores específicos como -moz e -webkit ou reduzindo a duplicação de código com mixins ou funções.

2

Source: scriptcase / Ferramentas para uso do CSS3

Comments

comments

Leave a Reply

Your email address will not be published.