Propriedades personalizadas (--*)

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Nomes de propriedades com o prefixo --, como --example-name, representam Propriedade personalizadas que contém um valor que pode ser reutilizado por todo o documento usando a função (var).

Propriedades personalizadas participam na cascata: cada uma delas pode aparecer várias vezes e o valor da variável corresponderá ao valor definido na propriedade personalizada, decidido pelo algoritmo de cascata.

Initial value	see prose
Aplica-se a	all elements
Inherited	yes
Midia	all
Computed value	as specified with variables substituted
Animation type	discrete
Canonical order	per grammar

Sintaxe

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

<declaration-value>: Este valor corresponde a qualquer sequência de um ou mais tokens, desde que a sequência não contenha tokens não permitidos. Representa a totalidade do que uma declaração válida pode ter como valor.

Sintaxe formal

<declaration-value>

Exemplo

HTML

<p id="firstParagraph">Este parágrafo deve ter um fundo azul e um texto amarelo.</p>
<p id="secondParagraph">Este parágrafo deve ter um fundo amarelo e um texto azul.</p>
<div id="container">
  <p id="thirdParagraph">Este parágrafo deve ter um fundo verde e um texto amarelo.</p>
</div>

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Resultado

Especificações

Specification	Status	Comment
CSS Custom Properties for Cascading Variables Module Level 1 The definition of '--*' in that specification.	Candidata a Recomendação	Initial definition

Compatibilidade entre navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Desktop
Dispositivo móvel

Recurso	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
suporte básico	49.0	15	42.0 (42.0)	Não suportado	36.0	9.3^[3]

Recurso	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
suporte básico	50.0	29.0 (29.0)	Não suportado	37.0	9.3^[3]

[3] See WebKit bug 19660.

Veja também

Utilizando variáveis CSS