Chris J. Lee

Dallas Drupal Developer

You are here

CSS Variables in Firefox

This is interesting. I just found this on hackernews. Apparently, there's a spec for css variables defined by the W3C. This has actually now been implemented into firefox's nightly build. The following video shows the ability for use:

The syntax is rather simple. They follow several principles:

  • Variables can be scoped by a selector: :root, .class, or even a media query.
  • A css variables is prefixed by a "var-" css property

Example of a css variables

/*
* Here are examples of css variables in use.
*   1. Here the color is defined in the entire document.
*   2. Now global-color is #fff in <h1>'s because of a scope change.
*   3. As you see the media query changes the value of var-global-color to #fc0.
*/
:root {
  var-global-color: #efefef; /* 1 */
  color: var(global-color);
}

h1 {
  var-global-color: #fff; /* 2 */
  color: var(global-color);
}

@media screen and (min-width: 431px)  {
  h1 {
    var-global-color: #fc0; /* 3 */
    color: var(global-color);
  }
}
Tags: 
csshtmlw3c
© 2017 Chris J. Lee