Propriedades personalizadas (--*)

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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 valuesee prose
Aplica-se aall elements
Inheritedyes
Midiaall
Computed valueas specified with variables substituted
Animation typediscrete
Canonical orderper 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!

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