Utilizando variáveis CSS

Rascunho
Esta página está incompleta.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

 

Variáveis CSS são entidades definidas por autores ou usuários de páginas web que contêm valores específicos em um documento. Estas são definidas usando propriedades customizadas e são acessadas utilizando uma notação funcional específica, var().

Uso básico

Declaração de variável:

elemento {
  --main-bg-color: brown;
}

Utilizando a variável:

elemento {
  background-color: var(--main-bg-color);
}

Problemas a serem resolvidos

Ao construir sites de grande porte, geralmente os autores têm problemas relacionados à manutenção do CSS. Nestes sites o tamanho do CSS costuma ser consideravel e muitas informações podem ser repetidas em vários lugares. Por exemplo, manter um esquema de cor coerente em um documento requer a reutilização de algumas cores em inúmeras posições nos arquivos CSS. Destas forma modificar o esquema de cores se torna uma tarefa complexa pois nem sempre um simples "Buscar e substituir" é o suficiente.

A situação se agrava com Frameworks CSS, onde uma pequena mudança de cores requer a edição do framework em si. Pré-processadores como LESS e SASS são muito úteis nestas situações, mas podem aumentar a complexidade do projeto, pois adiciona um passo extra de processamento. Variáveis CSS ajudam ao agregar alguns benefícios de um pré-processador, sem a necessidade de compilação.

Uma segunda vantagem destas variáveis é a informação semântica que elas carregam em seu nome. Os arquivos CSS se tornam mais fáceis de serem lidos e compreendidos: cor-principal-texto é de mais fácil entendimento e re-uso que #00ff00, especialmente se a mesma cor for usada em outro contexto.

Como Variáveis CSS podem ajudar

Em linguagens de programação imperativas, como Java, C++ ou mesmo JavaScript, o estado pode ser [do programa] rastreado através da noção de variáveis. Variáveis são nomes simbólicos que guardam um valor atribuído que pode variar com o tempo.

Em linguagens declarativas como CSS, valores que mudam com o tempo não são comuns e o conceito de variáveis também.

Porém, o CSS introduz a noção de "variáveis em cascata" para ajudar a solucionar o desafio da manutenção do código. Isto permite a referência simbólica a um valor em toda a árvore do CSS.

O que são Variáveis CSS

Variáveis CSS atualmente têm duas formas:

  • variáveis, que são uma associação entre um indentificador e um valor que pode ser usado em substituição a valores comuns, usando a notação funcional var(): var(--variavel-exemplo) retorna o valor de --variavel-exemplo.
  • propriedades customizadas, que são propriedades especiais na forma de --* onde * representa o nome da variável. Estas variáveis são usadas para definir os valores de uma certa variável: --variavel-exemplo: 20px; é uma declaração CSS, usando a propriedade customizada --* para definir o valor da variável CSS --variavel-exemplo para 20px.
Nota: O prefixo de propriedade customizada era var- na especificação anterior, porém mudou posteriormente para --. O Firefox 31 e superior seguem a nova especificação. (bug 985838)

Propriedades customizadas são similares a propriedades comuns: elas estão sujeitas ao "efeito cascata" e herdam seu valor da propriedade pai se não forem redefinidas.

Primeiros passos com Variáveis CSS

Vamos começar com este simples CSS que colore elementos de diferentes classes com a mesma cor:

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

Aplicaremos neste HTML:

<div>
    <div class="one"></div>
    <div class="two">Texto <span class="five">- mais texto</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

que resultará em:

Perceba a repetição no CSS. A cor do background foi definida como marrom em diversos lugares. Para algumas declarações CSS é possível declarar isto em um elemento superior na cascata e deixar a propriedade ser herdada para resolver o problema. Porém em alguns projetos, isto nem sempre é possível. Ao declarar uma variável na pseudo-classe :root, o autor do CSS pode eliminar algumas repetições utilizando uma variável.

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color:  var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color:  var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color:  var(--main-bg-color);
}

<div>
    <div class="one"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

Isto leva ao mesmo resultado dos exemplos anteriores e ainda permite a declaração da propriedade em um só lugar.

Hierarquia das Variáveis CSS

 

Propriedades customizadas herdam os valores. Isto significa que, se nenhum valor for declarado para uma propriedade customizada em um dado elemento, o valor do elelemento pai é usado:

<div class="one">
  <div class="two">
    <div class="three">
    </div>
    <div class="four">
    </div>
  <div>
</div>

com o seguinte CSS:

.two { --test: 10px; }
.three { --test: 2em; }

Neste caso o valor de var(--test) são:

  • para o elemento class="two": 10px
  • para o elemento class="three": 2em
  • para o elemento class="four": 10px (herdado do elemento pai)
  • para o elemento class="one": valor inválido, que é o valor padrão de qualquer propriedade customizada.

Validade e valores

O conceito clássico de validade, ligado a cada propriedade, não é muito útil em relação a propriedades customizadas. Quando os valores das propriedades customizadas são analizados, o browser não sabe onde a mesma será usada, logo, deve considerar quase todos os valores como válidos.

Infelizmente estes valores podem ser usados, via a notação funcional var(), em um contexto em que não façam sentido. Propriedades e variáveis customizadas podem levar a declações CSS inválidas, criando um novo conceito de válido no momento da computação.

Compatibilidade com browsers

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico ? 29 (29) (desativado por padrão na opção layout.css.variables.enabled usando a síntese antiga var-varname)
31 (31) (ativado por padrão)
? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 29 (29) ? ? ?

 

Etiquetas do documento e colaboradores

 Colaboradores desta página: wellviana, eltonmesquita
 Última atualização por: wellviana,