Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A função CSS  var() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

var(--header-color, blue);

A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

Sintaxe

O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.

var( <custom-property-name> [, <declaration-value> ]? )

Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, var(--foo, red, blue) define como argumento alternativo red, blue; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

Valores

<custom-property-name>
O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.
<declaration-value>
O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.), ], ou }, ponto e vírgula de primeiro nível, ou sinais de exclamação.

Exemplos

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

body {
  background-color: var(--main-bg-color);
}
/* Argumento alternativo */
/* No estilo de componente: */
.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* No estilo de grandes aplicações: */
.component {
  --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */
}

Especificações

Especificação Status Comentário
CSS Custom Properties for Cascading Variables Module Level 1
The definition of 'var()' in that specification.
Rascunho atual Definição inicial

Compatibilidade entre navegadores

Recurso Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico 48[1]
49
15063[2] 29 (29)[3]
31 (31)
Não suportado 36 9.3[4]
Recurso Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 50 29 (29) Não suportado 37 9.3[3]

[1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em chrome://flags.

[2] Veja Edge Platform Status e 15063 Build Release Notes (2017-03-20).

[3] Esse recurso é implementado com base na preferência layout.css.variables.enabled, cujo padrão é false e usando a antiga sintaxe var-variablename no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova --variablename sintaxe é utilizada. A partir do Gecko 55, a preferência layout.css.variables.enabled foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.

[4] Veja WebKit bug 19660.

Veja também

Etiquetas do documento e colaboradores

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