CSS3 Variables

implementation notes

variable definition is a type of CSS declaration that is composed by a property token prefixed by a ‘var-’ string and by a CSS value. the name of the variable is the property token minus the ‘var-’ prefix. the CSS value is stored unparsed, including comments, as the payload of a nsCSSVariable object.

a variable can be referenced using the ‘var()’ function notation; the variable is expanded (recursively, if necessary) when being resolved; if the variable referenced has not been defined, or if the CSS value is not valid for the property, the value of the property is either the base or inherited value; if the ‘var()’ function provides a default value token, the default is used instead.

the ‘parent-var()’ notation behaves like the ‘var()’ notation, but it references the value of the variable as it had been specified on the parent CSS element. [FIXME: needs better explanation in the spec]

the ‘$’ prefix is the equivalent of the ‘var()’ notation. [REMOVE: the CSS-WG decided to drop the '$' notation]

existing implementations

WebKit

Update: http://www.xanthir.com/blog/b4KT0

WebKit-core implements part of the current draft of the CSS3 Variables specification: the ‘$’ notation is missing; the ‘var()’ function notation is vendor-prefixed, as well as the ‘var-’ prefix definition; the CSS3 Variables support is both controlled at compile time, via a pre-processor macro, and at run-time, using a preference.

Internet Explorer

Unknown.

Opera

Unknown.

dot plan

Part I. WebKit parity

• add nsCSSVariable and nsCSSVariablesMap
• store the nsCSSVariablesMap into the nsCSSParser
  • add key to Preferences::* for run-time check
    • proposed key: bool, layout.css.variables.enabled
• implement var-* definition
  • check token for ‘var-’ prefix
  • create nsCSSVariable for the given name and value
  • add the variable into the variables map implement var() use
  • if ‘var(‘ + <name> + ‘)’ is found, look up the value for the given name in the variables map
    • recursively descend into variable definitions in case they contain var()
    • success: inject the nsCSSVariable.mValue into the nsCSSParser stream and let the parser continue from there
    • failure: use the base/inherited value of the property

Part II. var()-LATEST

• when injecting the nsCSSVariable.mValue into the nsCSSParser stream, create a “roll back” section
  • in case of success, assign the value to the property
  • in case of failure, use the default value as expressed by the var() declaration
• store the CSS element name in the nsCSSVariable and use it when matching the variable name inside the nsCSSVariablesMap [FIXME]

Part III. parent-var()

• [FIXME]

resources

• [CSS3 Variables, Editor’s draft] http://dev.w3.org/csswg/css-variables/
• [CSS3 Variables, Current draft] http://www.w3.org/TR/css-variables/