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

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.

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
Basic support 49 15 29 No 36 Yes
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
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 Yes
env() No ? ? ? ? 11.1
11.1
11 — 11
Uses the non-standard name: constant
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
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.
37 Yes ?
env() ? 69 ? ? ? 11.1
11.1
11 — 11
Uses the non-standard name: constant
?

See also

© 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/--*