Developers who have built any size Website have had this problem: when you need to change one of your brand’s colors it’s no easy feat, requiring a risky search and replace or hunting down every instance of its use.
To get around the clutter, most developers have switched to using preprocessors like SASS or LESS which support creating variables by converting them when the processor is run over your code.
A new era of tech events has begun
We’re back in New York this November for the 4th edition of our growth-focused technology event.
The problem is that this is not done at runtime with these libraries, so you’re not able to change these colors in real time without recompiling your stylesheets.
Chrome 49 is getting full support for CSS variables so developers will able to define a variable to be used throughout their code and can be changed in realtime — and doesn’t require any additional compiling.
Developers can now declare a variable by using double dashes, for example ‘–primary-color: #ccc‘ and then call them by using the var() function elsewhere. Chrome also supports using these new custom variables in JavaScript without any issues.
CSS variables are very new though have been in the works for years — but they’re not widely supported yet. Only Chrome 49, Firefox 43+, Safari 9.1 and iOS 9.3 support the standard with no roadmap for Microsoft Edge, Opera or Android.
Still, given that Chrome is used by more than half of people online, it’s likely to quickly gain momentum among other browsers.
➤ CSS Variables [Google Developers]
:
