#Web Extensions

##What is it?

Web Extensions allow developers to build features on top of browsers without requiring them to be implemented natively, in the browser.

The Adobe Web Platform Team is excited about the web extension CSS Custom Properties for Cascading Variables. With some JavaScript, a web developer can create a custom property and assign it a default value. Those default values then cascade throughout the related style sheets. For example, here is some code that uses custom properties. You define a default theme color and heading variables in the :root element. Then, you apply those special variables to certain elements. Any HTML that uses elements styles automatically inherits their styles.

:root {
    --theme-color: #AD0BE;
}

h1 {
    color: var(--theme-color);
}

h2 {
    background-color: var(--theme-color);
}

##When can I use it?

CSS Custom Properties is now supported in Firefox, and it will be available in WebKit soon. For a view of current and upcoming browser support, check out caniuse.com.

Learn how to enable this feature in popular browsers.

##Where can I learn more?

To deepen your understanding, do check out the CSS Custom Properties for Cascading Variables specification or the Mozilla Developer Network’s page about Using CSS variables.

You can learn more about the Extensible Web Community Group on their W3C website.

And we’ll be sharing more information and updates from our blog and Twitter account.