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
Error: could not find syntax for this item
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)
| 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.