W3cubDocs

/CSS

--*

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

Initial value see prose
Applies to all elements
Inherited yes
Computed value as specified with variables substituted
Animation type discrete

Syntax

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>
This value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token. It represents the entirety of what a valid declaration can have as its value.

Note: Custom property names are case sensitive — --my-color will be treated as a separate custom property to --My-color.

Formal syntax

<declaration-value>

Example

HTML

<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</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);
}

Result

Specifications

Specification Status Comment
CSS Custom Properties for Cascading Variables Module Level 1
The definition of '--*' in that specification.
Candidate Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
--* 49
49
48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
15 31
31
29 — 55
Disabled
From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 36 9.1
env() 69 79 65 No 56 11.1
11.1
11 — 11.1
Uses the non-standard name: constant
var() 49
49
48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
15 31
31
29 — 55
Disabled
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 36 9.1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
--* 49 49
49
48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
31
31
29 — 55
Disabled
From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
36 9.3 5.0
env() 69 69 65 48 11.3
11.3
11 — 11.3
Uses the non-standard name: constant
10.0
var() 50 49
49
48
Disabled
Disabled From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
31
31
29 — 55
Disabled
Disabled From version 29 until version 55 (exclusive): this feature is behind the layout.css.variables.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
36 9.3 5.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/--*