Story by
Owen Williams
Former TNW employeeOwen was a reporter for TNW based in Amsterdam, now a full-time freelance writer and consultant helping technology companies make their word Owen was a reporter for TNW based in Amsterdam, now a full-time freelance writer and consultant helping technology companies make their words friendlier. In his spare time he codes, writes newsletters and cycles around the city.
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.
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]
Get the TNW newsletter
Get the most important tech news in your inbox each week.