Monday 8 February 2016

Clean Up Your CSS Code through Variables in Chrome

If you have been building sites for a long time, you may have run across the problem of changing your brand’s color via CSS in Chrome.  You were required to search and replace every defined instance in your CSS sheet recompiling it again to successfully change the brand colors. However, this used to waste a lot of time. To counter this problem, Chrome 49 has introduced a full support for CSS variables to define and change throughout your code. The variables defined can be changed in real-time and doesn’t include any additional overhead such as recompiling of style sheet as was done previously.



The var() function in CSS lets developers to declare a custom property name and its value to be reused throughout the sheet without declaring it again. The CSS variables have been in work for several years however, they were not widely supported by browsers before.  Before Chrome 49, Firefox 43+, iOS 9.3, and Safari 9.1 supported the new custom variables whereas the Microsoft Ede, Android or Opera still don’t offer any support.

    However, as Chrome is used by majority of people worldwide, you can expect the unsupported browsers to quickly catch up with the trend.

If you require assistance in adjusting your CSS Stylesheet, you can also contact Medialinkers webdevelopment services.

No comments:

Post a Comment