With the upcoming Windows 10 Creators Update which is releasing next month, Microsoft Edge will support CSS Custom Properties which allows developers to fully cascade variables across CSS properties.
In general, web applications can contain quite a bit of CSS. Most of the values in the CSS file will be duplicate data; for example, a site may establish a color scheme and reuse three or four colors throughout the site. Altering this data can be difficult and error-prone, since it’s scattered throughout the CSS file (and possibly across multiple files), and may not be amenable to Find-and-Replace. CSS Custom Properties solves this problem using a family of custom author-defined properties known collectively as custom properties, which allow developers to assign arbitrary values to a property with a name, and the var() function, which allows developers to then use those values in other properties elsewhere in the document. Check out an example below,
:root {
--primary: #0B61A4;
--secondary: #25567B;
}
header {
background: var(--primary);
border-bottom: 2px solid var(--secondary);
}
CSS Custom Properties will make editing CSS files much easier and less error-prone, as developers have to change the value once, in the custom property, and the change will propagate to all uses of that variable automatically.
If you are a developer, you can now try CSS Custom Properties in the recently released Windows Insider Preview builds beginning with EdgeHTML 15.15061. Also, check out the Custom Properties Pooch demo to see this feature in action.
