Propriedades personalizadas (--*)

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Some parts of this feature may have varying levels of support.

Experimental: 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
Computed valueas specified with variables substituted
Animation typediscrete

Sintaxe

css
--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

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

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
CSS Custom Properties for Cascading Variables Module Level 1
# defining-variables

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
--*
env()
Safe area inset variable safe-area-inset-bottom
Safe area inset variable safe-area-inset-left
Safe area inset variable safe-area-inset-right
Safe area inset variable safe-area-inset-top
Window Controls Overlay variable titlebar-area-height
Window Controls Overlay variable titlebar-area-width
Window Controls Overlay variable titlebar-area-x
Window Controls Overlay variable titlebar-area-y
var()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Uses a non-standard name.
Has more compatibility info.

Veja também