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 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 |
Media | all |
Computed value | as specified with variables substituted |
Animation type | discrete |
Canonical order | per grammar |
--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>
<declaration-value>
<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>
: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); }
Specification | Status | Comment |
---|---|---|
CSS Custom Properties for Cascading Variables Module Level 1 The definition of '--*' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 49 | 15 | 29 | No | 36 | Yes |
var()
|
49
|
15 | 31
|
No | 36 | Yes |
env()
|
No | ? | ? | ? | ? | 11.1
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 49 | 49 | 15 | 29 | 36 | Yes | 5.0 |
var()
|
50 | ? | 15 | 31
|
37 | Yes | ? |
env()
|
? | 69 | ? | ? | ? | 11.1
|
? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/--*