CSS - Custom properties (--*)

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value than can be reused throughout the document using the (var()) function.

Example

 

HTML

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

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

Syntax  

CSS
--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 tokens. It represents the entirety of what a valid declaration can have as its value.

Formal syntax

CSS
<declaration-value>

Description  

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value than can be reused throughout the document using the (var()) function.

Custom properties participate in the cascade: each of them can appear several times, and the value of the variable will match the value defined in the custom property decided by the cascading algorithm.

Initial valuesee prose
Applies toall elements
Inheritedyes
Mediaall
Computed valueas specified with variables substituted
Animation typediscrete
Canonical orderper grammar

Browser Compatibility  

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 48.0[1]
49.0		 No support 29.0 (29.0)[2]
31.0 (31.0)		 No support 36.0 9.3[3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 50.0 29.0 (29.0) No support 37.0 9.3[3]

[1] Chrome 48 enabled through the "Experimental Web Platform features" flag in chrome://flags.

[2] In Gecko 29.0 (Firefox 29.0 / Thunderbird 29.0 / SeaMonkey 2.26) this feature is implemented behind the preference layout.css.variables.enabled, defaulting to false and using the old var-variablename syntax. Starting from Gecko 31.0 (Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28) the preference is set to true by default and the new --variablename syntax is used.

[3] See WebKit bug 19660.

See Also  

Specifications  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/--*

CSS CSS Property CSS Variables Experimental Reference