How To Force Reload All Cached CSS Files Of Your Pages
It’s quite frustrating when something simply won’t perform what you want it to do. And if you’re developer, you’re just all too familiar with the frustrating phrase “Reload the page.” Sometimes, no matter how much you hit that reload button, it just doesn’t work since .css files don’t normally get reloaded.
Whenever you make some changes to your existing CSS files and transfer them to the production setting, those modifications may no reflect in the browser of your audience.
The reason for this is because your CSS files have been cached in the browser. So when users try to access your URL, it’ll take the cached CSS files, which, in turn, will not show site visitors the latest changes.
Your visitors may either or clear the cookies of the browser and reload the page or do a hard refresh. However, you can’t ask each user to do these. Likewise, you don’t want to go drastic measures that may or may not work.
Fortunately, there’s a quick and simple solution that will work on all pages and even on the most stubborn cache type. Keep on reading to find out more.
What’s Exactly Causing This Problem?
A cache is actually beneficial to your browser. It can decrease your usage of resources on every level, allowing you to browse faster. However, you’ll encounter “the problem” when you want to obtain a fresh copy of the file.
There are numerous culprits for these, but we can sum it all up in the following categories:
The browser refuses to request the new file
All the problems you’ll encounter with your browser is a local one. It keeps a copy of the .css file in its cache, which it serves to you constantly. But it tends to refuse to request a new file from your server. Typically, JS, CSS, and images are problematic files.
Nevertheless, it’s not restricted to any particular file type since everything will depend on the headers, which manages the existence of the request. In many cases, resolving the problem is easy. All you have to do is to perform a hard or force-reload or empty the local cache if necessary.
If you’re using Chrome, you can force reload by pressing the F12 key to open the console. Then, right-click the reload button to access the menu containing the options for reloading.
Keep in mind that it’s not advisable to debug a live website and cache will not provide anything good with it as well. So try to disable your cache first before dismantling your site into bits and pieces. To do this, open your control panel, hit Ctrl + F, and then enter “cache.” Performing this works in most situations.
Your server refuses to send a fresh copy of the file
In such a situation, the term server is a proxy, CDN, or includes just about anything responsible for delivering the files to you. Rather than getting a file version from the root source, it serves the version from the cache continuously.
It may not be the most practical option, but you can always clean the cache if you’re the site’s admin. If not, then you will not be able to affect the behavior of the server. Nevertheless, the trick here to solve the issue is to get a new copy of the file.
Busting The Cache
You can get the content of the same file by requesting either file.css or file.css?rnd=23. However, these two types of requests are different. Both your server and browser will view them as requests for two various resources. This method was written by Paul Irish way back in 2008.
You will find all the CSS files referenced on your page using a few JavaScript lines: all < link rel=”stylesheet” > and modifying their URLs. When you change /some-path/style.css to /some-path/style.css?rnd=132, it’ll force your browser to send another file request from your server.
And because of the rnd section, neither your server nor your browser has that particular request in the cache. Hence, it is forced to get a new copy of the file. So the solution is not only clean but fast and straightforward as well.
Keep in mind that the page will flicker a little while the CSS is reloading. After that, you’ll get all your fresh CSS copies. If you want to apply it on any page, just drag the button the toolbar containing your bookmarks. You click this whenever you all CSS files on your page requires some force-reloading.
Moreover, it’ll work no matter what particular set up you have on a page since it doesn’t rely on jQuery or any other libraries. Basically, here’s how the code will look:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(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 })() |
Drag the button below to your bookmarks bar, and you’ll be able to force reload CSS on any page. It works in all browsers and on all pages regardless of their server-side setup.
Once you’re done reloading a page, you’ll see the old CSS again. The reason behind this is because the HTML still contains the old cached CSS path, which is style.css, rather than style.css?rnd=235. What you need to do is to simply reload CSS again by hitting your bookmark.
You don’t have to stress yourself. Follow the simple steps we have here, and you can force reload even the most stubborn of .css files out there. So if you find this helpful, make sure to let everyone knows by sharing the article. Also, if you discover another way of doing it, do not hesitate to share it on the comment section below.
Aileen Cuaresma
Aileen is a Technical and Creative writer with an extensive knowledge of WordPress and Shopify. She works with companies on building their brand and optimizing their website. She also runs a local travel agency with her family. On her free time, she loves reading books, exploring the unknown, playing with her two adorable dogs, and listening to K-pop.
Get 10% discount with coupon code ESTATE10
I use timestamp of file as parameter, in my opinion it’s the better way to prevent cache when really need and file can be cached when we don’t make any change for a long time.
I can’t believe how easy your bookmark button is. I wasted a whole hour just refreshing and logging out and googling answers to change chome dev tools settings. the button worked in .5 seconds. I’m happy and frustrated that it took me this long to find this solution!