Propriedades personalizadas (--*)

Experimental

Esta é uma tecnologia experimental (en-US)
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
Computed value	as specified with variables substituted
Animation type	discrete

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 com 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! (en-US)

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