CSS variables, widely known as CSS custom properties, are finally landing in Chrome 49. Well, they can be also useful for reducing the repetition in CSS and also for the powerful run time effects like theme switching and potentially extending/poly filling future CSS features.
CSS Clutter
When designing an application this is the most common practice to set aside a set of brand colors that will be reused to keep the look of the app consistent. However, unfortunately repeating these color values over and over again in your CSS is not a routine, but also an error prone.If at some point, one of the colors needs to be changed and on a large scale project such caution could easily get dangerous.
In recent times, developers smartly turned to CSS pre-processors like SAAS or LESS it helps to solve their problem through the use of pre-processor or variables. Fortunately, these tools have immensely boosted the developers’ productivity,the variables that they use suffer from a major drawback, which is that they’re static and can’t be changed at run time. Adding this ability to change the variables at run time does not only open the door to things like dynamic application theming, but also has major ramifications for responsive design and the potential to poly fill future CSS features. With the release of Chrome 49, these abilities are now available in the form of CSS custom properties.
Chrome 49 gets full-fledge support for the CSS variables so developers will able to define a variable to be used throughout their code and can be changed in real-time and it and doesn’t require any additional compiling.
So now developers can use the var () function to declare a custom property name and its value for reuse their CSS. 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.
As Chrome is used by more than half of people online, it’s likely to quickly gain momentum among other browsers.
