Helder Santana

O WebKit é um projeto Open Source para testes de futuros releases do Safari. Ele se destaca por possuir diversas inovações, utilizando um repositório com versões geradas diariamente (nightly build).

Em uma de suas últimas versões, tivemos uma novidade, que foi a implementação do suporte a variáveis dentro de folhas de estilo. Esse novo conceito já vem sendo sugerido desde a referência do CSS2.1, a cerca de 10 anos atrás, mas nenhum browser havia se manifestado quanto essa idéia. Ponto para o WebKit!

O que ganhamos com variáveis

Simplesmente passamos a ter uma maior dinâmica entre arquivos CSS, ou seja, uma vez que variável for definida, ela pode se repetir dezenas de vezes dentro e fora de um arquivo, contanto que tudo se encontre em hierarquia.

Imagine se definimos uma div com classe equivalente ao céu e logo após uma ao mar. Resumindo bem, teríamos dois elementos de cor azul e então faríamos algo desse tipo:

div.ceu { background-color: blue; }
div.mar { background-color: blue; }

ou

div.ceu, div.mar { background-color: blue; }

Com uma variável, poderíamos evitar que o background-color fosse definido várias vezes como blue:

@variable { corNatural: blue; }
 
div.ceu, div.mar { background-color: var(corNatural); }

Ou até mesmo manter um arquivo externo com nossas nomeclaturas pessoais de cores.

/* arquivo com um @variable definindo todas as cores */
@import "cores.css";
 
div.ceu, div.dia, div.noite { background-color: var(corCeu); }
 
div.mar, div.agua { background-color: var(corAzul); }

Espero que isso vire um padrão. Vamos esperar!

Obs: Não é de hoje que o Webkit impressiona, a meses atrás foi implementado o suporte a css animado com svg e esse mesmo já está ativo desde o Safari 3.1.