Force Reload All Cached CSS Files
This is the most common scenario of a UI and UX designer inform of there uses and checking purpose and to do this the most convinient approch is by using CTRL + SHIFT + R which is the default structure of the browser which clears the current cache files of the current browser and recreate the cache space again. But to make this easy some of UI and UX desiger and Frontend developer just use some format as below which actually a bad for the caching machanism of a browser.
- Using argument everytime using the file link like below
<link rel="stylesheet" href="asset/css/style.css?v=1234"> -
And other uses some like script function as below
(function() {
var h, a, f;
a = document.getElementsByTagName('link');
for (h = 0; h < a.length; h++) {
f = a[h];
if (f.rel.toLowerCase().match(/stylesheet/) && f.href) {
var g = f.href.replace(/(&|?)rnd=d+/, '');
f.href = g + (g.match(/?/) ? '&' : '?');
f.href += 'rnd=' + (new Date().valueOf());
}
} // for
})()
Important Note:
- Avoid the Query String Hack for production. It increases HTTP requests and breaks caching mechanisms.
In Summary:
- Development: Use Live Reload extensions or Browser DevTools for immediate feedback.
- Production: Implement server-side caching with versioning for a balance between performance and seeing updates.