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

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

Etiquetas do documento e colaboradores

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