How to force reload cached CSS files (even when using CDN)

Client-side CSS caching is the worst! Throw in a CDN and you have a real nightmare. No matter what you do, you can’t get the browser to refresh the CSS file and show you the changes. Reload, refresh, F5, ⌘ + R, CTRL + F5 – whatever you click nothing works. We also have that problem, and we have a simple solution you will love!

Forget about clearing your browsers’ cache – meet our cache buster

The best solutions are the simplest ones. No, we won’t tell you to change your code, modify any server settings, htaccess file, to clear the cache, or install a browser add-on – we’ll just give you a bookmark, or a bookmarklet to be more precise. Try it now.

Reload CSS

Simply drag the link above to your bookmarks bar and you’re done! Whenever you’re on a page that refuses to reload the CSS just click the bookmark. Don’t believe us? Click the link now and watch the magic happen – all CSS on this page will force reload.

How does it reload all CSS?

It’s simple. When you click the bookmark, it runs a few lines of JS which find all the CSS files used on the current page. Then it adds a random GET variable to the end of the file which forces the browser to think it’s an entirely new file, and it reloads it. You see the screen flash with unstyled content for a second and after that – magic! All your CSS edits are visible.

When you reload the page, the changes will be gone because the original cached file will be used again (most probably, unless the original cache cleared in the meantime), so you have to click the “reload CSS” bookmark once more.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

2 thoughts on “How to force reload cached CSS files (even when using CDN)

  1. […] Did you made changes to your CSS file but simply can't force the browser to reload it and show you the changes? That's a common problem – get the fix.  […]

Leave a Reply

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