Rafael Fidelis

I write about programming and random things

Variáveis Com CSS No Webkit

| Comments

Essa novidade não vai parecer tão tentadora para quem já está acostumado a utilizar CSS Preprocessors como o LESS ou SASS entre outros. O Webkit que é uma das mais poderosas e melhores ’layout engines’, e que está presente em vários navegadores em diversos dispostivos , como por exemplo o Chrome e Safari, e nos navegadores do iOS e Android, está implementando suporte nativo para variáveis no CSS, e provavelmente os demais ‘layouts engine’ como o Gecko(Firefox) e Presto(Opera) também deve implementar algo do tipo rapidamente.

Sintaxe

A sintaxe ainda não é tão bonita e prática como a do LESS ou SASS, porém é bem semântica , e mantêm o padrão da sintaxe do CSS. Abaixo um exemplo de declaração de 2 variáveis , color e border-color :

1
2
3
4
5
/* Todas as variáveis definidas em :root são globais */
:root {
  var-color: #333;
  var-border-color: #fafafa;
}

Agora para obter os valor dessas variáveis, utiliza-se o método var() passando o nome da variável, ou então inserindo o prefixo $(cifrão), como se fosse uma chamada a uma variável no PHP ou uma variável global em Ruby, por exemplo:

1
2
3
4
5
.box {
  background-color: whiteSmoke;
  color: var(color);
  border: 1px solid $border-color; 
}

A recomendação da w3c para utilização de variáveis, é inserindo o prefixo $ antes do nome da variável, a notação var(variavel) é recomendada somente para casos em que existem variáveis não definadas , e então possam receber valores padrões, a sintaxe nesse caso seria:

1
2
3
4
.box {
  /* se a variável backColor não tiver sido instanciada, ou for invalida, recebe o valor #ddd */
  background-color: var(backColor, '#ddd');
}

Webkit

O Webkit utiliza um vendor prefix para a declaração e acesso as variáveis, como é demonstrado abaixo:

1
2
3
4
5
6
:root {
  -webkit-var-color: #333;
}
.box {
  color: -webkit-var(color);
}

Apesar do LESS e/ou SASS atenderem a todas(todas!) as minhas necessidades quando o assunto são folhas de estilos, creio que essa nova implementação será muito bem vinda!
Você pode conferir mais exemplos de utilização das CSS Variables no Test Suite do Webkit.
Para mais informações, você também pode visitar a especificação da W3C , nessa página você tem acesso a informação sobre escopo de variaveis, entre outros.

Fontes:
http://www.phpied.com/css-variables/
http://www.red-team-design.com/css-variables

Comments