Over the years, one of the most frequent requests to the CSS working group has been to implement at least some support for declaring and using variables in style sheets. After much discussion, the CSS Custom Properties for Cascading Variables specification adopted an approach that allows the author to set custom properties in style rules that are cascaded and inherited, like other inherited properties. Accesses to variables can be performed in the definitions of property values ​​using syntax var().

Custom properties declaring variables must be named starting with var-. The values ​​of these custom properties are almost arbitrary. They can accept almost any string of characters, provided that it is balanced.

For example, the author may declare some common values ​​in the style rules for the root element, so they will be available for each element of the document:

:root {
  var-theme-colour-1: #009EE0; 
  var-theme-colour-2: #FFED00; 
  var-theme-colour-3: #E2007A; 
  var-spacing: 24px;
}

You can access variables anywhere inside the value of another property, including other custom properties. Variables from the above stylesheet can be used, for example, as follows:

h1, h2 {
  color: var(theme-colour-1);
}
h1, h2, p {
  margin-top: var(spacing);
}
em {
  background-color: var(theme-colour-2);
}
blockquote {
  margin: var(spacing) calc(var(spacing) * 2);
  padding: calc(var(spacing) / 2) 0;
  border-top: 2px solid var(theme-colour-3);
  border-bottom: 1px dotted var(theme-colour-3);
  font-style: italic;
}

If applied to this document:

The title of the document
A witty subtitle
Please consider the following quote:
Text of the quote goes here.

the result will look something like this:

Variables are calculated based on the value of the variable of the element to which the property is applied with reference to the variable. If the element h2contains an attribute style="var-theme-colour-1: black", then the rule h2 { color: var(theme-colour-1); }will be calculated using this value, and not what is defined in the rule. :root

Variable references can also include spare values ​​that are used if the variable is not defined or is invalid (due to participation in a loop of calls to a variable). The first rule in the style sheet using variables can be rewritten as:

h1, h2 {
  color: var(theme-colour-1, rgb(14, 14, 14));
}

which will result in a dark gray setting if the variable is theme-colour-1 not defined in one of the header elements.

Because variable references are expanded using the value of the variable in a particular element, this process must be performed during the determination of the computed property value. Whenever an error occurs during variable substitution, the property becomes “invalid at computed-value time”. Errors can occur due to access to an undeclared variable that does not have a spare value, or because the value substituted into the property was not parsed (for example, if we specified a theme-colour-1non-color value for the variable and then applied it to the propertycolor) If the property is invalid during the calculation of the value, the declaration of this property itself is parsed successfully, and you can see it if you examine the CSSStyleDeclaration object in the DOM tree. However, the computed value of this property will default. For inherited properties, such as color, the default value will be inherit. For non-inherited properties initial.

Implementation

The initial implementation of CSS variables has just been added to Firefox Nightly, version 29 is relevant. This functionality is not yet available in release builds (such as Firefox Beta and the release version of Firefox), since before making it widely available, we are waiting for a solution to some problems in the specification and for this we step a little further on the W3C Process field. However, all this will continue to be available in Nightly, and after February 3 will go to Firefox Aurora.

Not only realized at the moment part of the specification - is CSSVariableMaprepresenting the object, which resembles the ECMAScript Map with the techniques get, set and other methods to obtain the values of variables on the basis of CSSStyleDeclaration. However, remember that you can still reach them in the DOM tree using methods getPropertyValue andsetProperty, provided that you use full property names, such as var-theme-colour-1.

Work on this function was performed as part of the solution to bug 773296 , and I thank David Baron for the reviews and Emanuel Bassi , who performed some initial work on implementation. If you encounter any problems using this function, please report a bug !

Original: CSS Variables in Firefox 29