CSS Custom Properties for Cascading Variables Module Level 1

		var-foo: if(x > 5) this.width = 10;
		

Using Custom Properties

		:root {
			var-header-color: #06c;
		}
		

		h1 { background-color: var(header-color); }
		

		:root { var-color: blue; }
		div { var-color: green; }
		#alert { var-color: red; }
		* { color: var(color); }

		<p>I inherited blue from the root element!</p>
		<div>I got green set directly on me!</div>
		<div id='alert'>
			While I got red set directly on me!
			<p>I'm red too, because of inheritance!</p>
		</div>
		

Resolving Dependency Cycles

		:root {
			var-main-color: #c06;
			var-accent-background: linear-gradient(to top, var(main-color), white);
		}
		

		:root {
			var-one: calc(var(two) + 20px);
			var-two: calc(var(one) - 20px);
		}
		

		<one><two><three /></two></one>
		one   { var-foo: 10px; }
		two   { var-bar: calc(var(foo) + 10px); }
		three { var-foo: calc(var(bar) + 10px); }
		

Using Cascading Variables: the ''var()'' notation

	<variable> = var( variable-name [, <> ]? )
	

1. If the variable named by the first argument to the ''var()'' function is a valid variable, replace the ''var()'' function by the value of the corresponding custom property.
2. Otherwise, if the ''var()'' function has a fallback value as its second argument, replace the ''var()'' function by the fallback value. If there are any ''var()'' references in the fallback, resolve them as well.
3. Otherwise, the property containing the ''var()'' function is invalid at computed-value time. Note: Other things can also make a property invalid at computed-value time.

		/* In the component's style: */
		.component .header { 
			color: var(header-color, blue); 
		}
		.component .text { 
			color: var(text-color, black); 
		}

		/* In the larger application's style: */
		.component {
			var-text-color: #080;
			/* header-color isn't set, 
			   and so remains blue, 
			   the fallback value */
		}
		

		.foo {
			var-side: margin-top;
			var(side): 20px;
		}
		

		.foo {
			var-gap: 20;
			margin-top: var(gap)px;
		}
		

		.foo {
		  var-gap: 20;
		  margin-top: calc(var(gap) * 1px);
		}
		

		:root { var-looks-valid: 20px; }
		p { background-color: var(looks-valid); }
		

Invalid Variables

		:root { var-not-a-color: 20px; }
		p { background-color: red; }
		p { background-color: var(not-a-color); }
		

APIs

Extensions to the CSSStyleDeclaration Interface

	partial interface CSSStyleDeclaration {
		readonly attribute CSSVariablesMap var;
	}
	

Serializing Custom Properties

Ordinarily, property names are restricted to the ASCII range and are case-insensitive, so implementations typically serialize the name lowercased.

The CSSVariablesMap Interface

	[MapClass(DOMString, DOMString)]
	interface CSSVariablesMap {
		DOMString get(DOMString varName);
		boolean has(DOMString varName);
		void set(DOMString varName, DOMString varValue);
		boolean delete(DOMString varName);
	}
	

CSSVariablesMap Methods

get(DOMString varName), returns DOMString

Prepend "var-" to varName. Invoke getPropertyValue() on the associated style declaration by passing varName as its argument, and return its returned value.

has(DOMString varName), returns boolean

Invoke get() on the CSSVariablesMap object by passing varName as its argument. If the return value is the empty string, return false; otherwise, return true.

set(DOMString varName, DOMString varValue), returns void

Prepend "var-" to varName. Invoke setProperty() on the associated style declaration by passing varName and varValue as its two arguments, in that order.

delete(DOMString varName), return boolean

Prepend "var-" to varName. Invoke removeProperty() on the associated style declaration by passing varName as its argument. If the returned value is the empty string, return false; otherwise, return true.

		div {
			var-foo: 16px;
			var-Bar: red;
			var-foo-bar: 50%;
		}
		

		var customProps = el.style.var;
		customProps.forEach(function(propValue, propName) {
			if( knownCustomPropName(propName) ) {
				/* Processing code here. */
			}
		});
		

Changes from 10 April 2012 Working Draft

• The value syntax for custom properties has been nailed down more precisely.
• Case-sensitivity of custom property names has been defined.
• The fallback argument was added to the var() function.
• A property that is invalid at computed-value time now either goes inherit or initial, rather than always initial.
• CSSVariableComponentValue interface has been dropped, pending the *ComponentValue interfaces being created at all.
• The CSSVariablesMap interface has been added, which stores all the variables defined by a style rule.

Acknowledgments

Many thanks to several people in the CSS Working Group for keeping the dream of variables alive over the years, particularly Daniel Glazman and David Hyatt. Thanks to multiple people on the mailing list for helping contribute to the development of this incarnation of variables, particularly Brian Kardell, David Baron, François Remy, Roland Steiner, and Shane Stephens.