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

Debugging a live site is rarely a good idea. Cache doesn’t throw anything good into the mix either. Before you dismantle the site into tiny pieces try disabling the server cache. The procedure is very hosting-company-specific but open the control panel, hit Ctrl+F and enter “cache”. It works in most cases.

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!

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.

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.

A friendly advice: if you’re editing a file and despite reloading everything there is to reload, still can’t see any changes – check if you’re editing the right file & saving it in the right location. I know I’ve made that mistake far too many times.

  1. THANK YOU! So helpful for me to get CSS to force reload… and instructions I can send clients to follow for the same. Perfect.

    1. Sure, you can do that easily via a .htaccess file. Add this to it to disable all cache:
      <IfModule mod_headers.c>
      Header set Cache-Control "no-cache, no-store, must-revalidate"
      Header set Pragma "no-cache"
      Header set Expires 0

    1. Glad to hear that, Aaron!
      Keep your eye on the blog as we’re about to publish more interesting articles like this one 🙂

  2. It worked prefect in Firefox. I use Wp Rocket and Cloudflare so css edits are a pain – I cannot see them. Is there any way to have this button relaod css for the entire site? Right now, I have to hit the button for each page.

  3. This is an absolute God send. Thank you for this!
    Do you think it would be possible for the server to refresh the site’s CSS after clicking a button? Right now I have a “color picker” set up on my forum, when the user chooses their color, saves it, this color HEX is uploaded to the database and the page refreshes, but for the color change to take effect, it needs a CTRL+F5 refresh and it’s not ideal.

    1. I’m not familiar with the code you have on your site and how everything is set up but 99% that it could be done. Obviously with some custom serverside code.

      1. Thanks for getting back to me. I’ll keep having a look around. For now, the. htaccess code you provided further up the comments is working like a charm, thank you for providing the code.

  4. Hi, I so wish this to work! I’ve tried it Safari, Chrome and Firefox. The button doesn’t do anything and I can’t drag it to the bookmark bar. What am I missing here?

  5. Hey,

    Unfortunately, this does not currently work because the button is not a bookmarklet at all. This is the full code: Reload CSS when inspecting the “Reload CSS” Button.

  6. Sorry to be redundant, but this is really nice. An elegant hack. Thanks.
    What I particularly enjoy is that it makes me think about the logic of http requests. (and it works.)

Leave a Reply

Your email address will not be published. Required fields are marked *