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 value | see prose |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | all |
| Computed value | as specified with variables substituted |
| Animation type | discrete |
| Canonical order | per grammar |
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 tokens. It represents the entirety of what a valid declaration can have as its value.
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. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 48.0[1] 49.0 |
15 | 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.