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.
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.
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.