Variáveis nativas no CSS: elas existem?

Desde 2012, o W3C tem trabalhado na utilização de variáveis dentro do CSS. Você sabe utilizar as variáveis nativas? Neste post, abordaremos o que são, seu uso, sintaxe e limitações.

Por PATRÍCIA GOMES DOS SANTOS SILVA

 

Graças a constante evolução do CSS, temos um novo recurso que poucos conhecem, apesar de ser uma questão antiga. As variáveis nativas do CSS, hoje em dia tem um bom suporte dos navegadores modernos. Mas antes de falar das variáveis nativas, é importante lembrar que um dos principais motivos do uso de pré-processadores de CSS é o fato de permitir ao desenvolvedor fazer uso de variáveis no CSS, assim, podemos criar variáveis que nos permitem alterar cor, tamanho de fonte, entre outros.

Tendo criado uma variável, podemos usá-la  em todo o CSS, desta forma, facilitando manutenção, tornando as alterações consistentes, além de ser uma ferramenta poderosa no dia-a-dia do desenvolvimento Front-end.

 

Desenvolvimento

 

Atualmente temos variáveis no CSS puro, ou seja, de forma nativa, e que estão disponíveis na maioria dos navegadores modernos. Oficialmente essa variáveis são chamadas de CSS custom properties e popularmente são conhecidas como CSS variables (variáveis CSS).

 

Beleza, agora algumas dúvidas que podem surgir na cabeça de muitos:

 

“O que a variável CSS nativa resolve? Quando temos pré-processadores?”

“Porque ainda usar pré-processadores quando agora temos variável CSS nativa?”

 

O ponto aqui, é que existem algumas diferenças fundamentais que devem ser esclarecidas entre usar variáveis de pré-processadores e variáveis nativas.

 

As variáveis de pré-processadores são dinâmicas dentro do pré-processador e seu escopo é léxico, ou seja, depois de compiladas são apenas valores estáticos dentro de um arquivo “.css”, enquanto que as variáveis nativas, são variáveis  dinâmicas dentro do navegador e estão no escopo do DOM.

 

Como usar uma variável CSS nativa?

 

Uma custom properties é qualquer coisa que começa com dois hífens “–” e as usamos para declarar uma variável. No exemplo a seguir, foi criada uma classe CSS chamada “header” e foi criado uma variável CSS chamada “–header-color”.

css_variáveis_nativas

 

Para usar a variável, utilizamos a função var(), passando a variável criada como parâmetro, veja no próximo exemplo que está sendo setado o background-color com o valor da variável “–header-color”.

 

variáveis_nativas

 

IMPORTANTE!

A variável tem escopo, no exemplo, foi criada uma variável dentro da classe “.header”, então essa variável só irá funcionar dentro do escopo desta classe, que será dentro do “.header {…}”, se tentar utilizar fora, não irá funcionar. 

 

Para resolvermos isso, podemos usar uma técnica que permite criar uma variável com escopo global, ou seja, uma variável que poderá ser utilizar em qualquer lugar do arquivo CSS, no caso, o fabuloso seletor :root que é a raiz do documento HTML. Poderia ser utilizado também o seletor html, body, mas o :root é o mais global de todos em grosso modo.

 

variáveis_nativas

VANTAGENS

  • Não precisa utilizar pré-processador;
  • Não precisa declarar o mesmo valor em diversas partes do código;
  • Podemos mudar o valor da variável com Javascript, veja o exemplo abaixo.

 

Na marcação HTML a seguir, temos um bloco div e um botão, ao clicar no botão, será alterada a cor de fundo da “div .inner”.

 

variáveis_nativas

 

No próximo exemplo temos a função “handerColor()”, que será a responsável por essa mudança de cor.

 

variáveis_nativas

 

Na linha #2, foi selecionado a “div .inner” em seguida na linha #3, foi alterado a variável “–background” para a cor vermelha.

 

O legal aqui, é que todos os elementos na cascata que utilizam essa variável, serão alterados também. Outra vantagem é que podemos atualizar o valor de uma variável dentro das “@media queries” com a variável CSS.

 

Ué?! não conseguimos atualizar o valor da variável com pré-processador também?

 

Como nem tudo são mil maravilhas, eis uma limitação que existe nos pré-processadores…

 

O PROBLEMA:

 

Temos que atualizar uma variável quando a largura mínima da @media query for contemplada, exemplo.

@media screen and (min-width: 460px) { … }

No entanto, quem lê essas expressões definidas na query é o navegador, caso o dispositivo se enquadre nestas condições, então a variável que está dentro da condição, será atualizada.

 

Aí que vem a questão do pré-processador, lembra que depois de um arquivo de pré-processador compilado é gerado um arquivo “.css” estático? Neste caso, não será possível atualizar o valor.

 

Veja o exemplo dessa situação, onde NÃO funciona a atualização de variável em um pré-processador.

 

variáveis_nativas

 

Na linha #7, está sendo atualizado a variável “$background” para a cor “#fff”, mas isso não funciona, pois uma vez compilado o código do pré-processador, teremos um arquivo css estático rodando no navegador, o resultado da variável “$background”, ainda será “#7ff383f” no arquivo estático.

 

Para nos salvar nestes casos, existe a variável nativa do CSS com ela podemos atualizar a variável na @media query, pois no navegador ela vive!

 

variáveis_nativas

 

Isso é ótimo, porque como já sabemos a variável CSS nativa, funciona dentro do navegador, ou seja, ela é dinâmica! Quando a condição da query for atingida o valor de “–background” será atualizada para “#fff”.

 

Suporte dos Navegadores

 

As variáveis CSS estão no Chrome e Safari desde 2016, no Firefox desde 2014 e também suportado pelo Edge desde 2017. No entanto, será necessário utilizar fallbacks ou polyfills para o Edge 14 e naturalmente para todo o IE (Can I use)

 

As possibilidades são diversas, poderíamos fazer cálculos, definir valores padrão para as variáveis nativas do CSS, entre outros. Poderíamos também, unir o melhor dos dois mundo, usar variáveis CSS, junto com pré-processadores, são muitas possibilidades. Neste momento as variáveis CSS funciona nos navegadores modernos, vale a pena experimentar, se você se sentir confortável e fizer sentido para o seu projeto, mergulhe fundo.

Por PATRÍCIA GOMES DOS SANTOS SILVA

Analista de Sistemas apaixonada por front-end e boas práticas em desenvolvimento web, acredita que HTML, CSS e Javascript são a base e podemos mudar o mundo através da web.

Postado em: 14 de maio de 2018

Confira outros artigos do nosso blog

Como customizar o response da API Rest do WordPress com informações específicas?

23 de julho de 2018

Marcelo Marcelino do Nascimento

A importância de uma boa documentação em projetos de sucesso

06 de julho de 2018

Marcelo Marcelino do Nascimento

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

Deixe seu comentário