The CSS Custom Properties is a new primitive value type which allows users to fully cascade variables across CSS properties. Microsoft clarifies in the blog post that users can already preview CSS Custom Properties in Windows Insider Preview builds beginning with EdgeHTML 15.15061.

What are CSS Custom Properties?

SASS, LESS, and other pre-processors have been offering variables in CSS for years. However, these tools are effectively a “find & replace” of the specified value. This means that variables can’t be updated without needing to recompile the stylesheets. On the other hand, Microsoft says in its blog post that while CSS Custom Properties have the same use cases, they also have the additional benefits of being fully cascaded. Therefore, they do not require the additional build step in order to work. Here is a list of what users can achieve using the CSS Custom Properties:

Create a fallback Custom property scoping Modify a custom property via script Animate a custom property

To learn more about how to use the CSS Custom Properties, check Microsoft’s blog post. Microsoft has also created a Microsoft Edge demo, the Custom Properties Pooch demo, where users can test-drive the new primitive value type.

Microsoft Bringing CSS Custom Properties to Edge Browser in Windows 10 Creators Update - 37Microsoft Bringing CSS Custom Properties to Edge Browser in Windows 10 Creators Update - 42Microsoft Bringing CSS Custom Properties to Edge Browser in Windows 10 Creators Update - 19Microsoft Bringing CSS Custom Properties to Edge Browser in Windows 10 Creators Update - 48