Force Reload Even the Most Stubbornly Cached CSS Files

There’s nothing more frustrating than a machine that refuses to do what you tell it. “Reload the page” – a simple action, that causes so much frustration for developers because it sometimes just doesn’t work. CSS files often don’t get reloaded. Yes, we all know cache is to blame but how to get around it without drastic measures? Years of frustration have led me to this simple one-click solution that works on any page and with any cache type.

Speaking of one-click solutions that can get you out of frustrating situations. Have you heard about WP Reset?

WP Reset is a plugin that will enable you to reset your entire site or just aspects of it by simply pressing a button. It comes with a ton of resetting tools, ranging from a nuclear reset that will wipe your entire site clean, to partial resets that will remove things like plugins, themes, users, widgets, content, and so on. To top it all off, using WP Reset you can create database snapshots that you can then restore taking your site back to a previous state, and plugin (+theme) collections which you can install after a reset also with just a click.

But enough about that, let’s get back to talking about cached CSS files.

What causes the problem?

Cache is a wonderful thing. It lowers resource usage on all levels and enables us to surf faster. Problems occur when we want to get around the cache and grab a fresh copy of the file. There are an unlimited number of reasons why cache won’t purge, but they all fall into two categories;

1. The browser doesn’t want to request the new file

Anything browser related is a local problem. The browser has a copy of the file in its cache and continuously serves it to you. It doesn’t want to request a new file from the server. Problematic files are usually CSS, JS, and images, but it’s not limited to any specific file-type as everything depends on the headers which control the request (file) lifetime. The problem is, in most cases, easy to solve – do a force reload (hard reload, forced reload – it’s all the same thing) and if needed empty local cache.

In Chrome, you can do a hard reload by opening the console (F12 key) and then right-clicking on the reload button to get a menu with additional reload options.

2. The server doesn’t want to send a fresh copy of the file

The term server, in this case, covers anything that’s responsible for delivering files to you – a server, a CDN, a proxy. Instead of grabbing a new version of the file from the base source it continues to serve the version from the cache. Although not practical, if you’re the admin you can always clean the cache. In most cases, you’re not the admin, and you can’t affect the server’s behavior. You can, however, trick it to grab a fresh copy of the file for you – and that’s what our solution does.

The solution!

Requesting file.css and file.css?rnd=23 will get you the contents of the same file but those two requests are not the same! Both the browser and the server see them as requests for two different resources. That’s the whole premise behind our solution. Credits for it go to Paul Irish who wrote about the method back in 2008.

With the magic of a few lines of JavaScript, we find all CSS files referenced on the page (all <link rel="stylesheet"> elements) and then change their URLs. Changing /some-path/style.css to /some-path/style.css?rnd=132 forces the browser to re-request the file from the server. Because of the rnd part, neither the browser or the server have that request in the cache and are forced to grab a fresh copy of the file! Simple, fast, universal and clean solution!

Reload CSS

Go ahead, press the button above. The page flickers for a bit while the CSS reloads and you’ll have fresh copies of all CSS. To use it on any page drag the button to your bookmarks toolbar. Click the bookmark whenever you need to force-reload all CSS files on a page. The bookmarklet works regardless of any specific JS setup on the page. It doesn’t rely on jQuery or any other libraries. Curious about how the code looks? Here it is:

(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
})()

After reloading the page, you’ll get the old CSS again. Why? Because the HTML still has the old, cached CSS paths ie style.css and not style.css?rnd=235, so click your bookmarklet again to reload CSS.