Force CSS Reload

Finally, after a whole night of searching, I have found an easy way to force CSS reload to happen.  Yay!

The very easiest solution I found (and not a drop of code) was to get an extension for my browser (Chrome).  I am sure there must be something similar for Safari or Firefox, but I am happy to have one of my browser refreshing right now.

For those of you who want a quick answer: my best (and let’s not forget, easiest!) solution was to get a Chrome extension:

CSS Reload extension for Chrome

All you have to do is go to the Chrome Web Store, search for “CSS reload” and get the extension.  You just click and it will automatically install into your Chrome browser.

Here is the link (it should take you to Chrome web store with the search parameters already specified): Chrome Web Store

CSS reload icon

Once you have the CSS Reload Chrome extension, whenever you are at a page that has CSS styling, you will see the little green refresh icon to the right of your browser’s address bar.  Just click that and it will reload fresh copies of any underlying stylesheets that the page might be using.

Now, if that doesn’t work for you, then you might want to read on.  There might be a solution or a clue to a solution below.

Why might one need to force css reload?

In my case, I am working on lots of changes to my external stylesheet for one of my sites. (It has just undergone a new theme – which means lots of tweaking.)  And when you make changes, you need to be able to see those changes immediately.  However you don’t always.  Because there is the power of cache.

Your images are normally cached (by your browser and/or at your server end).  That means every time a page is called, it does not have to keep reloading all the same elements anew. This improves load time for your pages.  Which is good.

But when you are in the (re)development phase, it can be mega frustrating.

Previously the easiest way to see new changes was by making your browser do a “hard reload”.  That means you clear your browser’s cache so it has to call everything anew from the server.  You normally do this either with a Ctrl+F5 (Windows) or Command+R (Mac).

But sometimes even that does not work.  So you clear your browser setting manually. For Chrome, go to Chrome >> Clear Browsing Data ..

But again, sometimes that also doesn’t work.

And that is where I found myself.  I couldn’t keep working because I could not see how the changes were affecting the site.  And I could not get any of my browsers to do a full reload.  In my particular case, I needed my external stylesheet to be refreshed each time I reloaded my pages.  But it just would not do it.

My Current Specs

Before I go further, I should tell you (in case it makes a difference) my main technical specs. I am using a MacBook Pro and using Safari and Chrome browsers to work.

Other Options To Force CSS Reload

I tried seemingly endless ways to get my browsers to do a full reload.  Here are some of them in case they might work for you:

Flush Cache at the server end

SuperCacher Flush Cache buttons

I noticed that in my hosting account (SiteGround), they provide SuperCacher services. And they had buttons to flush the cache in my cPanel.  So I tried that.  But it didn’t work for me.  My css stylesheet was still not updating to the latest changes.

Disable Chrome’s Cache

This step worked for some people so it might work for you. In your browser, go to the page you are working on. Then open the Developer Tools (as below).

Chrome browser has a Developer Tools section which can be of use to developers (and web designers). You can access it via the mini menu icon (usually at the top right of the browser).

Chrome’s Developer Tools

A new and separate window for the Developer Tools will open.  Keep it open.
Under Network, enable Disable Cache.

Disable Cache in Chrome

Sometimes, that is enough to force your browser to do a full reload when you refresh your page. (You have to leave the Developer Tools window open.)

Chrome Developer Tools Settings (gear icon)

If that still does not do the trick, then in your (still open) Developer Tools window, access the settings (gear icon) at the top right of the Developer Tools window.

Force Chrome to Auto-reload generated CSS

If you are lucky, that might be all that is needed to force Chrome to reload your stylesheet(s).

Now if you were like me, and all the above still do not work, then the following suggested solutions may work for you.  I tried them all.  But because I only know just enough to scrape by, some of the following were a bit hard for me as I was never really sure which parameters to change.

Code

Nonetheless, the following links are the best I have found.  They seem pretty clear and authoritative.  And if you are more techy and know a bit more php and backend scripting than I do, it might all be crystal clear to you.

Genesis:
Override CSS cache – Force CSS changes to go live immediately

WordPress: Force Reload of Scripts and Stylesheets in your Plugin or Theme

How Do I Force the Browser to Use the Newest Version of my Stylesheet?

Force CSS changes to “go live” immediately

Make CSS changes go live immediately

Clear Cache & Hard Refresh on Chrome

Good Luck & Happy Developing!

Addendum
15 Apr 2015
I came across this How to Fix WordPress Website Not Updating Right Away by wpbeginner.com – which is a great and clear article. It also offers a solution to the same problem covered here, namely not being able to see changes you made to your site probably caused by cache. Their solution was also very helpful.