Trabalhando com propriedades customizadas e variáveis no CSS

O Módulo das CSS3, denominado CSS Custom Properties for Cascading Variables Module Level 1 (em tradução livre: Propriedades customizáveis para variáveis CSS Módulo 1), encontra-se no estágio de última chamada para Rascunho de Trabalho do W3C. Portanto, trata-se de uma especificação em estágio anterior ao de Rascunho de Trabalho e assim sendo, convém alertar que este artigo tem caráter meramente informativo e será atualizado quando julgado necessário. Consulte a especificação no site do W3C para informações atualizadas.

Para futura referência, informo que este artigo foi baseado na versão de 06 de maio de 2014, vigente à época em que o artigo foi escrito e publicado.

A finalidade da especificação é a de apresentar um novo valor CSS primitivo, denominado variável CSS aplicável a todas as propriedades CSS, bem como a customização de propriedades CSS destinadas a definir o valor das variáveis.

Propriedades CSS customizadas ou variáveis CSS

A sintaxe da regra CSS é conforme mostrada na figura a seguir:

Notar que a declaração CSS compreende uma propriedade e um valor. Propriedades CSS são as características de um elemento da marcação que podem ser estilizadas, por exemplo: cor, borda, margem, posição inicial da imagem de fundo etc, que são as nossas conhecidas propriedades color, border, margin, background-position etc.

Valores CSS são grandezas ou aspectos que definem quantidades ou características de uma propriedade, por exemplo: red, 2px solid blue, 2.5em, left top, etc.

Observe a seguir alguns exemplos de declaração CSS.

A sintaxe para se criar uma variável CSS (as especificações as denominam de propriedade CSS customizada) tem o formato geral –*, onde o sinal asterisco (*) é um nome de livre escolha do autor, ou seja, o nome da variável, e no qual alguns caracteres não são permitidos, como por exemplo: ; # } ] ) etc.

Observe a seguir alguns exemplos para definição de valores de variáveis CSS. Os valores válidos para as variáveis CSS (ou propriedades CSS customizadas como são denominadas nas especificações) são todos os valores CSS válidos.

Uma propriedade CSS customizada nada mais é do que uma variável para ser usada como argumento de uma função CSS var() cujo valor de retorno é o valor CSS da variável. O exemplo a seguir esclarece a sintaxe para definição de varáveis CSS e para o uso da funcão var().

No código mostrado, definimos duas variáveis CSS denominadas minha-cor-defundo, minha-cor e minha-largura cujos valores são black, red e 40% respectivamente.

As variáveis CSS se aplicam (ou surtem efeito) somente dentro do ESCOPO para o qual foram definidas. No caso do nosso exemplo, o escopo das duas variáveis é o elemento raiz do documento :root, ou seja as variáveis são válidas para qualquer elemento da marcação constante da página (ou documento).

É possível definir um container qualquer da página como escopo para variáveis. Por exemplo: o autor define variáveis para serem usadas somente nos rodapés da página. Neste caso, o escopo será o elemento footer.

No código mostrado, usamos as duas variáveis CSS (o valor das variáveis) para definir a largura e a cor de fundo e de frente de todos os elementos div da página. Alterando o valor da variável, altera-se a largura e a cor de fundo e de frente de todos os elementos div da página.

Exemplo interativo

O exemplo interativo para os códigos mostrados anteriormente está hospedado no JSFiddle e funciona em navegadores que suportam variáveis CSS (até julho de 2014, somente o Firefox 31, lançado em 16/07/2014).

Você identifica alguma semelhança com pré-processadores CSS? Só isso? Nãooooooo! A especificação prevê outras funcionalidades mais complexas e flexíveis do que simplesmente definir o valor das variáveis, como por exemplo realizar cálculos, manipular, definir valores fallback para variávies CSS etc.

Nesse primeiro momento não vou mostrar todas as funcionalidades constantes das especificações, já que o objetivo deste artigo é o de informar aos meus leitores da existência das variáveis CSS.

Nota: Não me senti confortável com o fato de a especificação ter usado o termo propriedade CSS customizada para se referir às variáveis CSS, pois estas são valores CSS e não propriedades CSS. Ou, existe uma razão que eu não percebi e estou equivocado?

———

Texto de Maurício Maujor, publicado originalmente no iMasters.